Playwright

>npm init playwright@latest
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
? Do you want to use TypeScript or JavaScript? ...
> TypeScript
√ 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
Initializing NPM project (npm init -y)…
Wrote to (作業ディレクトリ)\package.json:       

{
  "name": "playwright",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


Installing Playwright Test (npm install --save-dev @playwright/test)…

added 3 packages, and audited 4 packages in 3s

found 0 vulnerabilities
Installing Types (npm install --save-dev @types/node)…

added 2 packages, and audited 6 packages in 1s

found 0 vulnerabilities
Writing playwright.config.ts.
Writing tests\example.spec.ts.
Writing tests-examples\demo-todo-app.spec.ts.
Writing package.json.
Downloading browsers (npx playwright install)…
✔ Success! Created a Playwright Test project at (作業ディレクトリ)

Inside that directory, you can run several commands:

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --ui
    Starts the interactive UI mode.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example
    Runs the tests in a specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

  npx playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    npx playwright test

And check out the following files:
  - .\tests\example.spec.ts - Example end-to-end test
  - .\tests-examples\demo-todo-app.spec.ts - Demo Todo App end-to-end tests
  - .\playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭

/**
 * All系がworkerごとに動いていることの確認
 */
import { test } from '@playwright/test';

test.describe('group', () => {
  test.beforeAll(async () => {
    console.log("group-beforeAll");
  });

  test.beforeEach(async ({ }) => {
    console.log("group-beforeEach");
  });

  test('main1', async ({ }) => {
    console.log("group-main1");
  });
  test('main2', async ({ }) => {
    console.log("group-main2");
  });
});

# 実行結果
# worker:1の場合
>npx playwright test --workers=1 sample.spec.ts

Running 3 tests using 1 worker
[setup] › setup.ts:3:6 › setup
@setup
[Google Chrome] › sample.spec.ts:15:7 › group › main1
group-beforeAll # 1回だけ
group-beforeEach
group-main1
[Google Chrome] › sample.spec.ts:18:7 › group › main2
group-beforeEach
group-main2

# worker:2の場合
>npx playwright test --workers=2 sample.spec.ts

Running 3 tests using 2 workers
[setup] › setup.ts:3:6 › setup
@setup
[Google Chrome] › sample.spec.ts:15:7 › group › main1
group-beforeAll # ここ
[Google Chrome] › sample.spec.ts:18:7 › group › main2
group-beforeAll # ここ
[Google Chrome] › sample.spec.ts:15:7 › group › main1
group-beforeEach
group-main1
[Google Chrome] › sample.spec.ts:18:7 › group › main2
group-beforeEach
group-main2

// sample.spec.ts
/**
 * 実行順序の検証
 */
import { test } from '@playwright/test';

test.beforeAll(async ({ }) => {
  console.log("@Before All");
});

test.beforeEach(async ({ }) => {
  console.log("@Before Each");
});

test.afterEach(async () => {
  console.log('@After Each');
});

test.afterAll(async () => {
  console.log('@After All');
});

test.describe('group', () => {
  test.beforeAll(async ({ }) => {
    console.log("@Group Before All");
  });

  test.beforeEach(async ({ }) => {
    console.log("@Group Before Each");
  });

  test.afterEach(async () => {
    console.log('@Group After Each');
  });

  test.afterAll(async () => {
    console.log('@Group After All');
  });

  test('main', async ({ }) => {
    console.log("@Group Main");
  });
});

# 実行結果
# worker:1の場合
>npx playwright test --workers=1 sample.spec.ts

Running 2 tests using 1 worker
[setup] › setup.ts:3:6 › setup
@setup
[Google Chrome] › sample.spec.ts:39:7 › group › main
@Before All
@Group Before All
@Before Each
@Group Before Each
@Group Main
@Group After Each
@After Each
@Group After All
@After All

POM定義。

// SamplePage.ts
import type { Page, Locator, TestInfo } from '@playwright/test';

export default class SamplePage {

  readonly page: Page;
  readonly testInfo: TestInfo;
  readonly button: Locator;
  readonly textBox: Locator;

  constructor(page: Page, testInfo: TestInfo) {
    this.page = page;
    this.testInfo = testInfo;
    this.textBox = page.getByRole('textbox');
    this.button = page.getByRole('button', { name: 'クリック' });
  }

  /**
   * 試験対象のページに移動
   */
  async goto() {
    await this.page.goto('https://suikentsukai.com/sample.html');
  }

  /**
   * ボタンをクリック
   */
  async clickButton() {
    await this.button.click();
  }

  /**
   * テキストボックスに値を設定
   */
  async setText(text: string) {
    await this.textBox.fill(text);
  }

  /**
   * 現在実行しているテストのタイトルを取得
   * @returns 
   */
  getTestTitle() {
    return this.testInfo.title;
  }

  /**
   * スクリーンショットを取得
   * @param suffix接尾辞
   */
  async screenshot(suffix: string) {
    const path = "./img/" + this.testInfo.title + suffix + ".png";
    await this.page.screenshot({ path });
  }
}

Fixtures定義。

// fixtures.ts
import { test as base } from '@playwright/test';
import SamplePage from '@/pages/SamplePage';

export const test = base.extend({
  // テストケースごとに実行される
  samplePage: async ({ page }, use, testInfo) => {

    // 事前処理
    // POMの生成やログイン処理、テストデータ登録など
    const samplePage = new SamplePage(page, testInfo);
    console.log("@fixture:setup samplePage");

    // テストケースにPOMを渡す
    await use(samplePage);

    // 事後処理
    // データの削除やブラウザの状態のリセットなど
    console.log("@fixture:teardown samplePage");

  }
});
export { expect } from '@playwright/test';

テストケースで使用する。

// sample.spec.ts
// import { test, expect } from '@playwright/test';
// fromを変えないと、当然samplePageの未定義エラーが出る。
import { test } from '@/fixtures';

test.describe('test group', () => {
  test('test', async ({ samplePage }) => {
    await samplePage.goto();
    await samplePage.screenshot("1_初期表示");
    await samplePage.setText(samplePage.getTestTitle());
    await samplePage.screenshot("2_テストタイトルをテキストボックスに入力後");
    await samplePage.clickButton();
    await samplePage.screenshot("3_ボタン押下後");
  });
});

JSONを読み込めるように設定。

tsconfig.json
"resolveJsonModule": true

デフォルトの文言ファイルを作成。

default.json
{
  "label": {
    "sample1": "label_1",
    "sample2": "label_2"
  }
}

環境ごと(ここではcustomのみ)の文言ファイルを作成。

custom.json
{
  "label": {
    "sample1": "custom_label_1"
  }
}

JSONを読み込むクラスを作成。

export default class I18n {

  /** デフォルト */
  private defaultDefinition;
  /** カスタム */
  private customDefinition;

  constructor() {
    this.defaultDefinition = require("./default.json");
    try {
      // 環境変数から対象となるcustomIdを取得
      const customId = process.env.CUSTOM_ID;
      // 対象のJSONを読み込む
      this.customDefinition = require(`./${customId}.json`);
    } catch (e) {
      // 対象のJSONが無かったらデフォルトを設定
      this.customDefinition = this.defaultDefinition;
    }
  }

  /**
   * 文言を取得する。
   * @param key文言に対応するキー
   * 例)label.sample
   * @returns keyに対応する文言
   */
  get(key: string): string {
    // customに無ければdefaultにフォールバック
    return this.search(this.customDefinition, key)
      || this.search(this.defaultDefinition, key);
  }

  search(target, key: string) {
    try {
      const keys: string[] = key.split(".");
      let obj = target[keys[0]];
      for (let i = 1; i < keys.length; i++) {
        obj = obj[keys[i]];
      }
      return obj;
    } catch (e) {
      return null;
    }
  }
}

テストファイルでの使用方法。

// xxx.spec.ts
import I18n from "./I18n"
const i18n = new I18n();

// process.env.CUSTOM_IDがcustomならば、「custom_label_1」で検索される。
// process.env.CUSTOM_IDがcustomではないならば、「label_1」で検索される。
await page.getByRole("button", name: i18n.get("label.sample1"));

// 「label_2」で検索される。
// customのjsonには定義がないため、defaultにフォールバックされる。
await page.getByRole("button", name: i18n.get("label.sample2"));