🌊

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

TETRER

2024/06/30に公開

はじめに

「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でPlaywrightのE2Eテストを実行してみた時の備忘録です。

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

Aquaのインストール

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

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

プロジェクトを作成する

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

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

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

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

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

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

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

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

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