Перейти до основного вмісту

Interacting with Chrome DevTools from WebDriverIO

· 7 хвилин читання

WebdriverIO is build to test various types of applications, from web or mobile applications towards native desktop apps or even VS Code extensions. But what about Chrome DevTools plugins? In this blog post we explore how one could interact with an extension build for Chrome Devtools.

WebdriverIO is build to test various types of applications, from web or mobile applications towards native desktop apps or even VS Code extensions. But what about Chrome DevTools plugins? In this blog post we explore how one could interact with an extension build for Chrome Devtools.

One of WebDriverIO features is the ability to interact with Chrome DevTools, which can be extremely helpful for debugging and testing web applications and browser extensions. In this blog, we'll explore how to use WebDriverIO to interact with the Chrome DevTools, specifically focusing on interacting with the PixiJS extension. You can find a complete example in Github.

Devtools in WebdriverIO

Setting Up Extension

You need to download the extension you want to test in a .crx format, in our case we have downloaded the PixiJS-Devtools-Chrome-Web-Store.crx extension file.

Setting Up WebDriverIO

First, ensure you have WebDriverIO set up in your project. If not, you can install it by following the official installation guide here

WebDriverIO Configuration for Chrome DevTools

Here is the configuration file (wdio.conf.js) tailored to our example:

import path from "path";
import fs from "fs";

export const config = {
specs: ["./test/specs/**/*.js"],
runner: "local",
maxInstances: 1,
capabilities: [
{
browserName: "chrome",
browserVersion: "stable",
"goog:chromeOptions": {
args: [
"ignore-certificate-errors-spki-list",
"--ignore-certificate-errors",
"window-size=1920,1080",
"--auto-open-devtools-for-tabs",
],
extensions: [
fs.readFileSync(
path.resolve("./PixiJS-Devtools-Chrome-Web-Store.crx"),
"base64"
),
],
},
},
],
logLevel: "debug",
framework: "mocha",
mochaOpts: {
ui: "bdd",
timeout: 1000 * 60 * 5, // 5 min
},
};

In this configuration, we specify the Chrome browser with options to auto-open DevTools for tabs and load the PixiJS DevTools extension. The extensions option reads the extension file in base64 format. We need also the --auto-open-devtools-for-tabs flag to automatically open the DevTools (Developer Tools) panel.

Writing the Test Script

Next, we write a test script to interact with the PixiJS extension through Chrome DevTools. Create a test file, for example, devtools.test.js, and add the following code:

import { $, browser } from "@wdio/globals";
import { Key } from "webdriverio";

describe("DevTools Test on latest chrome", function () {
it("Devtools Navigation", async function () {
// Open an example game.
await browser.url(
"https://pixijs.io/examples-v5/#/demos-basic/container.js"
);

// Get window handles.
const handles = await browser.getWindowHandles();

// Switch to devtools window.
await browser.switchToWindow(handles[1]);

// Navigate through devtool tabs.
// For linux machines use [Key.Control, '['] .
await browser.keys([Key.Meta, "["]);

// Switch to devtool extension iframe.
await browser.switchToFrame(0);

// Manipulate extension.
await $(
"body > div > div > div.status.svelte-iqeeoq > div.patch.svelte-iqeeoq > button"
).click();
await $(
"body > div > div > div.outliner.svelte-iqeeoq > div > div.body.svelte-1vjyr8f > div:nth-child(1) > button:nth-child(4)"
).click();
await $(
"body > div > div > div.outliner.svelte-iqeeoq > div > div.body.svelte-1vjyr8f > div:nth-child(1) > button:nth-child(4)"
).click();

// Switch back to parent frame.
await browser.switchToParentFrame();

// Switch back to main window.
await browser.switchToWindow(handles[0]);
});
});

Explanation of the Script

  1. Open a URL: The script navigates to an example PixiJS game.
  2. Get Window Handles: Retrieves the window handles for the main window and the DevTools window.
  3. Switch to DevTools Window: Switches context to the DevTools window using its handle.
  4. Navigate DevTools Tabs: Uses keyboard shortcuts to navigate through DevTools tabs. Note: For Linux, replace ['Meta', '['] with ['Control', '['].
  5. Switch to Iframe: Switches to the iframe that contains the PixiJS extension.
  6. Interact with the Extension: Performs clicks on specific elements within the extension.
  7. Switch Back: Returns to the parent frame and then back to the main window.

Running the Test

To run the test, execute the following command:

npx wdio run wdio.conf.js

This will launch Chrome, open the specified URL, interact with the DevTools, and manipulate the PixiJS extension as defined in the test script.

Demonstration

Devtools

Conclusion

By leveraging WebDriverIO and Chrome DevTools, you can automate complex browser interactions and extension manipulations. This approach is beneficial for testing web applications and ensuring extensions like PixiJS work correctly across different scenarios.

Feel free to modify the script to fit your specific testing needs. Happy testing!

Welcome! How can I help?

WebdriverIO AI Copilot