Web UI テスト自動化ツールの紹介

テストの認識

プロジェクトを開くと、PhpStorm は Cypress または Playwright で記述されたテストを自動的に検出します。 認識されたテストは、ガターの アイコンをクリックして実行し、IDE のツールを使用して 分析/デバッグできます。

コーディング支援

提供されるコーディング支援機能には、インテリジェントな コード補完、 ナビゲーション、 構文のハイライト 、フレームワーク固有の関数と式のサポートが含まれます。

たとえば、コードエディターでロケーターまたはその部分文字列を入力し始めると、自動補完機能によって選択できる要素のリストが表示されます。 さらに、選択された要素は Web インスペクター でハイライトされるため、正しいロケーターを選択しやすくなります。

ロケーターの生成と検証

Web インスペクター ツールウィンドウを使用すると、Web アプリケーションを表示し、自動テストに必要な ページ要素をキャプチャーできます。 Web ページで必要な要素を選択すると、PhpStorm は一意の CSS または XPath ロケーターを生成し、それをソースコードに 追加するのに役立ちます。

さらに、PhpStorm は Playwright で使用される ロールベースのロケーターを生成できます。 これらのロケーターは、要素のロール (ボタンやチェックボックスなど) を反映するように設計されており、要素の識別が容易になります。

さらに、 Web インスペクター は、コード内のロケータが有効であり、Web ページ上の正しい要素を指しているかどうかを 確認するのに役立ちます。 コードエディターのロケータの横にある アイコンをクリックすると、 Web インスペクター が開き、対応する要素が選択され、ロケータが検証されます。

テストの実行 / デバッグ構成を管理する

実行 / デバッグ構成は、何を実行するか、実行中にどのパラメーターや環境を使用するかを定義する一連の起動プロパティです。

テスト用にさまざまな 構成セットを作成し、必要に応じて瞬時に切り替えることができます。

テスト実行の詳細

テストの実行が完了すると、各テストのログやコンソール出力などの包括的な結果が提供され、簡単に 調べることができます。 結果をフィルタリングして、失敗したテストや無視されたテストをすばやく移動し、実行時間を分析できます。

デバッガー

デバッガーは、コードのテストやトラブルシューティングに使用されるツールです。 ステップごとにコードを実行でき、各ステップで何が起こるかを知ることができます。

Playwright テスト用のデバッガーはすぐに使用できます。 ブレークポイントを設定して実行を一時停止し、コードを分析できます。