RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

トップ > フロントエンド > 【Playwright 入門】Playwrightで始めるE2Eテスト

【Playwright 入門】Playwrightで始めるE2Eテスト

フロントエンド

はじめに

こんにちは！フロントエンド開発課のkoki_matsuraです。 この記事では、E2Eテストフレームワークとして用いられるPlaywrightのインストールといくつか基本的なテストコード、最後に拡張機能についてもご紹介させていただきます。これからPlaywrightでテストを書きたい人、E2Eテストに少しでも興味を持っていただける方に読んでいただけると幸いです。 目次は次の通りになっています。

Playwrightとは

Webブラウザの自動化テストを実行するためのライブラリであり、Node.jsアプリケーションで使用することができます。スクレイピングやテスト自動化、UIテスト、パフォーマンステスト、スクリーンショット、PDFの生成などさまざまな用途で使用することができます。特徴は下記のようになっています。

  • Chrome・Firefox・Safari・Edgeなど複数のブラウザをサポートしている
  • 簡潔なAPIを提供しており、直感的にWebページを操作できる
  • 非同期で動作することによる、テストの高速実行。ブラウザのクラッシュやフリーズに対する強い耐性を持っている
  • Puppeteerと類似してることによりPuppeteerユーザーは取り入れやすい

インストール

Playwrightを使用するにはPlaywright Testのインストールとブラウザのインストールが必要となります。
下記のコマンドでPlaywright Testとブラウザを同時にインストールできます。

npm init playwright@latest

インストールする際に次の項目について聞かれます。

  • TypeScriptかJavaScript のどちらを使用しますか (デフォルトはTypeScript) -> デフォルトを選択
  • テストフォルダーの名前 (デフォルトは tests または e2e) -> デフォルトを選択
  • GitHub Actions ワークフローを追加して、CI でテストをする -> falseを選択
  • Playwright ブラウザーをインストールします (デフォルトは true) -> デフォルトを選択

準備はこれだけです。あとはテストコードを作成するだけで簡単にテスト自動化を実現できます。

簡単なテストを書いてみよう

早速ですが、簡単なテストを書いてみましょう。テスト内容は次のようにします。

  1. ChromeブラウザでGoogle検索エンジンのトップページを開く
  2. 検索項目に「株式会社ラクス」と入力し、Enterをクリック
  3. 「株式会社ラクス」の公式サイトのリンクをクリック
  4. ページが正しく表示されているかテスト

テストのコードはデフォルトで作成されているtests/example.spec.tsに書いていきます。
例として書かれているテストを真似して、testの大枠を書いてみましょう。内容は一旦、コメントで書いておきます。

// example.spec.ts  

test('ラクスのサイトが表示されているか', async ({ page }) => {
  // Google検索エンジンを開く

  // 検索欄に「株式会社ラクス」を入力

  // Enterを押す

  // 検索結果から公式サイトをクリック

  // テスト：公式サイトが表示されているか

})

test関数は第一引数にテストの名前を、第二引数にテストの関数を書いていきます。テストの関数に引数として入っているpageとはブラウザで開かれたWebページを表すオブジェクトです。 テストを記述していきます。「Google検索エンジンを開く」の下に書きましょう。何かのページへ移動したい場合はgoto関数を使います。引数にはURLを入れます。

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

これでGoogle検索のページへ遷移するはずです。
次は、検索欄に「株式会社ラクス」と入力するコードを書いていきます。このコードには検索欄の要素を取得が必要です。ですが、要素を取得するのは意外と面倒です。
このような場合はPlaywrightのコードジェネレータを使いましょう。使い方は簡単です。下記のコマンドを打ちます。

npx playwright codegen https://www.google.com

Playwright InspectorとChromiumでGoogle検索が開かれると思います。Google検索の検索欄の要素が欲しいので、そこにホバーします。すると、下記の画像のように要素が表示されます。
この要素をクリックして、検索欄に「株式会社ラクス」と入力し、enterキーを押します。すると、Inspectorの方に次のようなコードが生成されていると思います。
getByRoleとは名前の通り、要素を役割別に取得できるものです。今回はcomboboxというRoleを指定していますが、buttonやinputなどもあります。

  await page.getByRole('combobox', { name: '検索' }).click();
  await page.getByRole('combobox', { name: '検索' }).fill('株式会社ラクス');
  await page.getByRole('combobox', { name: '検索' }).press('Enter');

最後に公式サイトを検索結果からクリックするだけです。Inspectorから生成されたコードが次のようになっていれば問題ありません。

await page.getByRole('link', { name: '企業の成長を支援するクラウドサービス | 株式会社ラクス ラクス https://www.rakus.co.jp' }).click();

生成されたコードをexample.spec.tsにコピペします。

// example.spec.ts  

test('ラクスのサイトが表示されているか', async ({ page }) => {
  // Google検索エンジンを開く
  await page.goto('https://www.google.com/');
  // 検索欄に「株式会社ラクス」を入力
  await page.getByRole('combobox', { name: '検索' }).click();
  await page.getByRole('combobox', { name: '検索' }).fill('株式会社ラクス');
  // Enterを押す
  await page.getByRole('combobox', { name: '検索' }).press('Enter');
  // 検索結果から公式サイトをクリック
  await page.getByRole('link', { name: '企業の成長を支援するクラウドサービス | 株式会社ラクス ラクス https://www.rakus.co.jp' }).click();
  // テスト：公式サイトが表示されているか

})

最後に公式サイトが表示されているかをテストします。言い換えると、現在のページのURLがラクスの公式サイトURLと一致するかのテストです。 次のコードを「テスト：公式サイトが表示されているか」のコメント下に追記します。
expectはアサーションライブラリの一つで期待される結果を検証するときに用いるものです。pageがhttps://www.rakus.co.jp/を持っているかの検証を示しています。

await expect(page).toHaveURL("https://www.rakus.co.jp/");

テストを書き終えたので実行をします。実行は下記のコマンドです。"9 passed"と表示されていればテスト通過できています。

npx playwright test


レポートはnpx playwright show-reportを実行し、該当のページを表示すると見ることができます。

テストを実行することができました。
ちなみに、テストコードを書くためには対象となる要素を取得することが基本となり、PlaywrightではLocatorというWebページの要素を検索するためのオブジェクトを使います。CSSセレクタ、テキスト、要素の属性など、様々な方法で要素を検索できます。
とても便利ですが、Locatorはその便利さがゆえに使いすぎてコードがわかりにくくなったり、様々な検索が可能なために複雑なHTML構造を持つ要素を見つけるのが困難な場合があります。
なので、できる限りgetByRoleなどの明示的な組み込みロケーターを使います。組み込みロケーターはLocatorと比べ 、以下のようなメリットがあります。

  • シンプルでわかりやすいコードが書ける
    ボタンを特定するためにpage.locator()を使用するよりも、page.getByRole('button')のようにgetByRoleメソッドを使用した方がわかりやすいコードになります。

  • アクセシビリティの改善
    getByRole()などの組み込みのロケーターは、Webアクセシビリティの向上を目的としています。これらのロケーターを使用することで、視覚障害者やその他の障害を持つユーザーがWebページを使用するのに役立ちます。

  • ロケーターの選択が自動化される
    getByRole()などの組み込みのロケーターを使用することで、Playwrightが適切なロケーターを自動的に選択してくれます。getByRole('button')が実行されると、Playwrightは自動的にrole="button"属性を持つ要素を検索します。

Playwrightの設定を編集しよう

テスト実行後のレポートを見てもらうとChromium、Firefox、Webkitの3ブラウザで各テストが実行されていることが確認できます。もちろん複数ブラウザでテストすることも大事ですが毎回は時間がかかるのでブラウザを変更したい場合もあるでしょう。また、人によっては実行中のブラウザが表示して欲しい人もいると思います。
そのようなテストに関する設定はplaywright.config.tsからできます。デフォルトでは下記のような設定になっています。

export default defineConfig({
  testDir: './tests',
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://127.0.0.1:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
]
});

testDirはテストファイルを格納しておくフォルダのことで、ここに設定されたディレクトリ以外でテストファイルを作成してもPlaywrightは認識してくれないので注意です。
他はデフォルトでコメントをつけてくれているので省略します。
重要なのはprojectsで、デフォルトではchromium、firefox、webkitが設定されています。chromiumだけで実行したい場合は、firefoxとwebkitをコメントアウトします。これだけで実行ブラウザを変更することができます。
実行中にブラウザを表示するのも簡単です。reporterとprojectsの間にあるuseの中に下記を書き加えるだけです。

headless : false

headlessオプションを書かない場合はデフォルトでtrueになっているので、falseを書き加えることで実行中にブラウザ表示させることができます。
保存して、もう一度テストを実行してみましょう。
すると、chromiumが3つ立ち上がり、テストがブラウザで実行されているのが確認できると思います。3つ立ち上がっているのはfullyParallelオプションがtrueになって、並列処理がされているためです。見にくい場合はfalseにすることで一つずつ実行されます。
オプションは他にも様々ありますので、詳しくは TestConfig | Playwright を見てください。

別タブを開くテストを書こう

別タブ操作機能の有無はE2Eテスト自動化ライブラリの選定基準の一つになっていることが多いと思います。Playwrightは別タブでの操作が可能となっています。
別タブを開くケースとしては「コードから自分で開くケース」と「ボタンを押すなどのトリガーにより開かれるケース」があると思われるのでその2パターンを紹介します。

別タブをコードから開くケース

テストは内容は次のようにします。

  1. ページを開く
  2. 別タブを開く
  3. 別タブでGoogle検索エンジンのトップページを開く
  4. 検索項目に「株式会社ラクス」と入力し、Enterをクリック
  5. 「株式会社ラクス」の公式サイトのリンクをクリック
  6. 別タブのページが正しく表示されているかテスト

最初に書いたテストを別タブで行うだけです。テストのコードはexample.spec.tsに書いていきます。
例として書かれていた二つは消してしまいましょう。
ページを生成するのは難しくありません。下記のようにBrowser型を使うだけです。

const page = await browser.newPage()

これだけなので、テストも下記のように簡単に書けます。

test('別タブでラクスのサイトが表示されているか', async ({ browser }) => {
  // 最初のタブを開く
  const page = await browser.newPage()
  // 別タブを開く
  const newPage = await browser.newPage();
  // 別タブでGoogle検索エンジンを開く
  await newPage.goto("https://www.google.com");
  // 検索欄に「株式会社ラクス」を入力
  await newPage.getByRole('combobox', { name: '検索' }).click();
  await newPage.getByRole('combobox', { name: '検索' }).fill('株式会社ラクス');
  // 検索ボタンを押す
  await newPage.getByRole('combobox', { name: '検索' }).press('Enter');
  // 検索結果から公式サイトをクリック
  await newPage.getByRole('link', { name: '企業の成長を支援するクラウドサービス | 株式会社ラクス ラクス https://www.rakus.co.jp' }).click();
  // テスト：公式サイトが表示されているか
  await expect(newPage).toHaveURL("https://www.rakus.co.jp/");
})

実行してみると、別のタブが開くことが確認できると思います。

別タブをリンクから開くケース

ラクスの公式サイトから別タブを開くリンクを押すテストにしました。内容は以下のようにします。

  1. ラクスの公式サイトを開く
  2. ヘッダーメニューの「事業内容」をホバーする
  3. 表示される様々なリンクから「楽楽精算」をクリックする(自動で別タブで楽楽精算のページが開かれる)
  4. 別タブのURLが楽楽精算のページと一致するかをテスト

example.spec.tsに書いていきましょう。
公式サイトを開くのはgoto関数で簡単にできます。
続いて、ヘッダーメニューとはサイト上部の「ラクスの思い」「会社情報」などが並んでいる部分です。

事業内容のリンク要素を取得したいです。コードジェネレータを使えば簡単に取得できますが、下記画像のようにだいぶ長いコードになってしまいます。

コードジェネレータに頼りすぎるとわかりにくいコードになることもあるのであくまでサポートくらいにするといいと思います。
コードジェネレータでうまく要素が取り出せない時には、HTMLを確認してみましょう。IDやClassが割り振られていればかなり要素を絞れると思います。
ヘッダの各要素にはp-header__menu__itemというClassが割り振られていました。ClassやIDで取得する場合にはlocatorを使います。
あとは「事業内容」というテキストを取ればいいので次のようなコードで要素を取得できます。

await page.locator('.p-header__menu__item').getByText("事業内容")

かなりシンプルに取得できます。他にも下記のような取得方法もあります。この場合は「事業内容」というリンクがいくつかあり、その最初の要素が欲しいのでfirst()をつけることで取得できます。

await page.getByRole("link", {name: "事業内容"}).first()

要素が取得できたのでホバーをするだけです。ホバーは要素にhover関数をつけるだけなので下記のように簡単に実装できます。

await page.locator('.p-header__menu__item').getByText("事業内容").hover()

別タブでページを開く際にはイベントが発生する前にイベントを待つ関数を定義しないといけません。これは下記のように書けば実装できます。

const newPagePromise = page.waitForEvent('popup');

イベントを発生させましょう。「楽楽精算」というリンクをクリックするコードです。ここは下記のようにgetByRoleでリンク要素かつ楽楽精算というテキストで要素を絞ります。exactとは完全一致を示します。exactをつけないと部分一致になってしまいます。

  await page.getByRole('link', { name: '楽楽精算', exact: true }).click()

別タブで「楽楽精算」のページが開くはずなので、イベントを解決しましょう。先ほどのnewPagePromiseはPromise型になっているのでawaitをつけることでPageが取り出せます。

const rakurakuseisanPage = await newPagePromise

rakurakuseisanPageは「楽楽精算」のページを表しているはずです。 最後、rakurakuseisanPageが「楽楽精算」のページURLと一致するかのテストを書きます。ここは他のテストと同じように書けます。

await expect(rakurakuseisanPage).toHaveURL(/^https:\/\/www\.rakurakuseisan\.jp\/.*$/);

これでテストが書けました。念の為、テストコードを全て載せておきます。

test('別タブで楽楽精算のページが開かれているか', async ({ page }) => {
  // 最初のタブでラクスの公式サイトを開く
  await page.goto('https://www.rakus.co.jp/');
  // ヘッダーのリンクをホバーする
  await page.locator('.p-header__menu__item').getByText("事業内容").hover();
  // 新しいページを開くイベントを待つ
  const newPagePromise = page.waitForEvent('popup');
  // 楽楽精算のリンクをクリックする(新しいページを開くイベント)
  await page.getByRole('link', { name: '楽楽精算', exact: true }).click();
  // イベントを解決する
  const rakurakuseisanPage = await newPagePromise;
  
  // テスト：新しいページのURLが楽楽精算のページと一致するか
  await expect(rakurakuseisanPage).toHaveURL(/^https:\/\/www\.rakurakuseisan\.jp\/.*$/[f:id:koki_matsura:20230505222421p:plain]);
})

テストを実行してみましょう。自動で開く別タブにも対応できることが確認できます。

リクエスト・レスポンスをテストしよう

正常にリクエストが飛んでいるか、レスポンスが想定通り返ってきているかを確かめたい時もあると思います。
そのようなテストもできるので簡単な例とともに紹介させていただきます。テスト内容は次のようになっています。

  1. Google検索エンジンのトップページを開く
  2. 検索項目に「Playwright」と入力し、Enterをクリック
  3. リクエストとレスポンスを取得
  4. リクエストのparamに「Playwright」が含まれているか
  5. レスポンスのステータスが200で返ってきているか

リクエストとレスポンスを取得するのは新しいページを取得するのと同じでwaitoFor系の関数を使います。
具体的には次のようなコードで書くことができます。

const [request, response] = await Promise.all([
      page.waitForRequest(request => request.url().includes('search?q=Playwright')),
      page.waitForResponse(response => response.url().includes('search?q=Playwright')),
      // リクエストを発生させるイベント
      page.getByRole('combobox', { name: '検索' }).press('Enter')
    ])

waitForRequestとwaitForResponse内の条件に当てはまった場合だけrequestとresponseが返ってきます。
なので、この時点でparamに「Playwright」が含まれていないとテストは失敗します。 リクエストとレスポンスが取得できれば、あとはアサーションするだけです。 テストするのはリクエストのparamに「Playwright」が含まれているかどうかとレスポンスのステータスが200で返ってきているかどうかです。
取得したリクエストとレスポンスを使えば簡単に次のように実装できます。

// リクエストのParamに「Playwright」が含まれているか
expect(request.url()).toContain('search?q=Playwright');
// レスポンスのステータスが200かどうか
expect(response.status()).toBe(200);

リクエストに関しては先ほどのwaitForRequestでparamをチェックしているのでもう一度確認する必要はないのですが一応、書いておきました。
残りの部分は他と同じなのでテストコードは次のようになります。

test('「Playwright」と検索されているか', async ({ page }) => {
    // Google検索エンジンを開く
    await page.goto('https://www.google.com/');
    // 検索欄に「Playwright」を入力
    await page.getByRole('combobox', { name: '検索' }).click();
    await page.getByRole('combobox', { name: '検索' }).fill('Playwright');

    // リクエスト・レスポンスを取得
    const [request, response] = await Promise.all([
      page.waitForRequest(request => request.url().includes('search?q=Playwright')),
      page.waitForResponse(response => response.url().includes('search?q=Playwright')),
      // 検索を実行
      page.getByRole('combobox', { name: '検索' }).press('Enter')
    ])

    // リクエストのParamに「Playwright」が含まれているか
    expect(request.url()).toContain('search?q=Playwright');
    // レスポンスのステータスが200かどうか
    expect(response.status()).toBe(200);
})

テストを実行してみましょう。正常に検索されれば、テストは通過するはずです。

モックを使ってテストしよう

モックとは、リクエストやレスポンスをテストする際に、実際のサーバーに接続せずに、事前に準備した偽のレスポンスを返すようにする機能です。
これを使用することで以下のようなメリットがあります。

  • テストの信頼性向上
    外部APIはテスト実行中に変更されることがあります。これにより、実行結果が変化する可能性があります。モックを使用すると、毎回同じレスポンスを返すことができ、テストの信頼性を向上させることができます。
  • テストの速度向上
    外部APIを呼び出すと、実行に時間がかかる場合があり、タイムアウトになる可能性もあります。モックを使用すると、APIを待つ必要がないのでテストの速度を向上させることができます。
  • 外部との依存排除
    モックを使うと外部APIへの依存関係を排除することができ、テスト実行環境の制約を減らすことができます。
  • エラーの発見と修正の易化
    例えば、外部APIがレスポンスを返さない場合、モックを使用すればそのAPIの問題を発見することが容易にできます。

モックはE2Eテストとは切っても切り離せない機能です。ぜひ、積極的に使っていきましょう。
早速ですが、テストの内容は次のようにします。

  1. ラクスのページを開く
  2. ラクスのページ以下(https://www.rakus.co.jp/**)をモックする
  3. 「ラクスの思い」(/about)の場合だけレスポンスを404にする
  4. 「ラクスの思い」をクリックする
  5. 404ページが表示されているかをテスト

Playwrightでモックを実装するにはroute関数を使用します。第一引数にはモックを反映するURLを、第二引数にはハンドラーを設定します。
このテストの場合はラクスのページ以下を全てモックするので、下記のようにします。

await page.route('https://www.rakus.co.jp/**', rakusRouteHandler);

rakusRouteHandlerではURLが/aboutを含む時だけレスポンスを404にするという設定にしたいので、次のように実装しました。

const rakusRouteHandler = (route: Route, request: Request) => {
    const url = request.url();
    if (url.includes("about")) {
      // レスポンスの内容
      route.fulfill({
        status: 404,
      });
    } else {
      // about以外は通常のレスポンスを返す
      route.continue();
    }
  };

requestのURLにaboutが含まれているときだけ404を返し、それ以外はroute.continue()で通常のレスポンスを返すようにしています。
これだけで簡単にモックすることができます。
テストの全コードは以下のようになります。

test("ラクスのページをモックする", async ({page}) => {
  // モックするためのルートハンドラを作成
  const rakusRouteHandler = (route: Route, request: Request) => {
    const url = request.url();
    if (url.includes("about")) {
      // レスポンスの内容
      route.fulfill({
        status: 404,
      });
    } else {
      // about以外は通常のレスポンスを返す
      route.continue();
    }
  };

  // ラクスのトップページを開く
 await page.goto('https://www.rakus.co.jp/');
  // トップページ以下のリクエストをモックする
  await page.route('https://www.rakus.co.jp/**', rakusRouteHandler);
  // 「ラクスの思い」をクリック
  await page.locator('.p-header__menu__item').getByText("ラクスの思い").first().click();

  // テスト:404ページが表示されていること
  await expect(page.locator('h1')).toHaveText("この www.rakus.co.jp ページが見つかりません")
})

アサーションの部分はページのh1に「この www.rakus.co.jp ページが見つかりません」が表示されているかどうかを見ています。
テストを実行してみると、以下のように404ページが表示されていると思います。
また、/about以外は通常のレスポンスが返されるかも確認してみましょう。
「ラクスの思い」をクリックする部分のコードを以下のように変えます。

await page.locator('.p-header__menu__item').getByText("事業内容").click()

テストを実行してみると、正常に事業内容のページが表示されていると思います。
ハンドラで実装した通りにできています。
今回は簡単に404を返す実装にしましたが、route.fulfill内を変えるだけで柔軟に様々なレスポンスを実装することができます。

Playwright拡張機能を使おう

VSCode使っている人専用にはなりますが、Playwrightの拡張機能がとても便利なのでご紹介します。
まずはVSCodeの拡張機能から「Playwright」と検索をし、おそらく一番上に表示される「Playwright Test for VSCode」をインストールしましょう。

インストールが完了するとエディターのサイドバーに三角ビーカーのアイコンが表示されていると思います。

テストの実行

サイドバーの三角ビーカーをクリックすると、tests/以下のテストが表示されていると思います。
再生ボタンを押すことで実行することが可能です。テストファイルの方にも同様に各テストの先頭行に再生ボタンが表示されます。

成功したテストは緑のチェックマーク、失敗したテストは赤のバツマークがつきます。

実行ブラウザの変更

拡張機能を入れる前はplaywright.config.tsのprojectsを書き加えたり、コメントアウトしたりして実行するブラウザを変えていました。 拡張機能の場合は三角ビーカーをクリック、下画像の「Select Configuration」をクリック、「既定のプロファイルの選択」をクリックする。 下画像のようなセレクトボックスが表示されるのでここで実行したいプロジェクトを選択して、OKを押せば簡単に実行ブラウザを変えることが可能です。

ヘッドレスモードの選択

拡張機能を入れる前はheadressをfalseにすることで実行中の画面を表示していましたが、テストの中にはわざわざ画面で見る必要のないものもあると思います。そのようなテストを実行するたびにheadressモードにしたりするのはとても面倒です。
拡張機能の左下、「Show browser」というチェックボックスがあります。
ここにチェックを入れるとheadressをfalseにしている状態と同じになります。チェックを外すとheadressモードになります。
playwright.config.tsに書いたheadressの設定は消さないとチェックしてもしなくても画面が表示されてしまうので注意です。

要素の取得

「Show browser」の下にある「Pick locator」をクリックするとブラウザが立ち上がります。そのブラウザでテストしたい画面に移り、欲しい要素をクリックすると、下画像のようにVSCode上部に要素のコードを記してくれます。
簡単に要素を取得したい分にはこれだけで十分です。

テストコードの生成

「Pick locator」の下にある「Record new」をクリックするとブラウザが立ち上がります。 ブラウザが立ち上がるとともに、VSCode上で新たなテストファイルも作成され、テストの雛形が書かれていると思います。 立ち上がったブラウザ上で操作をすると、全てこのファイル内にコードが生成されていきます。コードジェネレータと同じです。コマンドでジェネレータを立ち上げなくて済むのでかなり楽です。
テストの大枠をジェネレータに生成してもらい、細かい部分を自分で修正したりすることでかなり効率化できると思います。

既存のテストファイルにコードを生成して欲しい方は「Record at cursor」をクリックしてください。 コードを生成して欲しいファイルの適当な行を選択しておきましょう。 立ち上がったブラウザで操作すると、選択した行にコードが書き加えられていきます。
例えば、「簡単なテストを書こう」のテストと同じ操作をすると下記のようなコードがexample.spec.tsに生成されました。

await page.goto('https://www.google.com/');
await page.getByRole('combobox', { name: '検索' }).click();
await page.getByRole('combobox', { name: '検索' }).press('Enter');
await page.getByRole('link', { name: '企業の成長を支援するクラウドサービス | 株式会社ラクス ラクス https://www.rakus.co.jp' }).click();

検索欄への文字入力などが認識されていませんが、そこは自分で付け足せば、簡単にテストが作れます。
とても便利なのでどんどん使ってください。

おわりに

今回はPlaywrightを初めて書く人やE2Eに興味を持っている方に向けて、簡単なテストの例と拡張機能についてご紹介させていただきました。
Playwrightは直感的にテストを書くことができるので初めての人でもすぐに飛びつくことができ、コードジェネレータと組み合わせることで高速にテストコードを生み出すことも可能です。
まだまだ紹介していない機能がありますので、公式サイトを見ていただけばなと思います。
とても長い記事になりましたが、ここまで読んでくださった方、ありがとうございます。
これを機にPlaywrightを使っていただければ、とても嬉しいです。

ラクスの技術 / デザイン情報サイト
Copyright © RAKUS Co., Ltd. All rights reserved.