PlaywrightによるHTML要素の指定

目次

HTML要素へのアクセス方法について

ページのテキストボックスやボタンなどを操作する為に、操作対象の要素を特定する必要があります。
Playwrightではロケーターの機能を使って要素を検索します。

ロケーターには以下のような実装が行えますので、目的に合ったものを使いましょう。
非推奨なものもあります。

  • page.locator("***").click() ※非推奨
  • page.getBy***("***").click()
  • page.click("***")
  • page.$("***").click()／page.$$("***").click() ※非推奨

page.locator("***").click()とpage.click("***")はCSSやXPathで要素を検索します。
page.getBy***("***").click()はpage.getByRole() などの目的に沿った検索用メソッドがあります。

ページの読み込み完了までの自動待機

ページの読み込み直後等はまだDOMが生成されていない場合がありますが、
ロケーターを使ってアクセスすればページの読み込み完了を待ってから要素を検索しますので、
待機処理は不要です。
30秒（デフォルト）経過しても読み込みが行われなければTimeoutErrorの例外が発生します。

ロケーターで見つからなかった場合や、複数の要素が見つかった場合

ロケーターで要素を検索した結果、見つからなかった場合には例外が発生します。
要素が複数見つかった場合も例外が発生しますが、page.locator("***").first().click()や .all()を使えばデータを指定してアクセスできます。

//先頭の要素 await page.locator("button").first().click();
//要素の全てにアクセス for(const tmp of await page.locator("button").all()){
    console.log(await tmp.getAttribute("id"));
}
await page.locator("button").filter({ hasText: /クリック/ })

参考

locators
ElementHandle
Auto-waiting

CSS／XPathを指定して要素を検索

CSS／XPathを指定して要素にアクセスするにはpage.locator()メソッドを使用します。
※locatorメソッドを使用する方法は推奨されていません。下に記載しているgetBy***APIが推奨されます。

CSSで指定する場合は以下のいずれかの記述になります。（cssは省略可能）

await page.locator('css=button').click();
await page.locator('button').click();

XPathで指定する場合は以下のいずれかの記述になります。（xpathは省略可能）
await page.locator('xpath=//button').click();
await page.locator('//button').click();
click()やfill()で指定する場合は以下のような記述になります。
await page.click("#buttonid1");
await page.fill("#passid1","test");

Role（役割）を指定して要素を検索

AREAという仕様によって、html要素にはそれぞれrole（役割）が定義されています。
page.getByRole()にroleを指定してhtml要素にアクセスします。

await page.getByRole(role, option).xxxx();
  • getByRole()は戻り値としてlocatorを返却します。
  • 第一引数はroleを文字列で指定します。
  • 第二引数でオプションを指定します。省略可能です。
  • 使用可能なrole／optionの値は、下の参照先リンクを参考にしてください。

実装方法

						//checkboxのlocatorを取得し、チェックONにする。optionは省略可能
						await page.getByRole("checkbox").check();
					  
						//h3タグの以下の文言に一致するlocatorを取得する
						console.log(page.getByRole("heading", { name: "Web操作テストページ" }));
					  
						//buttonに「ボタン１」と表示されているlocatorを取得し、クリックする。
						await page.getByRole("button", { name: "ボタン１" }).click();
					  
						//buttonに「sub」を含むlocatorを取得し、クリックする。
						await page.getByRole('button', { name: /sub/i }).click(); //nameを正規表現で指定
					
						await page.GotoAsync("https://web.biz-prog.net/test/testpage.html");

						//checkboxのlocatorを取得し、チェックONにする。optionは省略可能
						await page.GetByRole(AriaRole.Checkbox).CheckAsync();
			
						//h3タグの以下の文言に一致するlocatorを取得する
						Debug.WriteLine(page.GetByRole(AriaRole.Heading, new () { Name = "Web操作テストページ" }));
			
						//buttonに「ボタン１」と表示されているlocatorを取得し、クリックする。
						await page.GetByRole(AriaRole.Button, new() { Name = "ボタン１" }).ClickAsync();
			
						//buttonに「sub」を含むlocatorを取得し、クリックする。
						await page.GetByRole(AriaRole.Button, new() { NameRegex = new Regex("sub", RegexOptions.IgnoreCase) }).ClickAsync(); //nameを正規表現で指定
					
					    page.goto("https://web.biz-prog.net/test/testpage.html")

						#checkboxのlocatorを取得し、チェックONにする。optionは省略可能
						page.get_by_role("checkbox").check()

						#h3タグの以下の文言に一致するlocatorを取得する
						print(page.get_by_role("heading", name = "Web操作テストページ"))

						#buttonに「ボタン１」と表示されているlocatorを取得し、クリックする。
						page.get_by_role("button", name = "ボタン１").click()

						#buttonに「sub」を含むlocatorを取得し、クリックする。
						page.get_by_role("button", name = re.compile("sub", re.IGNORECASE)).click() #nameを正規表現で指定

参考

Locate by role
getByRole

テキストを指定して要素を検索

page.getByText()は指定したテキストを含む要素を検索します。
テキストは、完全一致、部分一致、正規表現で指定します。

await page.getByText(テキスト, option).xxxx();
  • 第一引数は検索するテキストを文字列で指定します。正規表現を指定できます。
  • 第二引数でオプションで完全一致にするかを指定します。省略可能です。

実装方法

						await page.goto('https://web.biz-prog.net/test/testpage.html');

						await page.getByText("チェック", { exact: true }).check();
					
						await page.GotoAsync("https://web.biz-prog.net/test/testpage.html");

						await page.GetByText("チェック", new () { Exact = true }).CheckAsync();
					
					    page.goto("https://web.biz-prog.net/test/testpage.html")

    					page.get_by_text("チェック", exact = True).check()

参考

Locate by text
getByText

ラベルテキストを指定して要素を検索

page.getByLabel()はlabelのテキストやaria-label属性のテキストを指定して要素を検索します。

await page.getByLabel(テキスト, option).xxxx();
  • 第一引数は検索するテキストを文字列で指定します。正規表現を指定できます。
  • 第二引数でオプションで完全一致にするかを指定します。省略可能です。

実装方法

						await page.goto('https://web.biz-prog.net/test/testpage.html');

						await page.getByLabel("チェック").check();
					
						await page.GotoAsync("https://web.biz-prog.net/test/testpage.html");

						await page.GetByLabel("チェック").CheckAsync();
					
					    page.goto("https://web.biz-prog.net/test/testpage.html")

    					page.get_by_label("チェック").check()

参考

Locate by label
getByLabel

プレースホルダーを指定して要素を検索

page.getByPlaceholder()はPlaceholderのテキストを指定して入力要素を検索します。

await page.getByPlaceholder(テキスト, option).xxxx();
  • 第一引数は検索するテキストを文字列で指定します。正規表現を指定できます。
  • 第二引数でオプションで完全一致にするかを指定します。省略可能です。

実装方法

						await page.goto('https://web.biz-prog.net/test/testpage.html');

						await page.getByPlaceholder("sample@example.com").fill("playwright@test.com");
					
						await page.GotoAsync("https://web.biz-prog.net/test/testpage.html");

						await page.GetByPlaceholder("sample@example.com").FillAsync("playwright@test.com");
					
					    page.goto("https://web.biz-prog.net/test/testpage.html")

					    page.get_by_placeholder("sample@example.com").fill("playwright@test.com")

参考

Locate by placeholder
getByPlaceholder

代替テキストを指定して要素を検索

page.getByAltText()は画像などで仕様する代替テキストを指定して要素を検索します。

await page.getByAltText(テキスト, option).xxxx();
  • 第一引数は検索するテキストを文字列で指定します。正規表現を指定できます。
  • 第二引数でオプションで完全一致にするかを指定します。省略可能です。

実装方法

						await page.goto('https://web.biz-prog.net/test/testpage.html');

						await page.getByAltText('画像').click();
					
						await page.GotoAsync("https://web.biz-prog.net/test/testpage.html");

						await page.GetByAltText("画像").ClickAsync();
					
					    page.goto("https://web.biz-prog.net/test/testpage.html")

    					page.get_by_alt_text("画像").click()

参考

Locate by placeholder
getByAltText

タイトルを指定して要素を検索

page.getByTitle()はtitle属性のテキストを指定して要素を検索します。

await page.getByTitle(テキスト, option).xxxx();
  • 第一引数は検索するテキストを文字列で指定します。正規表現を指定できます。
  • 第二引数でオプションで完全一致にするかを指定します。省略可能です。

実装方法

						await page.goto('https://web.biz-prog.net/test/testpage.html');

						console.log(await page.getByTitle('span title').innerText());
					
						await page.GotoAsync("https://web.biz-prog.net/test/testpage.html");

						Debug.WriteLine(await page.GetByTitle("span title").InnerTextAsync());
					
					    page.goto("https://web.biz-prog.net/test/testpage.html")

						print(page.get_by_title("span title").inner_text())

参考

Locate by title
getByTitle

iframe内の要素にアクセス

page.frameLocator()でiframeのlecatorを取得できます。

サンプル

						await page.goto('https://web.biz-prog.net/test/testpage.html');

						const frame = page.frameLocator("#inline_frame");
						frame.locator("#inputid1").fill("test");
					
						await page.GotoAsync("https://web.biz-prog.net/test/testpage.html");

						var frame = page.FrameLocator("#inline_frame");
						await frame.Locator("#inputid1").FillAsync("test");
					
					    page.goto("https://web.biz-prog.net/test/testpage.html")

						frame = page.frame_locator("#inline_frame")
						frame.locator("#inputid1").fill("test")

Shadow-root内の要素にアクセス

PlaywrightではShadowDOMは自動で展開されていますので、
ShadowDOMアクセス用のコードを書かなくても、locatorでそのままShadowDOM内の要素にアクセスができます。

サンプル

						await page.goto('https://web.biz-prog.net/test/testpage.html');

						await page.getByText("Shadow root test").locator("#inputid1").fill("test");
					
						await page.GotoAsync("https://web.biz-prog.net/test/testpage.html");

						await page.GetByText("Shadow root test").Locator("#inputid1").FillAsync("test");
					
					    page.goto("https://web.biz-prog.net/test/testpage.html")

    					page.get_by_text("Shadow root test").locator("#inputid1").fill("test")