Playwrightがブラウザ自動化を制覇する理由：徹底解析

![Group114.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967621/47a509e8-f8bb-8294-b5b1-7881840e0f57.png)


# Playwrightの概要

Playwrightは、Microsoftが開発したWeb UI自動化テストフレームワークです。  
Playwrightは、クロスプラットフォーム、クロス言語、クロスブラウザをサポートし、モバイルブラウザにも対応しています。

![Browsers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967621/2a92502f-dbb2-424f-b6bc-b6931dbff4f6.png)


公式サイトに記載されている内容:
- 自動待機、ページ要素に対するインテリジェントなアサーション、実行トレース機能により、Webページの不安定さを効果的に扱うことができます。
- テストを実行しているプロセスとは異なるプロセスでブラウザを制御することで、インプロセステストランナーの制限を排除し、Shadow DOMの操作もサポートします。
- Playwrightは各テストに対してブラウザコンテキストを作成します。ブラウザコンテキストは新しいブラウザプロフィールと同じ意味を持ち、ゼロコストで完全なテストの隔離を提供します。新しいブラウザコンテキストの作成には数ミリ秒しかかかりません。
- **コード生成**、**ステップバイステップデバッグ**、**トレースビューワー**などの機能を提供しています。

---

## Playwright vs. Selenium vs. Cypress

現在利用可能な最も優れたWeb UI自動化テストフレームワークには、10年以上の歴史を持つSelenium、最近人気のCypress、そしてここで紹介するPlaywrightがあります。これらはどのように異なるのでしょうか？以下に比較をまとめました。

| 特徴                     | Playwright                | Selenium                    | Cypress                    |
|--------------------------|---------------------------|-----------------------------|----------------------------|
| サポートされている言語    | JavaScript, Java, C#, Python | JavaScript, Java, C#, Python, Ruby | JavaScript/TypeScript     |
| サポートされているブラウザ | Chrome, Edge, Firefox, Safari | Chrome, Edge, Firefox, Safari, IE | Chrome, Edge, Firefox, Safari |
| テストフレームワーク      | 言語ごとのフレームワーク  | 言語ごとのフレームワーク    | 言語ごとのフレームワーク  |
| 使いやすさ                | 簡単に使える               | 設定が複雑で学習曲線がある    | 簡単に使える               |
| コードの複雑さ            | シンプル                   | やや複雑                    | シンプル                   |
| DOM操作                   | シンプル                   | やや複雑                    | シンプル                   |
| コミュニティの成熟度      | 徐々に成長中               | 高い成熟度                  | かなり成熟している         |
| ヘッドレスモードサポート  | はい                       | はい                         | はい                       |
| 並列処理サポート          | サポートあり               | サポートあり                | CI/CDツールによる           |
| iframeサポート            | サポートあり               | サポートあり                | プラグインを通じてサポート  |
| ドライバ                   | 必要なし                   | ブラウザ固有のドライバが必要  | 必要なし                   |
| 複数タブ操作              | サポートあり               | サポートなし                | サポートあり               |
| ドラッグ＆ドロップ        | サポートあり               | サポートあり                | サポートあり               |
| 組み込みレポーティング    | はい                       | いいえ                       | はい                       |
| クロスオリジンサポート    | サポートあり               | サポートあり                | サポートあり               |
| 組み込みデバッグ          | はい                       | いいえ                       | はい                       |
| 自動待機                  | はい                       | いいえ                       | はい                       |
| 組み込みスクリーンショット/ビデオ | はい                       | ビデオ録画なし               | はい                       |

### 主要な比較:
- **サポートされている言語**: PlaywrightとSeleniumはJava、C#、Pythonをサポートしており、これらの言語に精通しているテストエンジニアにとって人気があります。
- **技術的アプローチ**: PlaywrightとSeleniumは、Googleのリモートデバッグプロトコルを使ってChromiumベースのブラウザを制御します。Firefoxなどのブラウザには、JavaScriptインジェクションを使用します。Seleniumはこれをドライバでカプセル化し、Playwrightは直接呼び出します。CypressはJavaScriptを使ってブラウザを制御します。
- **ブラウザのサポート**: SeleniumはInternet Explorerもサポートしていますが、IEは廃止されつつあるため、あまり意味はありません。
- **使いやすさ**: すべてのフレームワークに学習曲線がありますが、PlaywrightとCypressはSeleniumよりも簡単に使えると感じる人が多いです。

---

## 始め方

Playwrightは複数の言語をサポートしていますが、特にNode.jsに依存しています。PythonやJavaを使用する場合でも、初期化時にNode.js環境が必要で、Node.jsドライバをダウンロードします。そのため、ここでは**JavaScript/TypeScript**を中心に説明します。

### インストールとデモ

1. **Node.jsがインストールされていることを確認します。**
2. Playwrightプロジェクトを`npm`または`yarn`で初期化します:
   ```bash
   # npmを使用
   npm init playwright@latest

   # yarnを使用
   yarn create playwright
   ```
3. プロンプトに従って設定します:
   - **TypeScript**または**JavaScript**を選択します（デフォルトはTypeScript）。
   - テストディレクトリ名を指定します。
   - Playwrightサポートブラウザをインストールするかどうかを選択します（デフォルトはTrue）。

   ブラウザをダウンロードする場合、PlaywrightはChromium、Firefox、WebKitをダウンロードします。初回セットアップ時に時間がかかりますが、Playwrightのバージョンが更新されない限り、このプロセスは1回のみ実行されます。

### プロジェクト構造

初期化後、以下のようなプロジェクトテンプレートが作成されます:
```
playwright.config.ts    # Playwright設定ファイル
package.json            # Node.js設定ファイル
package-lock.json       # Node.js依存関係ロックファイル
tests/                  # テストディレクトリ
  example.spec.ts       # テンプレートテストケース
tests-examples/         # サンプルテストディレクトリ
  demo-todo-app.spec.ts # サンプルテストケース
```

サンプルテストを実行:
```bash
npx playwright test
```

テストはサイレント（ヘッドレスモード）で実行され、結果は次のように表示されます:
```
6つのテストを6ワーカーで実行中

  6つのテストが合格（10秒）

最後のHTMLレポートを開くには、次を実行してください:

  npx playwright show-report
```

---

## サンプルソースコード

`example.spec.ts`のテストケース例:
```typescript
import { test, expect } from '@playwright/test';

test('タイトルがあることを確認', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('「Get started」リンクをクリック', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page).toHaveURL(/.*intro/);
});
```

- **最初のテスト**: ページタイトルに「Playwright」が含まれていることを確認。
- **2番目のテスト**: 「Get started」リンクをクリックし、URLを確認。

各`test`メソッドは:
- **テスト名**（例: `'タイトルがあることを確認'`）。
- **関数**を実行してテストロジックを実行します。

主なメソッド:
- `page.goto`: URLに移動。
- `expect(page).toHaveTitle`: ページタイトルをアサート。
- `page.getByRole`: ロールで要素を探します。
- `await

 expect(page).toHaveURL`: 現在のページURLをアサート。


### タイピングキャラクター

`locator.type()` メソッドは、文字ごとに入力をシミュレートし、`keydown`、`keyup`、および `keypress` イベントをトリガーします：

```javascript
await page.locator('#area').type('Hello World!');
```

### 特殊キー

特殊キーには `locator.press()` を使用します：

```javascript
// Enterキー
await page.getByText('Submit').press('Enter');

// Ctrl+右矢印
await page.getByRole('textbox').press('Control+ArrowRight');

// ドルキー
await page.getByRole('textbox').press('$');
```

サポートされているキーには、`Backquote`、`Minus`、`Equal`、`Backslash`、`Backspace`、`Tab`、`Delete`、`Escape`、`ArrowDown`、`End`、`Enter`、`Home`、`Insert`、`PageDown`、`PageUp`、`ArrowRight`、`ArrowUp`、`F1-F12`、`Digit0-Digit9`、`KeyA-KeyZ` などがあります。

### ファイルアップロード

`locator.setInputFiles()` を使用して、アップロードするファイルを指定します。複数のファイルもサポートされています：

```javascript
// ファイルのアップロード
await page.getByLabel('Upload file').setInputFiles('myfile.pdf');

// 複数ファイルのアップロード
await page.getByLabel('Upload files').setInputFiles(['file1.txt', 'file2.txt']);

// ファイルの削除
await page.getByLabel('Upload file').setInputFiles([]);

// バッファからのアップロード
await page.getByLabel('Upload file').setInputFiles({
  name: 'file.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('this is test')
});
```

### フォーカス

`locator.focus()` を使用して、要素にフォーカスを設定します：

```javascript
await page.getByLabel('Password').focus();
```

### ドラッグアンドドロップ

ドラッグアンドドロップのプロセスには4つのステップがあります：
1. ドラッグする要素の上にマウスをホバーします。
2. 左クリックを押します。
3. ターゲット位置にマウスを移動します。
4. 左クリックを放します。

`locator.dragTo()` メソッドを使用して実行できます：

```javascript
await page.locator('#item-to-be-dragged').dragTo(page.locator('#item-to-drop-at'));
```

または、手動でプロセスを実装することもできます：

```javascript
await page.locator('#item-to-be-dragged').hover();
await page.mouse.down();
await page.locator('#item-to-drop-at').hover();
await page.mouse.up();
```

### ダイアログ処理

デフォルトでは、Playwrightは `alert`、`confirm`、`prompt` のようなダイアログを自動的にキャンセルします。ダイアログを受け入れるために事前にダイアログハンドラを登録することができます：

```javascript
page.on('dialog', dialog => dialog.accept());
await page.getByRole('button').click();
```

### 新しいページのハンドリング

新しいページがポップアップする場合、`popup` イベントを使用して処理できます：

```javascript
const newPagePromise = page.waitForEvent('popup');
await page.getByText('Click me').click();
const newPage = await newPagePromise;
await newPage.waitForLoadState();
console.log(await newPage.title());
```


---

## [Playwrightに最適なプラットフォーム: Leapcell](https://leapcell.io/) 

![Group 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967621/6d23ada5-46a2-67e0-8337-80876ecc30bc.png)


[Leapcell](https://leapcell.io/) は、分散アプリケーション向けに設計された最新のクラウドコンピューティングプラットフォームです。**従量課金制**を採用しており、アイドル時間のコストが発生せず、使用したリソースにのみ料金を支払います。

### 1. 多言語サポート  
- JavaScript、Python、Go、Rustで開発可能。

### 無制限のプロジェクトを無料でデプロイ  
- 使用量に応じて支払い — リクエストがない場合、料金は発生しません。

### 2. 圧倒的なコスト効率  
- 従量課金制でアイドル時間の料金は発生しません。  
- 例: $25で、平均応答時間60msで694万件のリクエストをサポート。

### 3. スムーズな開発者体験  
- 設定が簡単な直感的なUI。  
- 完全自動化されたCI/CDパイプラインとGitOps統合。  
- 実行可能なインサイトを提供するリアルタイムのメトリクスとログ。

### 4. 効率的なスケーラビリティと高パフォーマンス  
- 高い並列処理を簡単に処理する自動スケーリング。  
- 運用オーバーヘッドゼロ — 開発に集中できます。

[詳細はドキュメントをご覧ください！](https://docs.leapcell.io/)

Leapcell Twitter: [https://x.com/LeapcellHQ](https://x.com/LeapcellHQ)