React Academy · レッスン

React向けPlaywright入門

Q: 「React向けPlaywright入門」で何を学びますか？

ブラウザを開き、Reactアプリを操作して結果を検証するPlaywrightテストを記述します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

ブラウザを開き、Reactアプリを操作して結果を検証するPlaywrightテストを記述します。

「React向けPlaywright入門」はCoddyKit上の無料React Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

Playwrightとは

Playwrightは、実際のChromium、Firefox、WebKitブラウザを操作するNode.js向けのE2Eテストフレームワークです。ルーティング、認証、API連携を含むReactアプリ全体のフローをテストするのに適しています。

インストール

1つのコマンドでPlaywrightとブラウザバイナリをインストールします。

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

React向けPlaywright設定

テストの実行前に開発サーバーを起動するようPlaywrightを設定します。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

最初のテストを書く

テストではブラウザのページオブジェクトであるpageを使用します。URLに移動し、要素を操作して、結果をアサートします。

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

test('home page shows heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

ロケーター

PlaywrightのロケーターはRTLクエリに似ています。堅牢性を高めるため、ロールベースのロケーターを優先してください。

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

クリックと文字入力

click()、fill()、press()、selectOption()を使用して要素を操作します。

await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Log in' }).click();

ナビゲーションの待機

Playwrightは要素が操作可能になるまで自動的に待機しますが、ナビゲーションやネットワークリクエストの完了を明示的に待機することもできます。

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

アサーション

Playwright組み込みのマッチャーとexpect(locator)を使用します。条件が真になるまで自動的に待機します。

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

失敗時のスクリーンショット取得

設定すると、Playwrightはテスト失敗時にスクリーンショットとトレースを自動的に取得します。設定ファイルで有効にしてください。

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

テストの実行

すべてのテストをヘッドレスで実行するか、--uiを使用してテストを視覚的に確認しながら進められるインタラクティブなテストエクスプローラーを開きます。

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

Playwright Trace Viewer

テストが失敗したら、npx playwright show-traceでトレースファイルを開くと、スクリーンショット、ネットワークリクエスト、コンソールログを確認しながらテストを1ステップずつ再生できます。

CIへの統合

CIではPlaywrightがデフォルトでヘッドレス実行されます。npx playwright install --with-depsでブラウザをインストールし、通常のnpmスクリプトとしてテストを実行してください。

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

クイックチェック

テキスト入力フィールドに値を入力するには、どのPlaywrightメソッドを使用すべきでしょうか。

振り返り

Playwrightは実際のブラウザをテストし、要素が操作可能になるまで自動的に待機します。操作にはロールベースのロケーター、fill()、click()を使用し、アサーションにはexpect(locator)を使用します。開発中の視覚的なデバッグには--uiモードを利用してください。

よくある質問

「React向けPlaywright入門」レッスンは無料ですか？

はい。「React向けPlaywright入門」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「React向けPlaywright入門」で何を学びますか？

ブラウザを開き、Reactアプリを操作して結果を検証するPlaywrightテストを記述します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「React向けPlaywright入門」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

React Testing LibraryによるIntegration Testing
MSWによる非同期UIとAPI呼び出しのテスト
React向けPlaywright入門
フォームとユーザーフローのE2Eテスト

← React Academyに戻る