E2Eテストにおけるロケーター
E2Eテスト（End-to-Endテスト）におけるロケーターとは、ウェブページやアプリケーションの要素（ボタン、テキストフィールド、リンクなど）を特定して操作するために使用される識別子のことです。
ロケーターは、テスト自動化ツールがアプリケーションのUI要素を認識し、テストシナリオに従って正しい操作を行うために必要です。
例えば以下のような種類があります。
1. ID
HTML要素に指定されているid属性を基に要素を特定します。
IDはページ内で一意であるため、最も信頼性が高い方法です。
<input id="username">
ロケーター: #username
2. クラス名
要素のclass属性を使って特定します。
同じクラス名を持つ複数の要素が存在する可能性があるため、他のロケーターと組み合わせて使われることが多いです。
<button class="submit-button">Submit</button>
ロケーター: .submit-button
3. タグ名
HTMLのタグ名を使って要素を特定します。
inputやdivなどのタグに基づいて検索されますが、タグ名のみでは多くの要素が一致する可能性があるため、限定的に使用されます。
<input type="text">
ロケーター: input
PlaywrightでE2Eテストを行う場合のlocatorの書き方
Playwrightは、ウェブアプリケーションのE2E（End-to-End）テストを行うためのツールであり、要素を特定するためのロケーターとして様々な方法を提供しています。
一般的な方法は、CSSセレクタ、XPath、テキスト、または属性に基づく方法です。
以下に、Playwrightでのロケーターの書き方の例を示します。
1. CSSセレクタを使用する場合:
const element = await page.$('button'); // <button>要素を見つける
2. XPathを使用する場合:
const element = await page.$x('//button[contains(text(), "Submit")]'); // テキストが"Submit"の<button>要素を見つける
3. テキストを使用する場合:
const element = await page.locator('button').withText('Submit'); // テキストが"Submit"のボタンを見つける
4. 属性に基づく場合:
const element = await page.locator('input[type="text"]'); // type属性が"text"の<input>要素を見つける
これらの例では、page.$()、page.$x()、page.locator()などのPlaywrightのAPIを使用して要素を取得しています。
$()はCSSセレクタ、$x()はXPath、locator()はテキストや属性を基にした要素のロケーションを行います。
なぜawaitが必要になるのか
Playwrightを含む多くのモダンなJavaScriptフレームワークやライブラリは、非同期処理を利用しています。
非同期処理は、ウェブアプリケーションやネットワークリクエストなど、時間のかかる操作を効率的に処理するための手法です。
JavaScriptにおいて、非同期処理は通常、Promiseと呼ばれるオブジェクトを返す関数を使用して実装されます。
Promiseは、将来のある時点で値やエラーを提供する非同期操作を表現します。
awaitは、Promise同様非同期操作を行うことができますが、実装方法が全く異なります。
awaitはasync関数の中でのみ使用でき、その行の処理が完了するまで次の行に進まず、非同期操作の完了を待ちます。
これにより、非同期操作の結果を取得し、それを処理することができます。
PlaywrightのAPIメソッド（たとえば、page.$()やpage.$x()など）は非同期操作を行うため、それらを使用する際にはawaitを使用する必要があります。
ウェブページのロードや要素の検索などの操作は時間がかかる可能性があるため、非同期的に処理が行われるからです。
例えば、次のコードでは、page.$()メソッドが非同期であるため、その結果を取得するためにawaitが必要です。
const element = await page.$('button'); // ボタン要素を取得する非同期操作
もしawaitを使わない場合、非同期操作の完了を待たずに次の行が実行されてしまい、予期しない結果が生じる可能性があるので気をつけましょう。
