メインコンテンツへスキップ

WebDriverIOからChrome DevToolsを操作する

·7分で読めます

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のようなテストファイルを作成し、次のコードを追加します

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. 戻る:親フレームに戻り、次にメインウィンドウに戻ります。

テストの実行

テストを実行するには、次のコマンドを実行します

npx wdio run wdio.conf.js

これにより、Chromeが起動し、指定されたURLが開き、DevToolsとやり取りし、テストスクリプトで定義されているようにPixiJS拡張機能が操作されます。

デモンストレーション

Devtools

結論

WebDriverIOとChrome DevToolsを活用することで、複雑なブラウザの相互作用や拡張機能の操作を自動化できます。このアプローチは、Webアプリケーションのテストや、PixiJSなどの拡張機能がさまざまなシナリオで正しく動作することを確認するのに役立ちます。

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

ようこそ!何かお手伝いできることはありますか?

WebdriverIO AI Copilot