Zenn
🔍

Playwrightについて

に公開
Playwright
E2E
tech

Playwrightについて調べてみたのでまとめました。

Playwrightとは

  • PlaywrightはMicrosoftが開発したE2Eテストフレームワーク
    • 自動化されたブラウザテストを実行可能
    • 使い方によってはブラウザ操作の自動化みたいなこともできる
  • Chrome、Firefox、Safari、Edge等の主要なブラウザに対応
  • 後発ということもあり、他のE2Eフレームワークで問題になっている課題にも対応
    複数言語対応、複数タブ、ウィンドウの制御など

対応言語

JavaScript（Node.js）をメインの言語として開発されている。
Node.jsベースが一番情報が多いので、JS、TSでやるのが良いと思う。

  • JavaScript/TypeScript
  • Python
  • Java
  • .NET

主な特徴

  • クロスブラウザサポート
    複数のブラウザエンジンに対応し、同じテストコードで異なるブラウザでのテストが可能
  • 自動待機機能
    ページの読み込みや要素の表示を自動的に待機し、より安定したテストを実現できる
    他のフレームワークは自分で待機をいれる必要があるので他のフレームワークよりおすすめ
  • コード生成
    ブラウザでの操作をコードとして自動生成する機能があり、テストコードの作成を効率化します。
    アサーションもある程度自動生成可能

主な機能

  • トレース機能
    テスト実行の詳細な記録と分析が可能
  • 並列実行
    複数のテストを同時に実行し、テスト時間を短縮
  • スクリーンショット・動画記録
    テスト実行時の画面をキャプチャして保存可能

使用例

const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  await page.goto('https://example.com'); //ページにアクセス
  await page.click('text=Submit'); //submitボタンをクリック
  await expect(page.locator('.success-message')).toBeVisible(); // .success-messageのクラスのエリアが表示されているかチェック
});

導入のメリット

  • 高速で信頼性の高いテスト実行
  • デバッグが容易で詳細なレポート機能
  • モダンなWeb技術への対応
  • 活発なコミュニティとサポート
  • 継続的インテグレーション（CI）環境との統合も容易。

今後

とりあえずえいやで作ってみたら、テストコードが重複していたり、あとで見たら理由がわからないなど、
全然だめなものができるので、ある程度作り方などは考えたほうが良さそう

Discussion