テスト自動化ツールPlaywrightについて

#Playwright

この記事を書いたチーム：frontier

Playwrightの概要
主な機能と特徴
コード例：操作と動作検証
まとめ

Playwrightの概要

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

Playwrightは、Microsoftが開発したクロスブラウザ対応のE2Eテスト自動化ツールです。Node.jsをベースに動作し、Chromium、Firefox、WebKitといった主要ブラウザをサポートしており、Webアプリケーションの動作をユーザー視点で効率的に検証できます。

主な機能と特徴

Playwrightの強みは、豊富な自動化機能です。クリックや入力、ドラッグ＆ドロップ、ファイルアップロードなどの操作を簡潔なコードで記述できるほか、テスト実行時のスクリーンショットや動画記録、トレースログの取得も可能です。これにより、テストが失敗した際の原因分析が容易になり、開発者は迅速に問題を特定できます。

また、モバイル相当のデバイス環境をシミュレートできるため、レスポンシブデザインやスマートフォン向けUIの検証にも役立ちます。

さらに、ネットワーク操作のモック機能を備えており、外部APIの応答を仮想的に再現することで、安定したテスト環境を構築できます。並列テスト実行にも対応しているため、大規模なテストスイートでも効率的に処理できる点も強みの一つです。

加えて、Seleniumと比較するとPlaywrightは自動待機機能を標準で備えているため、待機コードを明示的に書く必要がなく、より安定したテストが可能です。Puppeteerと比べると、ChromiumだけでなくFirefoxやWebKitもサポートしているため、クロスブラウザテストに対応できる点が大きな違いです。これらの特徴により、PlaywrightはSeleniumの汎用性とPuppeteerの軽快さを兼ね備えたE2Eテスト自動化ツールといえます。

コード例：操作と動作検証

Playwrightの導入は非常に簡単で、下記のコマンドを実行するだけでプロジェクトの雛形が生成されます。

npm init playwright@latest

以下に基本的な操作コードと動作を検証するアサーションコードの例を示します。

テストファイル例: example.spec.ts

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

test('検索のテスト', async ({ page }) => {
  // ページ遷移
  await page.goto('https://www.example.com');

  // 入力操作
  await page.locator('.input_text').fill('検索テスト');

  // 検索ボタン押下
  await page.getByRole('button', {name: '検索').click();

  // URLの検証
  await expect(page).toHaveURL(/searchResult/);

  // 要素数の検証
  await expect(page.locator('.result_item')).toHaveCount(10);

  // スクリーンショット
  await page.screenshot({ path: 'screenshot.png' });
});

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

test('検索のテスト', async ({ page }) => {

// ページ遷移

await page.goto('https://www.example.com');

// 入力操作

await page.locator('.input_text').fill('検索テスト');

// 検索ボタン押下

await page.getByRole('button', {name: '検索').click();

// URLの検証

await expect(page).toHaveURL(/searchResult/);

// 要素数の検証

await expect(page.locator('.result_item')).toHaveCount(10);

// スクリーンショット

await page.screenshot({ path: 'screenshot.png' });

});

このテストコードでは以下のような流れで検索機能が正しく動作しているかを確認しています。

page.gotoメソッドで「https://www.example.com」に遷移する
page.locatorメソッドでclass名が「input_text」であるテキスト入力欄を指定し、fillメソッドで「検索テスト」をテキスト入力する
page.getByroleメソッドで「検索」ボタンを指定し、clickメソッドで押下する
expect().toHaveURLメソッドで「searchResult」というテキストを含むURLに遷移していることを検証する
expect().toHaveCountメソッドでclass名が「result_item」である要素の数が10個存在することを検証する
page.screenshotメソッドで「screenshot.png」という名前で画像を保存する

まとめ

Playwrightは、クロスブラウザ対応・豊富な自動化機能・簡易な導入手順・直感的なコード記述といった点で非常に優れたテスト自動化ツールです。テストコードは短く簡潔でありながら、複雑なシナリオにも対応できる柔軟性を持っています。スクリーンショットや動画記録、ネットワークモックなどの機能を活用すれば、単なるUIテストにとどまらず、包括的な品質保証を実現できます。興味を持った人はぜひ自分でも調べて利用してみてください。

【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc.　詳細はこちらから＞