LoginSignup
0
0
@ryouta33(亮汰 脇坂)

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

Posted at

Playwrightとは

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

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

Playwrightのソース生成.png

前提条件

・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

起動後の状態
Test Runnerを選択する.png

URL変更からブラウザ操作でソースを記録する。
Playwrightのソース生成.png

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

起動したツールの実行ボタンを押す。
PlaywrightのTest Runnerのソースを実行する.png

ブラウザが自動で動きpauseの行で止まる。
pauseで止まる(Test Runner).png

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

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

プロジェクトを開く.png

prightwrightプロジェクトを開く.png

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

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

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

実行時の変数の値も確認できる。
変数にカーソルを合わせて値を確認できる.png

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

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

その他実行コマンド

# 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

起動後の状態
Libraryを選択する.png

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

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

実行時にキャプチャーが保存される
実行時にキャプチャが保存あれる(Library).png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0