WebdriverIO is an amazing test automation framework, and I am very excited that on December 1, 2022 WebdriverIO officially announced its version 8 release! With its previous updates in versions 6 and 7, the WebdriverIO team rewrote everything in TypeScript, removed sync support to transition to async-only, and added integration for Google Lighthouse. This version 8 release is a welcomed refinement of the framework. It shouldn’t change much for end users, nor should it have breaking changes.
With its update to version 8, WebdriverIO:
- updated the helpful one-line command to set up a new project
- removes support for older versions of Node.js
- transitions from CommonJS to ESM
- implements a new Action API interface
- adds a new runner for Unit and Component Testing in the browser
- streamlines the way WebdriverIO deals with global objects using the test runner
Of course, the team also updated the documentation, too.
Let’s explore the WebdriverIO v8 updates.
Update to One-line Setup Command
A small but effective update so far that made me smile was being able to set up a WebdriverIO project with one command `$ npm init wdio@latest ./`. After that command, it asks you all the questions needed to set up and run your tests. It provides you with predefined options for not only end-to-end testing of web and mobile applications but unit and component testing as well.
Support for Node.js v12, v13, and v14 dropped
The Node.js team moved Node.js v14 into a maintenance Long Term Support (LTS) phase in October 2021. It is now in “maintenance” until its end-of-life in April 2023. With newer versions of Node.js available, the WebdriverIO team recommends updating to Node.js v16 or v18 directly.
Transition from Common JS to EMCAScript modules (ESM)
To give some background, CommonJS and ESM refer to the module system that allows us to use code from a “next” developer/library or code/data that is in a different file. The CommonJS module system has been the default module system within the Node.js ecosystem. However, the ES module was added in Node.js v8.5.0 and has been stabilized and incorporated as standard from Node.js v13.2.0.
You may be familiar with using `require` to use your page objects in your test files and `module.exports` or `exports` so that your page objects or other files can be accessed by your tests. This method of managing files and libraries is the CommonJS way.
With ESM you use `import` and `export` to manage files and libraries.
There are some other differences between them, but for you, the end user, this is the main one.
This change should not affect your work as CommonJS is still supported. However, if you want to use ES modules then you can now do so. I recommend getting familiar with ESM and how it works before starting to use it. Hopefully, in the near future, there will be additional boilerplates from WebdriverIO on using ESM in your projects https://webdriver.io/docs/boilerplates/.
New Runner for Unit and Component Testing in the Browser
An exciting v8 feature is the new browser runner that allows you to run unit and component tests in an actual/real browser environment. This is going to provide you with a more realistic user interaction with your components. It comes with presets for React, Vue, Svelte, SolidJS among others, and is powered by Vite.js.
New Action Interface
This is a new interface that makes executing various actions much easier. Two new browser commands action and actions have been added. It is now much simpler and type-safe to run the right action, e.g. sending key events to the browser.
Read more about this in the WebdriverIO API docs.
WebDriver BiDi Support
WebdriverIO is based on the WebDriver protocol, which is a web standard for automating browsers. This means that, with WebdriverIO, your tests are running in a browser that your user uses rather than a browser engine.
This WebDriver BiDi Support means that whenever new protocol changes happen in Webdriver, you as the user can use it once it’s available in browsers.
The idea of WebDriver BiDi is to make a new standard protocol for browser automation, which will be based on the bi-directional transport protocol (WebSocket or pipes).
Optional Globals
The WebdriverIO test runner would usually register the browser object or the $ and $$ commands to the global scope. With v8 update, the user can decide if they want to continue attaching these objects and methods to the global scope or prefer importing them directly.
To import them directly you would say :
import { browser, $, $$, expect } from ‘@wdio/globals’
Importing the $ command allows you to use it from the @wdio/globals:
Using Visual Studio Code as my code editor, if I hover over the $ it shows that it is coming as a global import from WebdriverIO:
A new configuration property called injectGlobals (defaults: true) handles whether the test runner modifies the global scope or not. If your setup works fine using global objects, no change is needed to update to v8.
You don’t have to import from @wdio/globals as it will still work.
Other Updates
Aside from these major updates, documentation has been improved and new API docs around WebdriverIO objects like browser, element, and mock have been introduced. The behavior of relative spec or exclude paths was also fixed so that now specs and exclude paths will be always seen as relative to the config file and –spec arguments, relative from the working directory.
To see all of the details of this latest release, visit the WebdriverIO blog.
Update to WebdriverIO version 8 from version 7
Install a module to help update outdated npm modules
`npm install -g npm-check-updates`
Run `ncu` to show list of outdated npm packages:
Then run `ncu -u` to upgrade your package.json:
Then finally run npm install to install new versions:
I then reran all my tests and they passed successfully.
My thoughts on the version update
WebdriverIO’s version 8 update is a continuation of work by the WebdriverIO team to make the framework more rounded and robust. I like the changes that have been made and I am looking forward to trying out unit component testing with WebdriverIO.
I love that the updates don’t have breaking changes and so this allowed me to upgrade from version 7 to 8. I would recommend that you update your project to the latest version to benefit from the updates that have been made.
If you are interested in learning more about WebdriverIO, check out my WebdriverIO course on Test Automation University. Also, check out this repo with a sample example using WebdriverIO v8.
