Cypress から Playwright への変更

環境

Next React

Playwright 導入の経緯

E2Eテストで品質を担保すべく Cypress を導入したが、テストが長くなるにつれて動作が遅くなった。
また、ブラウザが落ちることも多々あったので、違うE2Eテストの方法を考える必要があった。

Cypress の改善しましたが、期待するほどのパフォーマンス改善が見られなかったです。

公式ドキュメント

Install

npm init playwright@latest

github Actions を使うのか？などを聞かれますので状況に応じて選択してください。

書き方

ページ遷移

await page.goto('https://playwright.dev/');

クリック

// Role の場合
const getStarted = page.getByRole('link', { name: 'Get started' });
await getStarted.click();

await page.getByTestId("login-button").click(); // data 属性
await page.locator("css=button").click(); // css の場合
await page.locator(".className").click(); // class の場合
await page.locator("#id").click(); // id の場合

テキストの取得

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

実際のテスト

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

テストの実行

npx playwright test

npx playwright test --ui

特定のテストを実行

npx playwright test -g "add a todo item"