Playwright｜ロケーター

ロケーターとはページ上の要素を見つける機能です。
Playwrightの主なロケーターメソッドはこちらです。

1. getByRole()

HTMLのアクセシビリティ属性に基づいて要素を検索します。

例えば「ボタン」をクリックしたいテストを書きたいとき
HTMLがこのように書かれていたとします

<div>
  <button>ログイン</button>
</div>

このHTMLに対してロールを探したい場合以下のように書きます。

await expect(
  page.getByRole('button', { name: 'ログイン' })
).toBeVisible();

getByRole()で指定可能な、よく使うロール例はこちらです。

HTMLのラベルテキストに基づいて要素を検索します。

<label for="searchbox">検索</label>
<input id="searchbox" type="text">

await expect(
  page.getByLabel(/検索/)
).toBeVisible();

HTMLのプレースホルダー属性を持つ要素を検索します。

<input type="text" placeholder="入力してください">

await expect(
  page.getByPlaceholder(/入力してください/)
).toBeVisible();

要素に含まれるテキストを検索します。

<nav>
  <span>ホーム</span>
</nav>

await expect(
  page.getByText(/ホーム/)
).toBeVisible();

HTMLのalt属性に基づいて画像等の要素を検索します。

<img src="cat.png" alt="ねこ">

await expect(
  page.getByAltText(/ねこ/)
).toBeVisible();

タイトル属性に基づいて要素を検索します。

<button title="これみて">詳細</button>

await expect(
  page.getByTitle(/これみて/)
).toBeVisible();

data-testid属性に基づいて要素を検索します。

<div data-testid="admin">管理者メニュー</div>

await expect(
  page.getByTestId('admin')
).toBeVisible();

CSSセレクターやXPathを使ったロケーターもあります。
構造に依存したテストとなるため、あまり使わない方が望ましいです。

CSSのタグ指定

await expect(
  page.locator('button')
).toBeVisible();

id指定

<button id="login-btn">ログイン</button>

await expect(
  page.locator('#login-btn')
).toBeVisible();

CSSセレクターで指定

await expect(
  page.locator('div > button')
).toBeVisible();

XPathで指定

await expect(
  page.locator('//button[text()="ログイン"]')
).toBeVisible();

ロケーターの選択で壊れにくいテストになります。
実装するうえでも下記の順で実装するのがおすすめです。

参考にしてみてください。