【Playwright】Locator取得の逆引きメモ

Posted at 2025-08-20

はじめに

Locator取得する際に、個人的によく使うものを逆引きメモでまとめました。
Locatorの詳細については、公式（Locators | Playwright）を参照ください。
気になった点など随時更新予定です。

基本的にrole属性で取得できるものはrole属性で取得する。
Playwright公式でも推奨されている。

sample.html

<input type="text" name="user-name" placeholder="ユーザー名を入力" maxlength="50" class="user-name" id="user-name-input">
<button>検索</button>

sample.spec.ts

let input = await page.getByRole("textbox", { name: "ユーザー名を入力" });
let button = await page.getByRole("button", { name: "検索" });

アクセシブル名はデバッグツールで確認できる。下記参考。
アクセシビリティツリー[AOM]について調べてみた

sample.html

<input type="text" name="user-name" placeholder="ユーザー名を入力" maxlength="50" class="user-name" id="user-name-input">
<button>検索</button>

sample.spec.ts

let button = await page.getByText("検索");

sample.html

<input type="text" name="user-name" placeholder="ユーザー名を入力" maxlength="50" class="user-name" id="user-name-input">

sample.spec.ts

let input = await page.getByPlaceholder('ユーザー名を入力');

sample.html

<input type="text" name="user-name" placeholder="ユーザー名を入力" maxlength="50" class="user-name" id="user-name-input">

sample.spec.ts

let userNameInput = await page.locator(".user-name");

sample.spec.ts

let userNameInput = await page.locator("#user-name-input");

sample.spec.ts

 let userNameInput = await page.locator('input[id="user-name-input"]');

.filter()を使用して、対象Locatorを子として持つ要素を取得できる。

sample.html

<li><label>Hello</label></li>
<li><label>World</label></li>

sample.spec.ts

const child = await page.getByText('Hello', { exact: true });
const parent = await page.getByRole('listitem').filter({ has: child });