TypeScriptを使用したPlaywrightプロジェクトのセットアップと展開の完全ガイド A-Z

PlaywrightとTypeScriptの紹介

Playwrightは、Microsoftが開発した強力なエンドツーエンドテストフレームワークで、Chromium、Firefox、WebKitなどの異なるブラウザで統一されたAPIを使用した自動テストを可能にします。TypeScriptと組み合わせることで、Playwrightは型チェック機能を備えた堅牢なテストツールとなり、コードをより安全で保守しやすくします。

この記事では、TypeScriptを使用したPlaywrightプロジェクトのインストールと設定方法を最初から説明します。必要な依存関係のインストール、プロジェクト構造の作成、基本的なテストの作成、初期テストケースの実行など、詳細な手順を説明します。

なぜPlaywrightとTypeScriptを選ぶべきか？

クロスブラウザテスト: Playwrightは主要なブラウザ（Chromium、Firefox、WebKit）を統一されたAPIで完全にサポートします。
自動待機: 要素が操作可能になるまで自動的に待機します。
一般的なJavaScript: ほとんどの開発者にとって馴染みのある言語で、学習と実装の時間を短縮します。
型安全性: TypeScriptは開発中にエラーを検出するのに役立ちます。
ネットワークインターセプト: ネットワークリクエストをインターセプトして修正する機能。
モバイルエミュレーション: デバイスエミュレーションによるモバイルデバイスでのテストをサポート。
並列実行: テストを同時に実行して時間を最適化する機能。

システム要件

開始する前に、コンピュータが以下の要件を満たしていることを確認してください：

Node.js（バージョン18以上）
npm、pnpm、またはyarn（パッケージマネージャー）
Visual Studio Codeなどのコードエディタ（推奨）

インストールされているNode.jsのバージョンを確認するには：

node -v
# v24.1.0

インストールされているnpm/pnpmのバージョンを確認するには：

npm -v
# 11.4.1
pnpm -v

TypeScriptを使用したPlaywrightプロジェクトのインストール

ステップ1：新規プロジェクトの作成

まず、プロジェクト用の新しいディレクトリを作成し、Node.jsプロジェクトを初期化します：

mkdir playwright-automation-ts
cd playwright-automation-ts

ステップ2：PlaywrightとTypeScriptのインストール

Playwrightと必要なTypeScriptの依存関係をインストールします：

npm init playwright@latest

インストール中に、いくつかの設定に関する質問が表示されます。適切なオプションを選択してください：

Do you want to use TypeScript or JavaScript? » TypeScript
Where to put your end-to-end tests? » tests
Add a GitHub Actions workflow? » Yes/No（必要に応じて）
Install Playwright browsers (can be done manually via 'npx playwright install')? » Yes

インストールプロセスにより、必要な設定ファイルを含む初期プロジェクト構造が作成されます。

ステップ3：プロジェクト構造の確認

インストール完了後、プロジェクト構造は以下のようになります：

playwright-automation-ts/
├── node_modules/
├── package.json
├── package-lock.json
├── playwright.config.ts
├── tests/
│   └── example.spec.ts
├── tests-examples/
│   └── demo-todo-app.spec.ts
└── tsconfig.json

./tests/example.spec.ts: これはサンプルのエンドツーエンドテストファイルです。
./tests-examples/demo-todo-app.spec.ts - これはTodoアプリケーション用のサンプルエンドツーエンドテストファイルです。

ステップ4：設定ファイルの理解

`playwright.config.ts`ファイル

このファイルには、ブラウザ設定、タイムアウト、その他のオプションなど、Playwrightの主要な設定が含まれています：

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

playwright.config.ts設定ファイルは、プロジェクトのルートディレクトリに自動的に作成されます。以下のような設定をカスタマイズできます：

タイムアウト: アクションとアサーションのデフォルト待機時間
projects: テスト実行用のデフォルトブラウザの選択（Chromium、Firefox、WebKit）
testDir: テストケースを含むディレクトリ
reporter: レポート形式の選択（HTML、JSONなど）
use: ビューポート、ユーザーエージェントなど、すべてのテストに共通する設定
など

PlaywrightとTypeScriptで最初のテストを作成

それでは、Playwright TypeScriptを使用して最初のテストケースを作成しましょう。この例ではNjndex Dummy Demoを使用し、テストはローカルマシンで実行されます。

Playwrightの動作を理解するために、Njndex Dummy Demoのホームページをチェックする簡単なテストを作成します。

新しいテストファイルの作成

testsディレクトリにhomepage.spec.tsという名前の新しいファイルを作成します：

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

test('has title', async ({ page }) => {
  // 1. ページに移動
  await page.goto('https://dummy-demo-njndex.web.app');

  // 2. タイトルが特定の部分文字列を含むことを期待
  await expect(page).toHaveTitle(/Demo Dummy/);

  // 3. タイトルが特定の文字列であることを期待
  await expect(page).toHaveTitle("Home | IT Demo Dummy");
});


test('Can navigate to the Todo list page', async ({ page }) => {
  // 1. ページに移動
  await page.goto('https://dummy-demo-njndex.web.app/');

  // 2. "Todo List Demo"リンクをクリック
  await page.getByTestId('feature-link-todo_list').click();

  // 3. URLの変更を確認
  await expect(page).toHaveURL(/todo-list/);

  // 4. ページコンテンツを確認
  await expect(page).toHaveTitle(/Todo List | IT Demo Dummy/);
  await expect(page.getByRole('heading', { name: 'Todo List' })).toBeVisible();
});

テストの実行

テストを実行するには、以下のコマンドを使用します：

npx playwright test

UIモードでテストを実行するには：

npx playwright test --ui

テスト結果を表示するには：

npx playwright show-report

基本的なPlaywrightコマンド

以下は使用できる基本的なPlaywrightコマンドです：

特定のブラウザでテストを実行するには：

npx playwright test --project=chromium

特定のファイルでテストを実行するには：

npx playwright test example

Playwright Codegenでテストを自動生成するには：

npx playwright codegen https://dummy-demo-njndex.web.app

これはPlaywrightの優れた機能で、ブラウザでの操作を記録して自動的にテストコードを生成します。出力言語としてJavaScriptまたはTypeScriptを選択できます。

結論

この記事では、TypeScriptを使用したPlaywrightプロジェクトのインストールと設定について学びました。依存関係のインストール、プロジェクト構造の作成、最初のテストケースの作成など、基本的な手順を説明しました。

次の記事では、以下のような高度なトピックについて説明します：

ページオブジェクトモデル（POM）
フィクスチャとその使用方法
Playwrightの高度な設定
Playwrightを使用したAPIテスト
スクリーンショットとビデオ録画

TypeScriptを使用したPlaywrightプロジェクトのセットアップと展開の完全ガイド A-Z

PlaywrightとTypeScriptの紹介

なぜPlaywrightとTypeScriptを選ぶべきか？

システム要件

TypeScriptを使用したPlaywrightプロジェクトのインストール

ステップ1：新規プロジェクトの作成

ステップ2：PlaywrightとTypeScriptのインストール

ステップ3：プロジェクト構造の確認

ステップ4：設定ファイルの理解

`playwright.config.ts`ファイル

PlaywrightとTypeScriptで最初のテストを作成

新しいテストファイルの作成

テストの実行

基本的なPlaywrightコマンド

結論

役立つリソース

目次

Modern BDD Test Automation with Playwright, Typescript

AWS Cloud Mastery

PlaywrightとTypeScriptの紹介

なぜPlaywrightとTypeScriptを選ぶべきか？

システム要件

TypeScriptを使用したPlaywrightプロジェクトのインストール

ステップ1：新規プロジェクトの作成

ステップ2：PlaywrightとTypeScriptのインストール

ステップ3：プロジェクト構造の確認

ステップ4：設定ファイルの理解

playwright.config.tsファイル

PlaywrightとTypeScriptで最初のテストを作成

新しいテストファイルの作成

テストの実行

基本的なPlaywrightコマンド

結論

役立つリソース

目次

`playwright.config.ts`ファイル