Ceeds Academy教材アプリ教材・症状語・タグで検索
索引グラフ試す
テストFW/ライブラリ▸Playwright

Playwright: ブラウザ E2E テスト(page / locator / expect)

hands-on所要 30分最新草稿
前提: テスト: なぜ書く・何を書く(単体 / 結合 / E2E とピラミッド)前提: Vitest: TS/React のユニットテスト(describe / it / expect)
意味グラフ(この教材と内容的に近い教材・1ネスト)
例え(Analogies)
Playwright=完成品の通し試験

出荷前に実機を人と同じ手順で操作し、最初から最後まで通して動くか試す試験。Playwrightはその操作をロボットが自動で行い、ボタンが現れるまで自動で待つ。

概要

📍 テストFW ▸ Playwright ▸ E2E | 種別: hands-on | facts_as_of 2026-06(Playwright 1.60)

公式ドキュメント — hands-on

🎞 スライド

Playwright=ブラウザ自動操作で E2E

ユーザー操作を通しで確かめる

流れ

[page.goto で開く] ─▶ [locator で要素指定] ─▶ [expect で確認]
getByRole 等で意図を明確に/自動待機で sleep 不要

強み

複数ブラウザ / 自動待機 / トレース

—
出典(sources)

playwright.dev ; 2026-06確認

確認問題(Review-Questions)
Playwrightで要素を指定する推奨手段は?択一
基礎公式
解答・解説▾ 開く

ロール/テキスト等のlocator(getByRole / getByText)。

Playwrightの「自動待機」とは?記述
基礎公式
解答・解説▾ 開く

要素が操作可能になるまで自動で待つ仕組み。明示的なsleepが基本不要になる。

目次
例え概要公式ドキュメント出典確認問題
鮮度
最新
更新: 2026-06-15
次回棚卸し: 2027-06-15
周期: 12か月
版: Playwright 1.60

概要

Playwright はブラウザを自動操作してE2E テスト(ユーザー操作を通しで)を行う。複数ブラウザ・自動待機・トレースが強み。

公式ドキュメント準拠(Playwright 1.60)

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

test("ホームに見出しが出る", async ({ page }) => {
  await page.goto("http://localhost:3000");
  await expect(
    page.getByRole("heading", { name: "Ceeds" })
  ).toBeVisible();
});
npx playwright test       # 実行(--ui でGUI)
  • page で操作、getByRole 等の locator で要素を指定。expect().toBeVisible()。自動待機で sleep 不要。

出典: Playwright

🧭 誤解訂正集

よくある誤解 正しい理解
sleep で待たないと不安定 自動待機があるので sleep 不要
CSS セレクタで指定すべき getByRole/getByText で意図を明確に
ローカルサーバは勝手に立つ webServer 設定 or 先に起動が要る

📖 用語

  • Playwright … ブラウザを自動操作して E2E テストを行うツール。
  • page … 1つのブラウザページ(操作の起点)。
  • locator … 要素を指す指定子(getByRole 等)。
  • getByRole … 役割(見出し/ボタン等)で要素を指す方法。
  • 自動待機 … 要素が現れるまで待つ仕組み(sleep 不要)。
  • webServer … テスト前にアプリを起動する Playwright 設定。

✅ 確認の目安(can-do)

page/locator/expect の役割と自動待機を理解し、**「要素が見つからない/ローカル未起動のとき何を直すか」**を判断できる。

⚠️ エラー復旧集

症状 原因 復旧
要素が見つからない locator/タイミング getByRole/getByText で意図を明確に(自動待機を信じる)
ローカル未起動 サーバー未起動 webServer 設定 or 先に npm run dev