この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。
Playwright の VSCode 拡張とは？
Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。
GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。
VSCode 拡張のインストールは、以下のリンクから行うことができます。
VSCode 拡張を活用してテストを書く
本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright の拡張機能を追加します。
VSCode 拡張のインストール後、以下の機能を利用してテストコードの作成・実行していきます。
- Record at cursor: テストの記録
- Pick locator: locatorのコピー
- ブラウザモードでのテスト実行
- 独自のconfigを活用する
Record at cursor を使ったテストの記録
まず、tests/todo.spec.ts を作成し、テストの雛形を作成します。
import { test, expect } from "@playwright/test";
test.describe("Todo App", () => {
test("ToDoを追加できること", async ({ page }) => {
await page.goto("http://localhost:3002");
});
});
VSCode のサイドバーにあるテストの項目を選択すると、Playwright の各種機能が一覧表示されます。ここから「Record at cursor」を選択します。
この機能を使うと、実際のブラウザでの操作がリアルタイムでテストコードに反映されます。GUI ベースでの操作を直感的に行えるので、特定の Locator の位置を直接コードから探す手間が省けます。
記録された操作をもとに、生成されたテストコードは以下のようになります。
test("ToDoを追加できること", async ({ page }) => {
await page.goto("http://localhost:3002");
await page.getByLabel("Todo").click();
await page.getByLabel("Todo").fill("todo 1");
await page.getByLabel("Todo").press("Enter");
});
Pick locator を使って locator をコピーする
次に実際に todo が追加されていることを確認します。
「Pick locator」を選択してブラウザ上でカーソルを当てると、その要素のセレクタが表示されます。クリックすると VSCode の上に表示され、Enter を押すとクリップボードにコピーされます。
コピーしたセレクタを使用して、todo が追加されていることを検証します。表示の確認には、locator の isVisible を使います。
test("ToDoを追加できること", async ({ page }) => {
await page.goto("http://localhost:3002");
await page.getByLabel("Todo").click();
await page.getByLabel("Todo").fill("todo 1");
await page.getByLabel("Todo").press("Enter");
const isVisible = await page
.getByRole("listitem")
.locator("div")
.filter({ hasText: "todo 1" })
.isVisible();
await expect(isVisible).toBeTruthy();
});
テストの実行は、VSCode のサイドバーにある再生ボタンをクリックするだけです。正常に実行されると、passed と表示されます。
Running 1 test using 1 worker
1 passed (826ms)
ブラウザモードでテストを実行する
テストをブラウザモードで実行するためには、「Show Browser」オプションにチェックを入れるだけです。これにより、テスト実行中のブラウザの動作をリアルタイムで確認することができます。
独自の config を活用する
Playwright では、独自の config ファイルを通じてテスト設定をカスタマイズできます。例として、異なる baseUrl を用いてテストを行いたい場合、以下のような config を利用できます。
import { defineConfig } from "@playwright/test";
import baseConfig from "./playwright.config";
const config = defineConfig({
...baseConfig,
workers: 2,
use: {
baseURL: "http://localhost:3002",
},
});
export default config;
テストエクスプローラーの左端にある歯車をクリックすると、config を選択することができます。
baseURL を設定すれば、page.goto("/") を実行した際にこの baseURL が適用されます。従って、前回のように明示的に URL を指定せずに処理を行うことができます。
test("ToDoを追加できること", async ({ page }) => {
await page.goto("/"); // baseUrlが適用される
// (省略)
});
常に特定の config を使用したい場合、デフォルトの config として設定することもできます。
これにより、一度設定してからは、テストエクスプローラーの再生ボタンを押すだけで指定した config を元に実行されます。ブラウザも指定したものが起動されます。
まとめ
Playwright の VSCode 拡張を使うと、簡単な GUI 操作でテストコードの記録や、テストを実行できます。また独自の config を読み込むこともできるので、テストの実行環境を柔軟に変更することができます。
今回紹介した以外にも、便利な機能があるのでぜひ活用してみてください！
今回使用したソースコードは公開しているので、興味ある方は参考までにご覧ください。
参考
Discussion