Angular E2Eテストの自動化

前提 適当なAngularプロジェクトを用意する。
ここでは、プロジェクトの作成ボタンをクリックすると表示内容が変わる例にしてます。

<main data-testid="home-root" style="padding: 16px;">
  <h1 data-testid="home-title">My App</h1>

  <!-- ボタン-->
  <section data-testid="project-section" style="display:flex; gap: 8px; margin-top: 12px;">
    <button type="button" data-testid="create-project" (click)="openDialog()">
      Create project
    </button>

    <button type="button" data-testid="open-project">Open project</button>
  </section>
  <!-- ダイアログ-->
  <div *ngIf="isDialogOpen" data-testid="create-project-dialog">
    <h2 data-testid="dialog-title">Create Project</h2>
    <button type="button" data-testid="dialog-close" (click)="closeDialog()">Close</button>
  </div>
  <p data-testid="home-version" style="margin-top: 12px;">v0.1</p>
</main>

1) Playwrightの導入（Angularプロジェクトに追加）

Angularのリポジトリ直下で実行。

npm init playwright@latest

オプションでChromiumをインストールしても良いですし、既にChromeなどのブラウザがインストールされていればそれを使うのも良いです。 *Playwright はテスト用に Chromium を自動でダウンロードして、それを使って動かすのが基本です（環境に入ってる Chrome を使わないこともある）。

2) playwright.config.tsの設定

import { defineConfig, devices } from '@playwright/test';
/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './tests',
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('')`. */
    // baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    // {
    //   name: 'chromium',
    //   use: { ...devices['Desktop Chrome'] },
    // },
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },
  ],

  /* Run your local dev server before starting the tests */
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
});

3) example.spec.tsの設定

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

test('app loads', async ({ page }) => {
  // http://localhost:4200/にアクセス
  await page.goto('http://localhost:4200/');
  
  // ホームのルート要素が表示されていること
  await expect(page.getByTestId('home-root')).toBeVisible();

  // タイトルが想定通りであること
  await expect(page.getByTestId('home-title')).toHaveText('My App');

  // ボタンが表示されていること
  await expect(page.getByTestId('create-project')).toBeVisible();
  await expect(page.getByTestId('open-project')).toBeVisible();

  // バージョン表示（任意）
  await expect(page.getByTestId('home-version')).toHaveText('v0.1');

  // Create project をクリック → ダイアログが出る
  await page.getByTestId('create-project').click();
  await expect(page.getByTestId('create-project-dialog')).toBeVisible();
  await expect(page.getByTestId('dialog-title')).toHaveText('Create Project');

  // Close をクリック → ダイアログが消える
  await page.getByTestId('dialog-close').click();
  await expect(page.getByTestId('create-project-dialog')).toHaveCount(0);

});

４) 自動テスト実行

デバッグ： npx playwright test --debug