概要

■TypeScript 公式がトップにもってきてる。Laravel（Node.js）と相性が良い。

導入

■Node.js インストール（2025/05時点: ver.22）

■Playwright インストール用フォルダを作成。 インストール用フォルダへ移動。 インストール npm init playwright@latest

全てEnterで良い

コマンド

# ★【基本】カレントをPlaywrightインストールフォルダにすること ※でないとインストールが始まる
cd C:\Playwright

# テスト実行（headed ブラウザ起動）
npx playwright test --headed

構文

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

test('has title', async ({ page }) => {

    // スクリーンショット
    await page.screenshot({ path: 'sample.png' });
    await page.screenshot({ path: 'sample.png', fullPage: true }); // フルサイズ

    // ページ遷移
    await page.goto('https://sample.com');

    // クリック ※ベストプラクティスより、「getByRole」で人間が認識するボタンの文字をベースにする（セレクタNG）
    await page.getByRole('button', { name: '検索' }).click();

    // 入力（テキストボックス）
    await page.locator('#login-code').fill('Hello');

    //【アサーション】URL確認（ページが指定された URL に移動されていることを確認）
    await expect(page).toHaveURL('https://google.com');

    //【アサーション】要素が表示されていることを確認
    await expect(page.locator('#btn-sample')).toBeVisible();
});

■ 並行実行

test.describe('group1', () => {
});

test.describe('group2', () => {
});

設定ファイル

playwright.config.ts

// 対象ブラウザを設定（不要なブラウザ設定はコメントアウトすること）
projects: [
    // 割愛
],

E2Eテスト

ユーザーの使用シナリオに基づいて、アプリケーションの開始から終了までの全プロセスをテストする手法です。