🚀 What’s New in WebdriverIO v9: Key Features & Updates for 2024


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

  • Renamed @wdio/devtools-service to @wdio/lighthouse-service

  • 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/AspectWebdriverIO v8WebdriverIO v9
New FeaturesDevTools protocol, ES6 module support, automatic waits, retry mechanismComponent Testing, test parallelization, enhanced TypeScript support, WebdriverIO Assistant
Deprecations/Breaking ChangesRemoved synchronous commands, Node.js below v12 deprecatedFurther streamlined commands, Node.js below v14 deprecated
Ecosystem & PluginsExpanded plugin ecosystem, cloud service integrationNew plugin architecture, improved CI/CD support
Configuration & SetupSimplified wdio.conf.js, support for .env filesWebdriverIO Assistant, enhanced CI/CD integration
Documentation & SupportImproved guides and community forumMore in-depth guides, video tutorials, expanded community support
Cross Browser Request MockingWebdriverIO introduced request mocking in v6.3.0, limited to Chromium browsersDue to use of WebDriver Bidi, Extending support to all browsers
Automatic Shadow Root Piercingsupported "deep selectors", this functionality was limited to CSS selectorsWebdriverIO is the first framework to support this capability for shadow roots in both open and closed mode.
Setting ViewportsWith 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 HandlingWith 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.

💡
How to upgrade to WebdriverIO v9 from WebdriverIO v8 [The blog is coming till 26 Aug 2024]

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.


WebdriverIO v9 Released | WebdriverIO

WebdriverIO v9 Release Party: Browser Automation's Future

[Tracker] WebdriverIO v9 Release


0
Subscribe to my newsletter

Read articles from Hardik Chotaliya directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Hardik Chotaliya
Hardik Chotaliya

👩‍💻 Automation QA Engineer || SDET ||✍🏼 Tech Blogger || WebdriverIO, JavaScript, TypeScript || based in 🇮🇳 || 🤓 Life-long learner ||Love ☕ & 🏏