見出し画像
Photo by chiyoizmo

Playwrightに挑戦（実装編）

fumi

前回のPlaywright環境構築の続きとなります。
本記事では自動テストの実装に挑戦します。

テストコード自動生成

まずはテストコード自動生成機能を試してみます。

テストケース

テストコード自動生成の前に簡単なテストケースを用意しました。
サイトはおなじみのHOTEL PLANISPHEREです。

1.https://hotel.testplanisphere.dev/ja/ にアクセスする
2.グロナビの「ログイン」ボタンをクリックする
3.メールアドレス欄にメールアドレス「ichiro@example.com」を入力する
4.パスワード欄にパスワード「password」を入力する
5.ログインボタンをクリックする
6.マイページの見出しに文字列「マイページ」が含まれることを確認する

ツールバー

公式ドキュメントでコード自動生成の雰囲気が掴めますが、ツールバーの機能について少し補足しておきます。

ブラウザの上部に表示されるツールバー

※左から順に説明
・Record
　画面操作の記録ON/OFFを切り替える

・Pick locator
　画面内の表示されている要素を確認する(多分…)
　Pick locatorを使用している最中は操作内容が記録されない

・Assert visibility
　対象の要素が表示されているか確認する

・Assert text
　対象要素のテキストに指定した文字列が含まれているか確認する

・Assert value
　対象要素のvalueに指定した値が設定されているか確認できる
　※HOTEL PLANISPHEREであれば会員登録のラジオボタンなどが対象

テストコード自動生成

1.ターミナルで以下のコマンドを実行し、ブラウザとPlaywright Inspectorを起動する

// ブラウザとPlaywright Inspectorを起動
npx playwright codegen https://hotel.testplanisphere.dev/ja/

// オプションで指定したファイルに生成したコードの出力もできる
npx playwright codegen https://hotel.testplanisphere.dev/ja/ -o sample.js
ブラウザ(左)とPlaywright Inspector(右)

2.テストケースに沿ってブラウザを操作する

アサーションの記録
生成されたテストコード

3.spec.jsファイルを作成し、テストコードをコピペする

テストコード手動実装

テストコード自動生成もありゼロベースでコーディングすることはなさそうですが、以前使ったことがあるものや便利そうな機能をいくつか挙げてみます。

  • 要素の指定

// id属性を指定する
await page.locator('#id');

// class属性を指定する
await Page.locator('.class');

// name属性を指定する
await page.locator('input[name="name"]');

// 子要素のn番目を指定する
await Page.locator('td:nth-child(1)');

// タグの1番目を指定する
await page.$(selector);

// XPathで要素を指定する
await page.locator('xpath=//*[@id="id"]');

  • ページ操作

// 対象のページへ遷移する
await page.goto('https://hotel.testplanisphere.dev/ja/');

// 前のページへ戻る
await page.goBack();

// 新しいタブに制御を移す
const pagePromise = context.waitForEvent('page');
await page.getByText('open new tab').click();
const page = await pagePromise;
await newPage.waitForLoadState();

  • マウスクリック

await page.locator('locator').click();

  • テキスト入力

await page.locator('locator').fill('text');

  • セレクトボックス選択

await page.locator('locator').selectOption('test');

  • キーボード操作

await page.keyboard.press('key');

  • 待機処理

// 指定した秒数待機する
await page.waitForTimeout(1000);

// 一時停止する(Playwright Inspectorで要素の記録も可能)
await page.pause();

// 指定したURLに遷移するまで待機する(認証系で手動での操作が必要な場合などに使えそう)
await page.waitForURL('/pass');

  • アサーション

// 要素のテキストが指定した文字列であることを確認
await expect(page.locator('locator')).toHaveText('text');

// 要素のテキストに指定した文字列が含まれていることを確認
await expect(page.locator('locator')).toContainText('text');

// 要素の属性が指定した内容であることを確認
await expect(page.locator('locator')).toHaveAtrribute('Attribute');

  • スクリーンショット取得

// 表示部分のスクリーンショット
await page.screenshot({ path: ‘screenshot.png’ });

// ページ全体のスクリーンショット
await page.screenshot({ path: 'screenshot.png', fullPage: true });

  • ビジュアルリグレッションテスト(画面差分確認)

// 比較元のスクリーンショットと自動テスト中に撮影したスクリーンショットの差分を確認
await expect(page).toHaveScreenshot();

// フルスクリーン表示でスクリーンショットの差分を確認
await expect(page).toHaveScreenshot({fullPage: true});

// 比較元となるスクリーンショットの更新
npx playwright sample.js --update-snapshot

公式ページで使い方が分からず以下のブログを参考にしました。
MagicPodの画像差分チェックと同様に、差分確認を行う前に自動テストを実行して比較元のスクリーンショットを撮影しておく必要があるみたいです。

  • ページオブジェクト

複雑なシステムの場合はコードの可読性やメンテナンスのしやすさなどを考慮してページオブジェクトで実装する必要があるかもしれません。

今回はコード自動生成で作成したコードをページオブジェクトに置き換えてみました。なんとか動く状態になりましたが、良くない書き方をしていたらすみません…。

【自動生成されたテストコード】

【ページオブジェクトに置き換えたテストコード】

【ホーム画面のページオブジェクト】

【ログイン画面のページオブジェクト】

【マイページ画面のページオブジェクト】

ロケータの取得と返却をするメソッドがうまくいかず、サンプルコードのやり方で対応しました

  • その他

実装は以下のブログも非常に参考になりますので掲載させていただきます。

最後に

今回の挑戦で最も重要となる自動テスト実装ですが、実際に触ってみるとテストコード自動生成がとても便利でした。私自身が開発未経験でコーディングに対する苦手意識がなかなか抜けないため、このようなサポート機能は本当にありがたいです。

また、英語は苦手ですが公式ページの情報が充実しているので手動で実装が必要な機能などの情報が得られやすい点は良かったです。

Playwrightの挑戦も折り返し地点で山場は乗り越えたと思いますが、残りの実行と運用についてもコツコツやっていきたいと思います。


この記事が気に入ったらサポートをしてみませんか？