FrameLocator
FrameLocator は、ページ上の iframe
へのビューを表します。これは、iframe
を取得し、その iframe 内の要素を特定するのに十分なロジックをキャプチャします。FrameLocator は、Locator.contentFrame()、Page.frameLocator()、または Locator.frameLocator() メソッドのいずれかで作成できます。
Locator locator = page.locator("#my-frame").contentFrame().getByText("Submit");
locator.click();
厳密性
フレームロケーターは厳密です。これは、フレームロケーターに対するすべての操作は、与えられたセレクターに複数の一致する要素がある場合に例外をスローすることを意味します。
// Throws if there are several frames in DOM:
page.locator(".result-frame").contentFrame().getByRole(AriaRole.BUTTON).click();
// Works because we explicitly tell locator to pick the first frame:
page.locator(".result-frame").first().contentFrame().getByRole(AriaRole.BUTTON).click();
Locator から FrameLocator への変換
iframe
を指す Locator オブジェクトがある場合、Locator.contentFrame() を使用して FrameLocator に変換できます。
FrameLocator から Locator への変換
FrameLocator オブジェクトがある場合、FrameLocator.owner() を使用して、同じ iframe
を指す Locator に変換できます。
メソッド
frameLocator
バージョン v1.17 で追加iframe を操作する場合、iframe に入り、その iframe 内の要素を選択できるようにするフレームロケーターを作成できます。
使用例
FrameLocator.frameLocator(selector);
引数
戻り値
getByAltText
バージョン v1.27 で追加alt テキストで要素を特定できます。
使用例
たとえば、このメソッドは alt テキスト "Playwright logo" で画像を検索します。
<img alt='Playwright logo'>
page.getByAltText("Playwright logo").click();
引数
-
要素を特定するためのテキスト。
-
options
FrameLocator.GetByAltTextOptions
(オプション)
戻り値
getByLabel
バージョン v1.27 で追加関連付けられた <label>
または aria-labelledby
要素のテキスト、または aria-label
属性によって入力要素を特定できます。
使用例
たとえば、このメソッドは次の DOM でラベル "Username" および "Password" で入力を検索します。
<input aria-label="Username">
<label for="password-input">Password:</label>
<input id="password-input">
page.getByLabel("Username").fill("john");
page.getByLabel("Password").fill("secret");
引数
-
要素を特定するためのテキスト。
-
options
FrameLocator.GetByLabelOptions
(オプション)
戻り値
getByPlaceholder
バージョン v1.27 で追加プレースホルダーテキストで入力要素を特定できます。
使用例
たとえば、次の DOM 構造を考えてみましょう。
<input type="email" placeholder="name@example.com" />
プレースホルダーテキストで特定した後、入力を埋めることができます。
page.getByPlaceholder("name@example.com").fill("playwright@microsoft.com");
引数
-
要素を特定するためのテキスト。
-
options
FrameLocator.GetByPlaceholderOptions
(オプション)
戻り値
getByRole
バージョン v1.27 で追加ARIA ロール、ARIA 属性、および アクセシブルネーム で要素を特定できます。
使用例
次の DOM 構造を考えてみましょう。
<h3>Sign up</h3>
<label>
<input type="checkbox" /> Subscribe
</label>
<br/>
<button>Submit</button>
各要素を暗黙的なロールで特定できます。
assertThat(page
.getByRole(AriaRole.HEADING,
new Page.GetByRoleOptions().setName("Sign up")))
.isVisible();
page.getByRole(AriaRole.CHECKBOX,
new Page.GetByRoleOptions().setName("Subscribe"))
.check();
page.getByRole(AriaRole.BUTTON,
new Page.GetByRoleOptions().setName(
Pattern.compile("submit", Pattern.CASE_INSENSITIVE)))
.click();
引数
-
role
enum AriaRole { ALERT, ALERTDIALOG, APPLICATION, ARTICLE, BANNER, BLOCKQUOTE, BUTTON, CAPTION, CELL, CHECKBOX, CODE, COLUMNHEADER, COMBOBOX, COMPLEMENTARY, CONTENTINFO, DEFINITION, DELETION, DIALOG, DIRECTORY, DOCUMENT, EMPHASIS, FEED, FIGURE, FORM, GENERIC, GRID, GRIDCELL, GROUP, HEADING, IMG, INSERTION, LINK, LIST, LISTBOX, LISTITEM, LOG, MAIN, MARQUEE, MATH, METER, MENU, MENUBAR, MENUITEM, MENUITEMCHECKBOX, MENUITEMRADIO, NAVIGATION, NONE, NOTE, OPTION, PARAGRAPH, PRESENTATION, PROGRESSBAR, RADIO, RADIOGROUP, REGION, ROW, ROWGROUP, ROWHEADER, SCROLLBAR, SEARCH, SEARCHBOX, SEPARATOR, SLIDER, SPINBUTTON, STATUS, STRONG, SUBSCRIPT, SUPERSCRIPT, SWITCH, TAB, TABLE, TABLIST, TABPANEL, TERM, TEXTBOX, TIME, TIMER, TOOLBAR, TOOLTIP, TREE, TREEGRID, TREEITEM }
#必須の aria ロール。
-
options
FrameLocator.GetByRoleOptions
(オプション)-
通常、
aria-checked
またはネイティブの<input type=checkbox>
コントロールによって設定される属性。aria-checked
について詳しくはこちらをご覧ください。 -
通常、
aria-disabled
またはdisabled
によって設定される属性。note他のほとんどの属性とは異なり、
disabled
は DOM 階層を介して継承されます。aria-disabled
について詳しくはこちらをご覧ください。 -
setExact
boolean (オプション)バージョン v1.28 で追加#setName が完全に一致するかどうか:大文字と小文字を区別し、文字列全体。デフォルトは false です。setName が正規表現の場合は無視されます。完全一致でも空白はトリムされることに注意してください。
-
通常、
aria-expanded
によって設定される属性。aria-expanded
について詳しくはこちらをご覧ください。 -
setIncludeHidden
boolean (オプション)#非表示要素を一致させるかどうかを制御するオプション。デフォルトでは、ARIA によって定義されている、非表示でない要素のみがロールセレクターによって一致されます。
aria-hidden
について詳しくはこちらをご覧ください。 -
通常、ロール
heading
、listitem
、row
、treeitem
に存在する数値属性。<h1>-<h6>
要素のデフォルト値があります。aria-level
について詳しくはこちらをご覧ください。 -
setName
String | Pattern (オプション)#アクセシブルネーム を一致させるためのオプション。デフォルトでは、一致は大文字と小文字を区別せず、部分文字列を検索します。setExact を使用して、この動作を制御します。
アクセシブルネーム について詳しくはこちらをご覧ください。
-
通常、
aria-pressed
によって設定される属性。aria-pressed
について詳しくはこちらをご覧ください。 -
通常、
aria-selected
によって設定される属性。aria-selected
について詳しくはこちらをご覧ください。
-
戻り値
詳細
ロールセレクターは、アクセシビリティ監査および適合性テストを置き換えるものではありませんが、ARIA ガイドラインに関する早期フィードバックを提供します。
多くの html 要素には、ロールセレクターによって認識される暗黙的に定義されたロールがあります。サポートされているすべてのロールはこちらにあります。ARIA ガイドラインは、デフォルト値に role
および/または aria-*
属性を設定して、暗黙的なロールと属性を複製することを推奨していません。
getByTestId
バージョン v1.27 で追加テスト ID で要素を特定します。
使用例
次の DOM 構造を考えてみましょう。
<button data-testid="directions">Itinéraire</button>
テスト ID で要素を特定できます。
page.getByTestId("directions").click();
引数
戻り値
詳細
デフォルトでは、data-testid
属性がテスト ID として使用されます。必要に応じて別のテスト ID 属性を設定するには、Selectors.setTestIdAttribute() を使用します。
getByText
バージョン v1.27 で追加指定されたテキストを含む要素を特定できます。
アクセシブルロールなどの別の基準で一致させ、テキストコンテンツでフィルター処理できる Locator.filter() も参照してください。
使用例
次の DOM 構造を考えてみましょう。
<div>Hello <span>world</span></div>
<div>Hello</div>
テキスト部分文字列、完全一致文字列、または正規表現で特定できます。
// Matches <span>
page.getByText("world");
// Matches first <div>
page.getByText("Hello world");
// Matches second <div>
page.getByText("Hello", new Page.GetByTextOptions().setExact(true));
// Matches both <div>s
page.getByText(Pattern.compile("Hello"));
// Matches second <div>
page.getByText(Pattern.compile("^hello$", Pattern.CASE_INSENSITIVE));
引数
-
要素を特定するためのテキスト。
-
options
FrameLocator.GetByTextOptions
(オプション)
戻り値
詳細
テキストによるマッチングは、完全一致であっても常に空白を正規化します。たとえば、複数のスペースを 1 つに、改行をスペースに変換し、先頭と末尾の空白を無視します。
タイプ button
および submit
の入力要素は、テキストコンテンツの代わりに value
で一致します。たとえば、テキスト "Log in"
で検索すると、<input type=button value="Log in">
が一致します。
getByTitle
バージョン v1.27 で追加title 属性で要素を特定できます。
使用例
次の DOM 構造を考えてみましょう。
<span title='Issues count'>25 issues</span>
タイトルテキストで特定した後、問題の数を確認できます。
assertThat(page.getByTitle("Issues count")).hasText("25 issues");
引数
-
要素を特定するためのテキスト。
-
options
FrameLocator.GetByTitleOptions
(オプション)
戻り値
locator
バージョン v1.17 で追加このメソッドは、ロケーターのサブツリー内で指定されたセレクターに一致する要素を検索します。また、Locator.filter() メソッドと同様に、フィルターオプションも受け入れます。
使用例
FrameLocator.locator(selectorOrLocator);
FrameLocator.locator(selectorOrLocator, options);
引数
-
selectorOrLocator
String | Locator#DOM 要素を解決するときに使用するセレクターまたはロケーター。
-
options
FrameLocator.LocatorOptions
(オプション)-
この相対ロケーターに一致する要素を含む結果にメソッドの結果を絞り込みます。たとえば、
text=Playwright
を持つarticle
は、<article><div>Playwright</div></article>
に一致します。内部ロケーターは、外部ロケーターに対して相対的でなければならず、ドキュメントルートではなく、外部ロケーターの一致から始まるクエリが実行されます。たとえば、
<article><content><div>Playwright</div></content></article>
内にdiv
を持つcontent
を見つけることができます。ただし、article div
を持つcontent
を検索すると失敗します。これは、内部ロケーターが相対的でなければならず、content
の外部の要素を使用すべきではないためです。外部ロケーターと内部ロケーターは、同じフレームに属している必要があることに注意してください。内部ロケーターに FrameLocator を含めることはできません。
-
setHasNot
Locator (オプション)バージョン v1.33 で追加#内部ロケーターに一致する要素を含まない要素に一致します。内部ロケーターは外部ロケーターに対してクエリされます。たとえば、
div
を持たないarticle
は、<article><span>Playwright</span></article>
に一致します。外部ロケーターと内部ロケーターは、同じフレームに属している必要があることに注意してください。内部ロケーターに FrameLocator を含めることはできません。
-
setHasNotText
String | Pattern (オプション)バージョン v1.33 で追加#子要素または子孫要素のどこかに指定されたテキストを含まない要素に一致します。string が渡されると、マッチングは大文字と小文字を区別せず、部分文字列を検索します。
-
setHasText
String | Pattern (オプション)#子要素または子孫要素のどこかに指定されたテキストを含む要素に一致します。string が渡されると、マッチングは大文字と小文字を区別せず、部分文字列を検索します。たとえば、
"Playwright"
は<article><div>Playwright</div></article>
に一致します。
-
戻り値
owner
バージョン v1.43 で追加このフレームロケーターと同じ iframe
を指す Locator オブジェクトを返します。
どこかで取得した FrameLocator オブジェクトがあり、後で iframe
要素を操作したい場合に便利です。
逆の操作には、Locator.contentFrame() を使用します。
使用例
FrameLocator frameLocator = page.locator("iframe[name=\"embedded\"]").contentFrame();
// ...
Locator locator = frameLocator.owner();
assertThat(locator).isVisible();
戻り値
非推奨
first
バージョン v1.17 で追加代わりに Locator.first() の後に Locator.contentFrame() を続けて使用してください。
最初の一致するフレームへのロケーターを返します。
使用例
FrameLocator.first();
戻り値
last
バージョン v1.17 で追加代わりに Locator.last() の後に Locator.contentFrame() を続けて使用してください。
最後の一致するフレームへのロケーターを返します。
使用例
FrameLocator.last();
戻り値
nth
バージョン v1.17 で追加代わりに Locator.nth() の後に Locator.contentFrame() を続けて使用してください。
n 番目の一致するフレームへのロケーターを返します。ゼロベースであり、nth(0)
は最初のフレームを選択します。
使用例
FrameLocator.nth(index);
引数
戻り値