VSCodeでPlaywrightを動かしてみよう②

前回は VSCode で Playwright を実行するための「インストール」と「実行方法」ついて記載しました。今回は Playwright の デバッグと、Recorder 機能を使ったテストコード作成を試してみます。

テストコードのデバッグ

テストコードのデバッグも簡単です。ブレークポイントを設定したい場合は、行番号の左横をマウスオーバーすると赤い点が表示されるので、赤い点をクリックします。
デバッグ モードでテストを実行するには、実行するテストの横にある行番号を右クリックし、「テストをデバッグ」をクリックします。

テストが開始され、ブレークポイントで停止しました。

テストコードの作成

サイドバーの「Recode new」をクリックすると、新しくファイル（test-1.spec.ts）が作成され、ブラウザウィンドウが開きます。
ブラウザでテストするURLを入力し、移動します。
テストしたい操作を行うと、Playwrightが記録して、新しく作成したファイルにテストコードを生成してくれます。
記録が完了したら、キャンセルボタンをクリックするか、ブラウザウィンドウを閉じます。

作成されたテストコードはこのようになりました。

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

test('test', async ({ page }) => {
  await page.goto('https://blog.future.ad.jp/');
  await page.getByRole('textbox', { name: 'Search' }).click();
  await page.getByRole('textbox', { name: 'Search' }).fill('テスト');
  await page.getByRole('link', { name: '検索', exact: true }).click();
  await page.getByRole('link', { name: 'テスト自動化ツールで負荷テストしたい', exact: true }).click();
  await page.locator('#logoarea').getByRole('link', { name: 'FUTURE SPIRITS' }).click();
});まとめ

まとめ

テストコードのデバッグ機能は、複雑で大掛かりなテストコードを作成するときに重宝しそうです。レコード機能は、作成されたテストコードをVSCodeで直接編集⇒実行⇒確認ができるので、テストコード作成の時短につながるのでは、と思います。
ぜひ使ってみてください。