🌊

JetBrains AquaでPlaywriteのE2Eテストを書いてみた

2024/06/30に公開2

はじめに

Aqua」は、JetBrains社が開発したテスト自動化に特化したIDE(統合開発環境)です。
テストコード作成やテスト実行が効率的におこなえるよう、以下機能などが備わっています。

  • E2Eフレームワーク: Selenium、Playwright、Cypressをサポート。
  • コーディング支援: Java、Kotlin、Python、JavaScript、TypeScriptなどの言語対応。
  • Webインスペクタ: テスト対象のロケーターの検証や、CSSやXPathの指定を補完。
  • HTTPクライアント: テスト対象のAPIを呼び出すためのHTTPクライアントを内蔵。
  • AIアシスタント: テストの作成やコード補完をAIで支援(有料オプション)。
  • Dockerサポート: Dockerコンテナを利用しテストを実行可能。
  • データベース接続: データベースに登録したデータを利用したテストが可能。
  • ユニットテスト: JUnit、TestNG、pytest、Jest、Mochaなどのフレームワークに対応。

30日間の試用期間があり、個人で非商用の場合は無料で利用できます。
プレビュー版から機能追加され、2024年5月に一般公開されました。
この記事は、AquaでPlaywriteのE2Eテストを実行してみた時の備忘録です。

https://www.jetbrains.com/ja-jp/aqua/

Aquaのインストール

Aquaは単体のインストーラー、またはJetBrains Toolboxアプリからインストールできます。
どちらでインストールする場合も、Aquaの利用にはJetBrainsアカウントが必要です。
インストールの詳細やシステム要件は、インストールガイドを参照ください。

  1. ダウンロードページからインストーラーをダウンロードします。
  2. インストーラーのウィザードに従って、インストールします。
  3. JetBrainsアカウントを作成します。 ※既に作成済みの場合は不要
  4. JetBrainsにログインして、利用を開始します。

プロジェクトを作成する

まず、Playwrite用のプロジェクトを作成します。

  1. 「New Project」からプロジェクトを作成します。
  2. Generatorsのリストから「Playwrite」を選択します。
  3. プロジェクト名を入力して、「Create」をクリックします。
  4. コンソールでいくつか質問されるので、テストコードの言語、テスト保存先フォルダ、GitHub Actionsワークフローの追加有無、Playwrightブラウザのインストール有無を指定します。
  5. Playwriteがインストールされたら準備完了です。

サンプルのテストコードを実行する

プロジェクト内に自動作成される、サンプルのテストを実行してみます。

  1. テスト保存先フォルダ「tests」にある「example.spec.ts」というファイルを開きます。
  2. Playwrightのサイトを検証する2つのテスト、「has title」と「get started link」があります。
  3. 「has title」のテストを実行します。
  4. ページタイトルに「Playwright」の文字が含まれるか確認するテストが成功しました!
  5. HTML形式のレポートは、「playwright-report」フォルダに出力されたファイルで確認できます。

Webインスペクタを使ってテストコードを追加する

Webインスペクタはブラウザの開発者ツールの様な機能で、
Webサイトをプレビュー表示し、テスト対象の要素をDOMやXPathを調査できます。
要素を一意に特定する、ロケーターの自動生成機能が便利そうです。

ここでは「GET STARTED」ボタンをクリックするテストを追加してみます。

  1. Playwrightのサイトを開くコードを記述します。
    goto()など、Playwrightの関数がサジェスト表示されます🙌
  2. 画面右端の「Web Inspector」アイコンをクリックし、Webインスペクタを開きます。
  3. WebインスペクタのアドレスバーにPlaywrightサイトのURLを入力し、プレビュー表示します。
  4. Locators Evaluatorの「Select Element in Page」をクリックします。
  5. プレビュー画面で「GET STARTED」をクリックして、要素を取得します。
  6. Locators Evaluatorに「GET STARTED」のロケーター候補や、DOM構造が表示されます。
  7. ロケーターの指定方法はいろいろありますが、ここではロール(役割)で指定します。
    「Add Element to Code By」メニューからRoleをクリックします。
  8. getByRole()で要素を取得するコードが自動挿入されました。
  9. 「GET STARTED」の要素をクリックするコードを追加します。
  10. 「GET STARTED」のクリック後に画面遷移できたか確認するテストも追加するため、
    Webインスペクタで「GET STARTED」のリンク先ページの要素を取得します。
    プレビュー画面で「GET STARTED」をクリックすると、「Installation」ページに遷移しました。
    でもなぜかページ背景が暗い、、、プレビュー表示はブラウザの描画と差異があるようです😢
  11. 「Select Element in Page」機能で、見出しの「Installation」の要素を取得します。
  12. 「Add Element to Code By」メニューからRoleをクリックします。
  13. 「Installation」の要素を取得するコードが自動挿入されました。
  14. 「Installation」の要素が画面に表示されているか検証するコード
    expect({locator}.toBeVisible()を追加します。

追加したテストコードを実行する

以下がWebインスペクタやコード補完を利用しつつ、追加したテストコードです。

test('click get started', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  const linkGetStarted = page.getByRole("link", {name: "Get started"});
  await linkGetStarted.click();

  const h1Installation = page.getByRole("heading", {name: "Installation"});
  await expect(h1Installation).toBeVisible();
});

テストを実行して、成功することも確認できました🎊

サンプルとして用意されているテスト「get started link」と比較すると、
ロケーターを変数に格納するかどうかの違いはありますが、ほぼ同じコードが書けました。

おわりに

Webインスペクタは、半自動でロケーターを生成できるため、
Playwrightのテストジェネレーターにより、意図したテストコードを書きやすそうです。

まだWebインスペクタしか試せていませんが、Aquaの他の便利そうな機能や、
Aquaと統合可能なJetBrainsの他製品も興味深いです🧐

コラボスタイル Developers

Discussion

Masaru HoriokaMasaru Horioka

こんにちは。貴重な記事ありがとうございます!

でもなぜかページ背景が暗い、、、プレビュー表示はブラウザの描画と差異があるようです😢

は問題として報告し、 https://youtrack.jetbrains.com/issue/AQUA-1013 に問題として登録してもらいました。

TETRERTETRER

Aqua開発プロジェクトへ報告いただき、ありがとうございます!
Mac版での不具合だったようですね。
問題を見つけたら今後の改善のため、私もissue登録するようにしていきたいと思います🫡