🚀 What’s New in WebdriverIO v9: Key Features & Updates for 2024
Explore the Latest Enhancements in WebdriverIO v9, Including TypeScript Integration, WebDriver Bidi, and More
Table of contents
- Introduction
- Key Features of WebdriverIO v9
- WebDriver Bidi Integration
- Automatic Piercing of Web Components
- Native fetch Implementation
- Deprecation of JSONWireProtocol and Deprecated Interfaces
- Renaming of @wdio/devtools-service to @wdio/lighthouse-service
- Removal of DevTools Features in Favor of Puppeteer
- Faster Tests with new TypeScript Runtime Environment in WebdriverIO v9
- Advantages of WebdriverIO v9 over v8
- My thoughts on the version update
- Conclusion
Introduction
On August 16, 2024, WebdriverIO announced the release of version 9, marking an exciting advancement for this test automation framework. Building on the improvements made in versions 6, 7, and 8, the WebdriverIO team revamped the framework in TypeScript, transitioned from CommonJS to ESM, removed sync support in favour of async-only, and introduced integration for Google Lighthouse. This version 9 release represents a significant refinement of the framework. It is expected to bring major changes for end users but won't introduce compatibility issues.
What’s new in WebdriverIO version 9:
Automatically enabled WebDriver Bidi for supported sessions enabling features like request mocking across Chrome, Firefox, and Edge
Added support for automatic piercing of Web Components
Implemented native fetch
Removed support for old JSONWireProtocol and deprecated interfaces
Consolidating Lighthouse-related commands
Removed devtools features in favour of Puppeteer and the getPuppeteer command
Faster tests due to the new TypeScript runtime environment
Let’s explore the WebdriverIO v9 updates.
Key Features of WebdriverIO v9
WebDriver Bidi Integration
WebdriverIO v9 has introduced automatic support for the WebDriver Bidi protocol in supported browser sessions. This is a game-changer for developers and testers, as it allows seamless request and response mocking across major browsers like Chrome, Firefox, and Edge. Previously, handling network requests required additional libraries or workarounds, but with WebDriver Bidi, you can intercept, modify, and test network traffic directly within your tests. This simplifies tasks like testing API responses, simulating different network conditions, and verifying how your application handles various scenarios without needing external tools.
👉 To read more about WebDriver BiDi - The future of cross-browser automation, please check this blog. 👇👇👇
Automatic Piercing of Web Components
One of the most awaited features in WebdriverIO v9 is the automatic piercing of Web Components. Web Components, a suite of different technologies allowing developers to create reusable custom elements, have been notoriously challenging to work with in testing environments. With this update, WebdriverIO can now automatically interact with shadow DOM elements without requiring complex code. This makes testing modern web applications that heavily rely on Web Components much easier and more intuitive, ensuring that your tests can keep pace with the latest development trends.
Native fetch
Implementation
In line with modern JavaScript standards, WebdriverIO v9 has introduced native fetch
support. This allows developers to make HTTP requests within their test scripts using the familiar fetch
API, rather than relying on third-party libraries like axios
or request
. Native fetch
support simplifies test code and aligns it more closely with production code, making it easier to write, maintain, and debug. It also reduces the dependency on external libraries, leading to a more streamlined and efficient testing environment.
Deprecation of JSONWireProtocol and Deprecated Interfaces
WebdriverIO v9 marks the end of support for the old JSONWireProtocol and several deprecated interfaces. The framework has fully embraced the W3C WebDriver standard, ensuring better compatibility and performance across all browsers. By removing these legacy protocols, WebdriverIO is able to offer a more stable and consistent experience, reducing the chances of running into issues with browser compatibility or outdated implementations. For users, this means fewer headaches and a more reliable testing process.
Renaming of @wdio/devtools-service to @wdio/lighthouse-service
In an effort to better reflect its functionality, WebdriverIO has renamed the @wdio/devtools-service
package to @wdio/lighthouse-service
. This change highlights the enhanced integration with Google Lighthouse, a tool used to analyze web page performance, accessibility, SEO, and more. The renamed service now consolidates all Lighthouse-related commands, making it easier for users to run performance audits as part of their automated test suites. This update underscores WebdriverIO’s commitment to providing comprehensive testing solutions that go beyond functional testing, enabling developers to monitor and optimize their applications holistically.
Removal of DevTools Features in Favor of Puppeteer
With WebdriverIO v9, the framework has removed certain DevTools features, opting instead for enhanced Puppeteer integration via the getPuppeteer
command. Puppeteer, a popular headless browser automation tool, offers a more robust and flexible API for interacting with browser DevTools. By focusing on Puppeteer, WebdriverIO ensures that users have access to the latest and most powerful browser automation capabilities, particularly for tasks like headless testing, capturing screenshots, and generating PDFs. This shift also aligns with the industry trend towards using Puppeteer for complex browser interactions, providing users with a modern and well-supported toolset.
Faster Tests with new TypeScript Runtime Environment in WebdriverIO v9
Finally, one of the most significant under-the-hood changes in WebdriverIO v9 is the move to a new TypeScript runtime environment. This update not only modernizes the framework but also results in noticeably faster test execution. TypeScript’s static typing and enhanced editor support lead to fewer runtime errors and more efficient test code, which in turn speeds up the entire testing process. For developers, this means shorter feedback loops and the ability to iterate more quickly, ultimately improving productivity and code quality.
Advantages of WebdriverIO v9 over v8
Here's a simplified table comparing the key differences between WebdriverIO v8 and WebdriverIO v9:
Feature/Aspect | WebdriverIO v8 | WebdriverIO v9 |
New Features | DevTools protocol, ES6 module support, automatic waits, retry mechanism | Component Testing, test parallelization, enhanced TypeScript support, WebdriverIO Assistant |
Deprecations/Breaking Changes | Removed synchronous commands, Node.js below v12 deprecated | Further streamlined commands, Node.js below v14 deprecated |
Ecosystem & Plugins | Expanded plugin ecosystem, cloud service integration | New plugin architecture, improved CI/CD support |
Configuration & Setup | Simplified wdio.conf.js , support for .env files | WebdriverIO Assistant, enhanced CI/CD integration |
Documentation & Support | Improved guides and community forum | More in-depth guides, video tutorials, expanded community support |
Cross Browser Request Mocking | WebdriverIO introduced request mocking in v6.3.0 , limited to Chromium browsers | Due to use of WebDriver Bidi, Extending support to all browsers |
Automatic Shadow Root Piercing | supported "deep selectors", this functionality was limited to CSS selectors | WebdriverIO is the first framework to support this capability for shadow roots in both open and closed mode. |
Setting Viewports | With WebDriver Classic, this can be challenging because browser windows cannot scale down to very small sizes and often maintain a minimum width of 500px . | v9 introduces a new "setViewport" command for precise mobile emulation, Adjust viewport size, device pixel ratio, and user agent easily in one command with the new "device" emulation scope, enhancing your responsive testing |
Automatic Dialog Handling | With the WebdriverIO v8 version, all commands will fail if you don't handle them properly. | With WebdriverIO v9 we will start automatically suppressing dialogs, unless you explicitly register a listener to it |
This table provides a concise overview of the major changes between the two versions.
My thoughts on the version update
WebdriverIO v9 is a significant step forward, building on the continuous efforts of the team to create a more robust and well-rounded testing framework. I’m particularly excited about the new features, especially the opportunity to explore Webdriver Bidi with WebdriverIO.
What I appreciate most is that this update doesn’t introduce many breaking changes, making the upgrade from version 8 to 9 seamless. This allows developers to take advantage of the new enhancements without the headache of compatibility issues. I highly recommend updating your projects to the latest version to benefit from these improvements.
If you’re interested in delving deeper into WebdriverIO, check out my blog post on Starting with WebdriverIO v9 [Coming Soon]. Additionally, feel free to explore this GitHub repository where I’ve shared a sample example using WebdriverIO v9.
Conclusion
WebdriverIO v9 represents a major step forward for the framework, bringing with it a host of new features and improvements that enhance the testing experience. From better browser protocol support to modern JavaScript features, WebdriverIO continues to evolve, making it an indispensable tool for developers and testers alike. By staying up to date with the latest changes and understanding how to leverage these new capabilities, you can ensure that your test automation is both effective and future-proof.
Important Links you can refer to:
WebdriverIO v9 Released | WebdriverIO
WebdriverIO v9 Release Party: Browser Automation's Future
[Tracker] WebdriverIO v9 Release