🕌

Next.jsでPlaywrightを使ってみる

に公開
Next.js
Playwright
tech

Next.jsでPlaywrightを使ってみる

Playwrightでどんなテストができるか実験

https://nextjs.org/docs
https://nextjs.org/docs/app/guides/testing/playwright
https://playwright.dev/docs/intro

環境構築

0. 前提

Node.js 18 以上推奨（20 ならなお良し）

パッケージマネージャはお好みで（npm / pnpm / yarn）。以下は npm 例で書きます。

1. Next.js プロジェクト作成（未作成なら）

# 新規プロジェクト作成
npx create-next-app@latest nextjs-playwright-01 --ts --eslint
cd nextjs-playwright-01

既存プロジェクトなら、リポジトリのルートへ移動するだけでOK。

2. Playwright の導入（E2E テスト）

# プロジェクト直下で
npm create playwright@latest
# ? Where to put your end-to-end tests? · tests
# ? Add a GitHub Actions workflow? (Y/n) · true
# ? Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo npx playwright install-deps')? (y/N) · false

これで以下が自動生成されます：

  • playwright.config.ts
  • tests/（サンプルテスト）
  • .github/workflows/playwright.yml（選んだ場合）

すでに playwright が入っている場合でも、設定だけ取り込めます。

3. 最初の E2E テスト（App Router 前提）

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

test('トップページが表示される', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  //await expect(page.getByRole('heading', { level: 1 })).toBeVisible();   // <h1>が見える
  await expect(page).toHaveTitle(/Create Next App/);                     // タイトル
});

test('Learnリンクが存在し、クリックできる', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  const learnLink = page.getByRole('link', { name: 'Learn' });
  await expect(learnLink).toBeVisible();  // 表示されているか
  await expect(learnLink).toHaveAttribute('href', /^https:\/\/nextjs\.org\/learn(?:\?.*)?$/); // href確認
});

test('Learnリンクをクリックすると外部ページが開く', async ({ page }) => {
  await page.goto('http://localhost:3000/');

  const [newPage] = await Promise.all([
    page.waitForEvent('popup'), // 新しいタブ（ウィンドウ）を待つ
    page.getByRole('link', { name: 'Learn' }).click(),
  ]);

  await newPage.waitForLoadState(); // ロード完了を待つ
  await expect(newPage).toHaveURL(/https:\/\/nextjs\.org\/learn(?:\?.*)?$/); // 新しいタブのURLを確認
});

セレクタは Roleベース（getByRole）か テストID（data-testid）推奨。UI変更に強いです。

Discussion