From v6 to v7

This tutorial is for people who are still using v6 of WebdriverIO and want to migrate to v7. As mentioned in our release blog post the changes are mostly under the hood and upgrading should be a straight forward process.

While we would love to have a fully automated process for this the reality looks different. Everyone has a different setup. Every step should be seen as guidance and less like a step by step instruction. If you have issues with the migration, don't hesitate to contact us.

Setup​

Similar to other migrations we can use the WebdriverIO codemod. For this tutorial we use a boilerplate project submitted by a community member and fully migrate it from v6 to v7.

To install the codemod, run:

npm install jscodeshift @wdio/codemod

Commits:​

• install codemod deps [6ec9e52]

Upgrade WebdriverIO Dependencies​

Given that all WebdriverIO versions are tight to each other it is the best to always upgrade to a specific tag, e.g. latest. To do so we copy all WebdriverIO related dependencies out of our package.json and re-install them via:

npm i --save-dev @wdio/allure-reporter@7 @wdio/cli@7 @wdio/cucumber-framework@7 @wdio/local-runner@7 @wdio/spec-reporter@7 @wdio/sync@7 wdio-chromedriver-service@7 wdio-timeline-reporter@7 webdriverio@7

Usually WebdriverIO dependencies are part of the dev dependencies, depending on your project this can vary though. After this your package.json and package-lock.json should be updated. Note: these are the dependencies used by the example project, yours may differ.

Commits:​

• updated dependencies [7097ab6]

Transform Config File​

A good first step is to start with the config file. In WebdriverIO v7 we don't require to manually register any of the compilers anymore. In fact they need to be removed. This can be done with the codemod full automatically:

npx jscodeshift -t ./node_modules/@wdio/codemod/v7 ./wdio.conf.js

Commits:​

• transpile config file [6015534]

Update Step Definitions​

If you are using Jasmine or Mocha, you are done here. The last step is to update the Cucumber.js imports from cucumber to @cucumber/cucumber. This can also be done via the codemod automatically:

npx jscodeshift -t ./node_modules/@wdio/codemod/v7 ./src/e2e/*

That's it! No more changes necessary 🎉

Commits:​

• transpile step definitions [8c97b90]

Conclusion​

We hope this tutorial guides you a little bit through the migration process to WebdriverIO v7. The community continues to improve the codemod while testing it with various teams in various organisations. Don't hesitate to raise an issue if you have feedback or start a discussion if you struggle during the migration process.