ロケーター（Locator）

ロケーターとは、テストがブラウザードライバーに「どの要素を操作するか」を伝える手段です。CSS セレクター、XPath 式、要素の id のほか、「アクセシブルネームが Sign in のボタン」のような、より高レベルなクエリも使えます。ロケーターをうまく選べるかどうかが、UI テストスイートがデザイン刷新を乗り越えられるかを左右する最大の要因です。

例

同じボタンを 3 通りの方法で特定します。

// Playwright: user-facing, preferred
page.getByRole('button', { name: 'Sign in' });

// Playwright: dedicated test attribute
page.getByTestId('login-submit');

// Playwright: CSS, tied to markup structure
page.locator('form.login > button.btn-primary');

// Selenium 4
driver.findElement(By.id("login-submit"));
driver.findElement(By.cssSelector("[data-testid='login-submit']"));

良いロケーターの条件

• ユーザーに見えるものを表している。 ロール、ラベル、表示テキストが変わるのはユーザー向けの振る舞いが変わったときだけであり、それはまさにテストを更新すべきタイミングです。
• 一意である。 Playwright のロケーターは strict（厳格）です。2 つの要素に一致するロケーターに対して操作すると、黙って最初の要素を選ぶのではなく例外を投げます。
• レイアウトに依存しない。 div > div:nth-child(3) > span のような長いパスは、ラッパー要素が 1 つ追加されるだけで壊れます。
• ビルドをまたいで安定している。 CSS-in-JS ツールが生成するクラス名や自動採番される id は、デプロイのたびに変わります。

よく使われる優先順位は、ロールとアクセシブルネーム、次にラベルやプレースホルダー、次に開発者と合意した data-testid、その次に CSS、最後の手段として XPath です。

遅延評価と即時評価

Playwright の Locator は遅延評価（lazy）です。クエリを保持しておき、操作やアサーションのたびに解決し直すため、古くなる（stale になる）ことがありません。一方、Selenium の findElement は即時評価（eager）で、その時点に存在していたノードへの WebElement 参照を返します。DOM が再レンダリングされるとその参照は stale になり得るため、Selenium のコードでは通常 By オブジェクトを保持し、必要になった時点で要素を探します。