Playwright を使用した E2E テスト (feat. Cypress)

$ # npm を使う場合
$ npm init playwright@latest
$ # yarn を使う場合
$ yarn create playwright
$ # pnpm を使う場合
$ pnpm create playwright

playwright.config.ts
tests/
 example.spec.ts

$ # ディレクトリ配下の全てにテストを実行するコマンド
$ npx playwright test
$ # UI modeでテストを実行するコマンド
$ npx playwright test --ui
 Playwright のテストコードの書き方 (基本)
このセクションでは、よく使われている基本的なメソッドについてご紹介します。

詳細なテストコードの書き方については、以下の公式ドキュメントをご参考にしてください。

ご参考: Locators | Playwright
ほとんどのテストは、ページへの URL 移動から始まります。

その後、以下のようなメソッドを使用してページやフレームでアクションを実行する要素ロケータが返されます。
 1. page.locator
// css= or xpath= prefix のように prefix で要素指定
await page.locator("css=button").click(); // css の場合
await page.locator("xpath=//button"); // xpath の場合
await page.locator(".className").click(); // class の場合
await page.locator("#id").click(); // id の場合
以下のように書かないよう注意
await page
  .locator(
    "#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input"
  .click();
await page
  .locator('//*[@id="tsf"]/div[2]/div[1]/div[1]/div/div[2]/input')
  .click();
 2. page.getByTestId
// dataset で要素を選択
<button data-testid="login-button">login</button>;
await page.getByTestId("login-button").click();
 3. page.getByRole
<h3>Sign up</h3>
<label>
  <input type="checkbox" /> Subscribe
</label>
<button>Submit</button>
// 以下のようにimplicit roleを指定して使用
await expect(page.getByRole('heading', { name: 'Sign up' })).toBeVisible();
await page.getByRole('checkbox', { name: 'Subscribe' }).check();
await page.getByRole('button', { name: /submit/i }).click();
 4. page.getByText
// 色んな要素がテキストを持ってる場合　locator.filter で必要な要素のみフィルタリング可能
<div>Hello<span>world</span></div>
<div>Hello</div>
// Matches <span>
page.getByText('world')
// Matches first <div>
page.getByText('Hello world')
// Matches second <div>
page.getByText('Hello', { exact: true })
// Matches both <div>s
page.getByText(/Hello/)
// Matches second <div>
page.getByText(/^hello$/i)
 5. locator.filter
// 以下のように row の中で必要な要素だけフィルタリングも可能
const rowLocator = page.locator("tr");
// ...
await rowLocator
  .filter(




    
{ hasText: "text in column 1" })
  .filter({ has: page.getByRole("button", { name: "column 2 button" }) })
  .screenshot();
上記以外にも沢山あるので必要に応じてどドキュメントをご参考
 Playwright でテストコードを作成 (実践)
React で簡易的なブログアプリを用意し、以下のようなシナリオで実際のテストコードを作成します。
シナリオ：
ブログアプリの Home ページでは投稿されてる記事や作成者を確認できる
記事をクリックすると詳細画面に遷移できる
ブラウザの戻るボタンをクリックすると Home ページに戻ることができる
画面右上部のリンクをクリックすると該当のページに遷移できる

import { test, expect } from "@playwright/test";
test("Home ページレンダリンテスト", async ({ page }) => {
  // Home ページにアクセス
  await page.goto("http://localhost:3000");
  // 'All'タブがアクティブになっていることを確認
  await expect(page.locator(".post__navigation--active")).toHaveText("All");
  // 'All'タブをクリック該当ページに遷移
  await page.locator(".post__navigation--active").click();
  // 各ページに遷移したことを確認
  const postLinks = await page.locator(".post__box a").all();
  // 各 post のリンクをクリックして、post ページに遷移
  for (const link of postLinks) {
    await link.click();
    // post ページに遷移したことを確認
    await expect(page.locator(".post__title")).toHaveText(
      "Lorem ipsum dolor sit amet"
    // ブラウザの戻るボタンをクリックして、Home ページに戻る
    await page.goBack();
  // Footer のリンクをクリックして、該当ページに遷移
  await page.locator('footer a:has-text ("write")').click();
  await expect(page).toHaveURL("http://localhost:3000/posts/new");
  await page.goBack();
  await page.locator('footer a:has-text("posts")').click();
  await expect(page).toHaveURL("http://localhost:3000/posts");
  await page.goBack();
  await page.locator('footer a:has-text("profile")').click();
  await expect(page).toHaveURL("http://localhost:3000/profile");
});
test("PostDetail ページレンダリン", async ({ page }) => {
  // PostDetail ページにアクセス
  await page.goto("http://localhost:3000/posts/0");
  // Expect post__detail クラス名を持つ要素が存在することを確認
  const postDetailElement = await page.locator(".post__detail").first();
  expect(await postDetailElement.isVisible()).toBe(true);
  // post__title クラス名を持つ要素を取得
  const postTitleElement = await page.locator(".post__title").first();
  // post__author-name クラス名を持つ要素が存在することを確認
  expect(await postTitleElement.isVisible()).toBe(true);
  // post__author-name クラス名を持つ要素を取得
  const authorNameElement = await page.locator(".post__author-name").first();
  // post__author-name クラス名を持つ要素が存在することを確認
  expect(await authorNameElement.isVisible()).toBe(true);
});
test("Post タイトルと作成者確認", async ({ page }) => {
  // PostDetail ページにアクセス add
  await page.goto("http://localhost:3000/posts/0");
  // posto__title クラス名を持つ要素のテキストを取得
  const postTitle = await page.textContent(".post__title");
  // post__author-name クラス名を持つ要素のテキストを取得
  const authorName = await page.textContent(".post__author-name");
  // post__title クラス名を持つ要素のテキストが正しいことを確認
  expect(postTitle).toContain("Lorem ipsum dolor sit amet");
  expect(authorName).toContain("kim");
});
 Playwright と GitHub Actions でテストを自動化
公式ドキュメントに CI テスト自動化について詳しく記載してあるので以下をご参考ください。

ご参考: CI GitHub Actions | Playwright
設定ファイルは、以下のように YAML 形式で記述します。
name: Playwright Tests  #タイトル名を作成
　　# 指定したブランチで PR & PUSH イベントが発生したら　自動で実行
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    # 実行環境設定
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 18
    # npm package インストール
    - name: Install dependencies
      run: npm ci
      # 以下のように env ファイルを指定できる(下の process.env.CI の例を参考)
      env:
        CI: true
    # Playwright E2E test で使う Browser を設定
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    # Playwright E2E test 実行
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v3
      if: always()
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30
playwright.config.ts ファイルに以下のように設定することでテスト実行の分岐処理も可能です。

process.env.CI の例
 /* Run your local dev server before starting the tests */
  webServer: process.env.CI
        { // web server
          command: 'npm run dev',
          port: 3000,
        { // proxy server
          command: 'cd proxy-server && npm run dev',
          port: 8080,
    : undefined,
 Playwright 用の VS Code 拡張機能
Microsoft が提供している VS Code 用の拡張機能を追加すると、VS Code 上から直接 Playwright のテストを実行できるようになります。
以下のように Record at cursor をクリックすると、実際のブラウザでの操作がリアルタイムでテストコードに反映されます。
 Playwright と Cypress の比較
最後に、Playwright と Cypress と比較してみました。
基準 (Criteria)
Platwright
Cypress
Architecture
Headless Browser with event-driven architecture
Executes test cases directly inside the browser
対応 Browsers
Chromium, Firefox, and WebKit
Chrome, Firefox, and Edge
iFrame 対応
制限 (chromeWebSecurity =false を指定)、出来ない case もあり
並列処理 (Parallel run)
課金 (Paid dashboard)か free plugin を使用
Mobile testing 対応
Only view for Android
Only view for website
CI/CD
Automatic waiting
Screenshots / Video 対応
Screenshots / Video あり
Screenshots のみ
本記事では、E2E テストツールの一つである Playwright の使い方や Cypress との違いについて簡単にご紹介しました。Playwright か Cypress の導入をご検討中の方はの導入をご検討中の方は、以下のまとめをご参考にしていただければと思います。
Playwright:
DevTools Protocols を使用して WebKit と Chromium をテストする必要がある場合は、Playwright が最適。
スクリーンレコーディング、ビデオキャプチャ、tracer viewer などの機能が必要な場合にも Playwright が最適。(Cypress は提供していない)
テストスピードに関しては Playwright の方が速い。
Cypress:
インストールや使いやすさを求める初心者には最適。
ネットワークキャプチャやビデオ録画などの完全なテスト証拠は提供されていないが、スクリーンショットだけが必要であれば良いツール。