WebdriverIO 构建用于测试各种类型的应用程序，从 Web 或移动应用程序到原生桌面应用程序，甚至 VS Code 扩展。但是 Chrome DevTools 插件呢？在这篇博文中，我们将探讨如何与为 Chrome Devtools 构建的扩展进行交互。

WebdriverIO 构建用于测试各种类型的应用程序，从 Web 或移动应用程序到原生桌面应用程序，甚至 VS Code 扩展。但是 Chrome DevTools 插件呢？在这篇博文中，我们将探讨如何与为 Chrome Devtools 构建的扩展进行交互。

WebDriverIO 的一项功能是能够与 Chrome DevTools 交互，这对于调试和测试 Web 应用程序和浏览器扩展非常有用。在本博文中，我们将探讨如何使用 WebDriverIO 与 Chrome DevTools 交互，重点关注与 PixiJS 扩展的交互。您可以在Github找到完整的示例。

WebdriverIO 中的 Devtools

设置扩展程序

您需要以 .crx 格式下载要测试的扩展程序，在本例中，我们已下载了 PixiJS-Devtools-Chrome-Web-Store.crx 扩展程序文件。

设置 WebDriverIO

首先，确保已在项目中设置了 WebDriverIO。如果没有，您可以按照官方安装指南此处进行安装。

Chrome DevTools 的 WebDriverIO 配置

这是针对我们的示例定制的配置文件 (wdio.conf.js)

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
  },
};

在此配置中，我们指定了 Chrome 浏览器，并提供了选项来自动打开选项卡的 DevTools 并加载 PixiJS DevTools 扩展程序。extensions 选项以 base64 格式读取扩展程序文件。我们还需要 --auto-open-devtools-for-tabs 标志来自动打开 DevTools（开发者工具）面板。

编写测试脚本

接下来，我们编写一个测试脚本，通过 Chrome DevTools 与 PixiJS 扩展程序进行交互。创建测试文件，例如 devtools.test.js，并添加以下代码

WebDriver 原语

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]);
});
});

脚本说明

1. 打开 URL：脚本导航到 PixiJS 游戏示例。
2. 获取窗口句柄：检索主窗口和 DevTools 窗口的窗口句柄。
3. 切换到 DevTools 窗口：使用其句柄将上下文切换到 DevTools 窗口。
4. 导航 DevTools 选项卡：使用键盘快捷键在 DevTools 选项卡之间导航。注意：对于 Linux，请将 ['Meta', '['] 替换为 ['Control', '[']。
5. 切换到 Iframe：切换到包含 PixiJS 扩展程序的 iframe。
6. 与扩展程序交互：对扩展程序中的特定元素执行点击操作。
7. 切换回：返回到父框架，然后返回到主窗口。

Puppeteer

import { browser } from "@wdio/globals";

describe("Devtools using Puppeteer", function() {
    it("Devtools Navigation", async function() {
        // Open an example game.
        await browser.url("https://pixijs.io/examples-v5/#/demos-basic/container.js");
        await browser.pause(2000);

        // Get puppeteer instance from browser
        const puppeteer = await browser.getPuppeteer();

        // Get all targets from the current window
        const targets = puppeteer.targets();

        // Filter all targets and select the one starts from 'devtools://'
        const devtoolsTarget = targets.find(t => t.url().includes('devtools://'));

        // Devtools target type is 'other' and we change (we actually hack it) the type to 'page'
        // in order to be able to interact with and expose it's DOM
        // NOTE: you can refer to this page https://puppeteer.com.cn/api/puppeteer.target.aspage/
        const devtoolsPage = await devtoolsTarget.asPage();
        await devtoolsPage.bringToFront();

        // Navigate through Devtools tabs.
        // For linux machines use ['Control', '['] .
        await devtoolsPage.keyboard.down('Meta');
        await devtoolsPage.keyboard.press('[');
        await devtoolsPage.keyboard.up('Meta');

        // Get all the iframes from Devtools window related with the current open tab
        const frames = devtoolsPage.frames();

        // Switch to devtool extension iframe.
        const iframe = await frames[1];

        await browser.pause(2000);

        // Use puppetter commands to execute some expressions directly in the Devtools extensions window
        // NOTE: https://puppeteer.com.cn/api/puppeteer.page.evaluate
        await iframe.evaluate(() => {
            var xpath = '/html/body/div/div/div[2]/div[1]/button';
            var result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
            result.singleNodeValue.click();
        });

        await browser.pause(2000);

        await iframe.evaluate(() => {
            var xpath = '/html/body/div/div/div[1]/div/div[2]/div[1]/button[3]';
            var result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
            result.singleNodeValue.click();
        });

        await browser.pause(2000);

        await iframe.evaluate(() => {
            var xpath = '/html/body/div/div/div[1]/div/div[2]/div[1]/button[3]';
            var result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
            result.singleNodeValue.click();
        });

        await browser.pause(2000);
    });
});

脚本说明

概述

此脚本使用 Puppeteer 执行多个操作，以通过浏览器的 DevTools 与 PixiJS 游戏进行交互。涉及的步骤包括打开 URL、检索和过滤目标、导航 DevTools 选项卡以及与 PixiJS 扩展程序交互。

详细步骤

1. 打开 URL：脚本导航到 PixiJS 游戏示例。
2. 获取 Puppeteer 实例：从浏览器检索 Puppeteer 实例。
3. 获取所有目标：从当前窗口检索所有目标。Puppeteer 中的目标表示浏览器内的不同上下文，例如页面、iframe 或服务工作程序。
4. 过滤 DevTools 目标：过滤目标以查找以 devtools:// 开头的目标。
5. 修改目标类型：将目标类型更改为 page 以进行交互并公开其 DOM。这确保可以像操作和检查普通网页一样操作和检查目标。
6. 获取 DevTools 页面：从 DevTools 目标检索页面，包括其 DOM、元素、选择器等。这允许与 DevTools 中的元素进行交互。
7. 导航 DevTools 选项卡：使用键盘快捷键在 DevTools 选项卡之间导航。在 Linux 上，请将 ['Control', '['] 替换为 ['Meta', '[']。
8. 获取所有 Iframe：检索与当前打开的选项卡相关的 DevTools 窗口中的所有 iframe。
9. 切换到 DevTools 扩展程序 Iframe：切换到包含 PixiJS 扩展程序的 iframe。
10. 与扩展程序交互：使用 Puppeteer 命令在 DevTools 扩展程序窗口中直接执行表达式。此步骤有助于与 PixiJS 扩展程序进行交互。

运行测试

要运行测试，请执行以下命令

npx wdio run wdio.conf.js

这将启动 Chrome，打开指定的 URL，与 DevTools 交互，并根据测试脚本中定义的内容操作 PixiJS 扩展程序。

演示

结论

通过利用 WebDriverIO 和 Chrome DevTools，您可以自动化复杂的浏览器交互和扩展操作。这种方法有利于测试 Web 应用程序并确保 PixiJS 等扩展程序在不同场景下都能正常工作。

请随时修改脚本以适应您的特定测试需求。祝测试愉快！