WebdriverIOは、Webアプリケーションやモバイルアプリケーションからネイティブデスクトップアプリ、さらにはVS Code拡張機能まで、さまざまな種類のアプリケーションをテストするために構築されています。しかし、Chrome DevToolsプラグインはどうでしょうか？このブログ記事では、Chrome Devtools用に構築された拡張機能とどのようにやり取りできるかを探ります。

WebdriverIOは、Webアプリケーションやモバイルアプリケーションからネイティブデスクトップアプリ、さらにはVS Code拡張機能まで、さまざまな種類のアプリケーションをテストするために構築されています。しかし、Chrome DevToolsプラグインはどうでしょうか？このブログ記事では、Chrome Devtools用に構築された拡張機能とどのようにやり取りできるかを探ります。

WebDriverIOの機能の1つは、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
  },
};

この設定では、タブのDevToolsを自動的に開き、PixiJS DevTools拡張機能をロードするためのオプションを指定してChromeブラウザを指定します。extensionsオプションは、拡張機能ファイルをbase64形式で読み取ります。また、DevTools（開発者ツール）パネルを自動的に開くために、--auto-open-devtools-for-tabsフラグも必要です。

テストスクリプトの作成

次に、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.dokyumento.jp/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.dokyumento.jp/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);
    });
});

スクリプトの説明

概要

このスクリプトは、ブラウザのDevToolsを介してPixiJSゲームとやり取りするためにPuppeteerを使用していくつかのアクションを実行します。含まれる手順には、URLを開く、ターゲットを取得してフィルタリングする、DevToolsタブを移動する、PixiJS拡張機能とやり取りするなどがあります。

詳細な手順

1. URLを開く：スクリプトは、PixiJSゲームの例に移動します。
2. Puppeteerインスタンスの取得：ブラウザからPuppeteerインスタンスを取得します。
3. すべてのターゲットの取得：現在のウィンドウからすべてのターゲットを取得します。Puppeteerのターゲットは、ページ、iframe、サービスワーカーなど、ブラウザ内のさまざまなコンテキストを表します。
4. DevToolsターゲットのフィルタリング：ターゲットをフィルタリングして、devtools://で始まるターゲットを見つけます。
5. ターゲットタイプのハック：ターゲットタイプをpageに変更して、そのDOMを操作および公開できるようにします。これにより、ターゲットが通常のWebページとして操作および検査できるようになります。
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などの拡張機能がさまざまなシナリオで正しく動作することを確認するのに役立ちます。

特定のテストニーズに合わせてスクリプトを自由に変更してください。ハッピーテスティング！