Angular Academy · レッスン

Playwrightテストの作成

Q: 「Playwrightテストの作成」で何を学びますか？

Playwrightでブラウザー操作を自動化します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Playwrightでブラウザー操作を自動化します

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

最初のPlaywrightテスト

Playwrightのテストは、pageなどのフィクスチャを受け取る非同期関数です。@playwright/testからtestとexpectをインポートし、ユーザーのシナリオを記述します。

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

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

pageフィクスチャ

pageオブジェクトは、1つのブラウザータブを表します。各テストには、クリーンなコンテキスト内の新しい、分離されたpageが渡されるため、意図せずCookieやストレージを共有することはありません。

gotoでページを移動する

page.goto(url)はURLを読み込み、ページの準備が整うまで待機します。設定のbaseURLと組み合わせると、相対パスを使用できます。

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

ロケーターで要素を検索する

locatorは、要素を遅延取得し、自動的に待機するためのハンドルです。壊れやすいCSSセレクターよりも、getByRole、getByLabel、getByTextのようなセマンティックロケーターを優先してください。

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

入力とクリック

fillで入力値を設定し、clickでボタンを押します。Playwrightは操作の前に、要素が表示され、操作可能になるまで自動的に待機します。

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

自動待機で不安定なsleepをなくす

古いツールとは異なり、Playwrightは要素やアサーションが真になるまで自動的に待機します。手動のタイムアウトはほとんど必要ありません。これによりテストが安定します。

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

describeでテストをグループ化する

test.describeで関連するシナリオをグループ化し、beforeEachでセットアップを共有します。

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

完全なユーザージャーニーをテストする

操作を連続させて、完全なフローをモデル化します。各ステップがユーザーの行動を表すスクリプトのように読めます。

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

テストを実行する

CLIからすべてのspecを実行します。--headedを追加するとブラウザーを確認でき、--uiを追加するとPlaywrightの対話型テストランナーが開きます。

npx playwright test
npx playwright test --headed
npx playwright test --ui

失敗をデバッグする

失敗時、Playwrightはスクリーンショット、動画、手順を1つずつ再生できるトレースを取得できます。トレースビューアーには各操作時点のDOMが表示されるため、不安定な失敗も簡単に診断できます。

npx playwright test --trace on
npx playwright show-trace trace.zip

テストの分離が重要

各テストには独自のブラウザーコンテキストが与えられるため、テストの順序や共有状態に依存しないでください。各テストに必要なデータは、それぞれのbeforeEachまたはテスト本体で準備します。

クイックチェック

waitForTimeoutを避けるのはなぜでしょうか？

まとめ

Playwrightのテストではpageフィクスチャを使います。移動にはgoto、要素の検索にはセマンティックロケーター（getByRole、getByLabel）、操作にはfill/clickを使用します。自動待機により不安定なsleepが不要になります。describeでグループ化し、npx playwright testで実行し、トレースでデバッグします。

よくある質問

「Playwrightテストの作成」レッスンは無料ですか？

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

「Playwrightテストの作成」で何を学びますか？

Playwrightでブラウザー操作を自動化しますブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Playwrightテストの作成」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Angular Academyに戻る