VSCodeでデバックができるPlaywrightの自動ソース生成(所要時間5分)

Playwrightとは

Webサイトの自動テストツールです。Microsoft製のツールでブラウザの操作からソースを自動生成する機能があります。

Node.jsのプロジェクトをローカルに環境を作るのでPCを汚すことが少なくとも少ないと思っています。
(不要の場合はプロジェクトフォルダを削除で解決。npxでインストールするブラウザのプラグインは$HOME/.npm/_npxや他の場所に保存されていないのではと思っています)

前提条件

・Node.jsがパソコンに入っていること。
入っていれば5分で実用できます。
(Macの場合のインストール方法はこちら)

PlaywrightのTest Runner版

環境構築とProject作成(2分程度)

% cd project
% mkdir playwright
% cd playwright
# playwrightのプロジェクトを作成するツールのインストール
% npm install create-playwright@1.17.133
# playwrightのプロジェクトを作成する。
% npm init playwright@1.17.133
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

# node_modulesはnodeでダウンロードしたライブラリがあり、
# 自動テストの実行はこのフォルダーのファイルが必要になる。
% ls
node_modules		package.json		playwright.config.ts	test-results		tests-examples
package-lock.json	playwright-report	tests

% cd tests
# テストファイルは、xxx.spec.ts形式で保存する必要がある。
% ls
example.spec.ts		playwright.spec.ts	yuubin.spec.ts

PlaywrightのTest Runner版の実行方法

Step1 ソースを自動生成(ブラウザ操作するだけ)

# コード生成のブラウザとツールを起動する。
% npx playwright codegen

起動後の状態

URL変更からブラウザ操作でソースを記録する。

Step2 プロジェクトの所定の場所にコピーしたソースを保存する。

% cd playwright/tests
# xxx.spec.tsのファイル名規則の必要あり。
% vi playwright.spec.ts 
import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByLabel('Search').click();
  await page.getByPlaceholder('Search docs').fill('waitFor');
  await page.getByRole('link', { name: 'waitFor​ Locator' }).click();
  
  // コピーしたソースに追記する。
  await page.pause();
});

Step3 コンソールからデバックモードで実行する。

% cd playwright

# テストフォルダの特定のファイルをテストする
% npx playwright test playwright.spec.ts --project=chromium --debug

起動したツールの実行ボタンを押す。

ブラウザが自動で動きpauseの行で止まる。

Step4 VSCodeのプラグインからデバックモードで実行する。

(VSCodeを使用しない場合はスキップ)
VSCodeのインストールはここから

VSCodeの拡張機能の「Playwright Test for VSCode」をインストールする。

VSCodeでPlaywrightのデバック実行をする。

ブレークポイントで処理が止まりブラウザの状態を確認できる。

実行時の変数の値も確認できる。

Step5 ソースを改良してキャプチャーを取ることができる。

playwright_next_step.spec.ts

import { test } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  // await page.waitForTimeout(1000); // 1秒待つ
  // URLを待つ(リダイレクトなど)
  // await page.waitForURL('https://playwright.dev/');

  await page.getByLabel('Search').click();
  await page.getByPlaceholder('Search docs').fill('waitFor');
  await page.getByRole('link', { name: 'waitFor​ Locator' }).click();

  // スクリーンショット(追加)
  await page.screenshot({
    path: './screenshot/' + getDateTimeString(new Date()) + '_waitFor.png',
    fullPage: true,
  });

  await page.pause();
});

// タイムスタンプ
function getDateTimeString(date: Date) : String {
  const locales: Intl.LocalesArgument = 'ja-JP';
  var dateTimeString = date.toLocaleDateString(locales, {
    year: 'numeric', month: '2-digit', day: '2-digit'
  }).replace(/\//g, '');

  dateTimeString += '_' + date.toLocaleTimeString(locales, {
    hour: '2-digit', minute: '2-digit', second: '2-digit'
  }).replace(/:/g, '');

  return dateTimeString;
}

実行時にキャプチャーが保存される

その他実行コマンド

# UIモードでテスト
% npx playwright test --ui

# テストフォルダの特定のファイルをバックグラウンドでテストする。
% npx playwright test playwright.spec.ts --project=chromium

# バッググラウンドで、並行実行の数を5でtestフォルダ全てのテストを実行する。
% npx playwright test --workers=5 --project=chromium

PlaywrightのLibrary版(おまけ)

ライブラリ版はUIモードやバックグラウンドの実行には対応しません。
一方、ブラウザのタブ操作など細かい制御ができます。

環境構築とProject作成(1分程度)

% cd project
% mkdir node_playwright
% cd node_playwright
# playwrightをインストールする。
% npm install playwright@1.45.3
# 型情報をインストールする。
% npm install @types/node@22.1.0
# playwrightの拡張機能をインストールする。
% npx playwright install

PlaywrightのLibrary版の実行方法

Step1 ソースを自動生成(ブラウザ操作するだけ)

# コード生成のブラウザとツールを起動する。
% npx playwright codegen

起動後の状態

Step2 プロジェクトの所定の場所に編集したソースを保存する。

% cd node_playwright
# mjsのファイルで保存する必要あり。
% vi playwright_next_step.mjs 

playwright_next_step.mjs

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://playwright.dev/');
  // await page.waitForTimeout(1000); // 1秒待つ
  // URLを待つ(リダイレクトなど)
  // await page.waitForURL('https://playwright.dev/');

  await page.getByLabel('Search').click();
  await page.getByPlaceholder('Search docs').fill('waitFor');
  await page.getByRole('link', { name: 'waitFor​ Locator' }).click();

  // スクリーンショット(追加)
  await page.screenshot({
    path: './screenshot/' + getDateTimeString(new Date()) + '_waitFor.png',
    fullPage: true,
  });

  await page.pause();

  // ---------------------
  await context.close();
  await browser.close();
})();

// タイムスタンプ
function getDateTimeString(date) {
  const locales = 'ja-JP';
  var dateTimeString = date.toLocaleDateString(locales, {
    year: 'numeric', month: '2-digit', day: '2-digit'
  }).replace(/\//g, '');

  dateTimeString += '_' + date.toLocaleTimeString(locales, {
    hour: '2-digit', minute: '2-digit', second: '2-digit'
  }).replace(/:/g, '');

  return dateTimeString;
}

Step3 コンソールからデバックモードで実行する。

% cd playwright
# mjsファイルをnodeで実行する。
% node playwright_next_step.mjs

起動したツールの実行ボタンを押すとテストを実行する。

実行時にキャプチャーが保存される