自動テスト

◆前提インストール

必要なもの：

Node.js
VS Code
Playwright Test for VS Code 拡張機能

Playwright公式では、npm init playwright@latest で初期構成・ブラウザ導入までできる。
.

◆プロジェクト作成

mkdir playwright-test
cd playwright-test
npm init playwright@latest
.

◆動作コード化（録画）：codegenコマンド

npx playwright codegen --channel=msedge --output tests/sample.spec.ts https://対象のURL

★認証付き
npx playwright codegen --channel=msedge --user-data-dir="C:\work\playwright-edge-profile" --output tests/sample.spec.ts https://対象のURL

--channel=ブラウザ指定
--output=保存先

録画の終了方法：ターミナルにて、Ctrl + C
.

◆動作実行準備（テスト対象ブラウザ群の設定）

projects: [
 {
   name: 'chromium',
   use: {
     browserName: 'chromium',
   },
 },
 {
   name: 'Microsoft Edge',
   use: {
     channel: 'msedge',
   },
 },
]

.
◆動作実行：testコマンド

基本コマンド

npx playwright test

①目視確認（headedオプションを付与）

②ブラウザ指定（channelオプション、またはprojectオプションを付与）

npx playwright test tests/sample.spec.ts --channel=msedge --headed

npx playwright test tests/sample.spec.ts --project=Microsoft Edge --headed

projectオプションは、「Playwright設定一式」として指定できる機能。

.

◆テストファイル例

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

test('登録画面に入力する', async ({ page }) => {
 await page.goto('https://対象のURL');

 await page.getByLabel('項目a').fill('xxx');
 await page.getByLabel('項目b').fill('yyy');

 await page.getByRole('button', { name: '登録' }).click();

 await expect(page.getByText('登録しました')).toBeVisible();
});

◆認証方式１（ログイン後の状態を storageState として保存して再利用する方法）

import { test as setup, expect } from '@playwright/test';

setup('login', async ({ page }) => {
  await page.goto('https://ログインページURL');

  await page.getByLabel('ユーザーID').fill('user01');
  await page.getByLabel('パスワード').fill('password');
  await page.getByRole('button', { name: 'ログイン' }).click();

  await expect(page).toHaveURL(/.*ログイン後URL.*/);

  await page.context().storageState({
    path: 'playwright/.auth/user01.json',
  });
});

.
◆認証方式１：利用設定側

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'Microsoft Edge',
      use: {
        channel: 'msedge',
        storageState: 'playwright/.auth/user01.json',
      },
      dependencies: ['setup'],
    },
  ],
});

.
◆認証方式２：プロファイル読込（launchPersistentContext）

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

test('登録', async () => {

  const context =
    await chromium.launchPersistentContext(
      'C:\\Users\\xxx\\AppData\\Local\\Microsoft\\Edge\\User Data',
      {
        channel: 'msedge',
        headless: false,
        args: [
          '--profile-directory=Profile 1'
        ]
      }
    );

  // ◆ブラウザに複数タブ存在している場合の、タブ番号指定
  // const page = context.pages()[0];

  const page =
    context.pages().length > 0
      ? context.pages()[0]
      : await context.newPage();

  await page.bringToFront();

  await page.goto('https://対象URL');

  // ◆画面遷移後の操作を定義
  // await page.locator('#itemA').fill('xxx');

  // ◆テストコード作成後は、テスト終了後にブラウザを閉じる処理を入れる
  // await context.close();
});