Playwright UIテスト入門

UIテストを自動化する Playwright 入門

UIテストは、Webアプリケーションのユーザビリティを保証するために不可欠です。手動テストでは時間とコストがかさむため、自動化されたテストを導入することが一般的です。Playwright は、Microsoft が開発したクロスブラウザのテストフレームワークであり、UIテストの自動化に非常に適しています。本記事では、Playwright の基本的な使い方を解説します。

Playwright とは？

Playwright は、Chromium、Firefox、Webkit (Safari) の3つのブラウザで動作するテストフレームワークです。ヘッドレスモードで動作することも可能で、テスト実行時のリソース消費を抑えることができます。また、JavaScript と Python でのサポートがあり、開発言語に合わせて選択できます。

Playwright のインストール

Playwright を使用するには、まずインストールする必要があります。Node.js と npm がインストールされていることを確認してください。ターミナルを開き、以下のコマンドを実行します。

npm install -g playwright

インストールが完了したら、以下のコマンドで Playwright を起動します。

playwright install

このコマンドは、Playwright が使用するブラウザをダウンロードします。

Playwright でのテストの実行

Playwright でテストを実行するには、playwright test コマンドを使用します。まず、テストの実行に使用する JavaScript ファイルを作成します。例えば、example.js というファイルを作成し、以下のコードを記述します。

// example.js
const { test, expect } from '@playwright/test';

test('Google のタイトルが "Google" であること', async ({ page }) => {
  await page.goto('https://www.google.com');
  const title = await page.title();
  expect(title).toBe('Google');
});
  

上記のコードは、Google の URL にアクセスし、タイトルが "Google" であることを検証するテストです。次に、ターミナルで以下のコマンドを実行します。

npx playwright test example.js

Playwright はブラウザを起動し、テストを実行し、結果をターミナルに表示します。テストが成功すれば、"PASS" と表示されます。

Playwright の基本的な概念

Playwright には、以下の基本的な概念があります。

• Page: ブラウザのページを表します。
• Context: 複数の Page を管理するために使用されます。
• Browser: 複数の Context を管理するために使用されます。

まとめ

本記事では、Playwright の基本的な使い方を解説しました。Playwright を使用することで、UIテストを簡単に自動化することができます。より高度な機能を学ぶことで、より効果的なテストを作成することができます。