FrameLocator
FrameLocator 代表页面上 iframe
的视图。它捕获了检索 iframe
并在该 iframe 中定位元素的充分逻辑。FrameLocator 可以使用 Locator.contentFrame()、Page.frameLocator() 或 Locator.frameLocator() 方法创建。
Locator locator = page.locator("#my-frame").contentFrame().getByText("Submit");
locator.click();
严格性
Frame 定位器是严格的。这意味着如果多个元素匹配给定的选择器,则对 frame 定位器的所有操作都将抛出错误。
// 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 时,您可以创建一个 frame 定位器,该定位器将进入 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="[email protected]" />
您可以在通过占位符文本定位输入后填写它
page.getByPlaceholder("[email protected]").fill("[email protected]");
参数
-
用于定位元素的文本。
-
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
设置的属性。注意与大多数其他属性不同,
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。如有必要,使用 Selectors.setTestIdAttribute() 配置不同的测试 ID 属性。
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
(可选)
返回值
详情
按文本匹配始终会规范化空格,即使是完全匹配也是如此。例如,它将多个空格转换为一个空格,将换行符转换为空格,并忽略前导和尾随空格。
类型为 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#匹配在内部某处(可能在子元素或后代元素中)不包含指定文本的元素。当传递 字符串 时,匹配不区分大小写并搜索子字符串。
-
setHasText
String | Pattern (可选)#匹配在内部某处(可能在子元素或后代元素中)包含指定文本的元素。当传递 字符串 时,匹配不区分大小写并搜索子字符串。例如,
"Playwright"
匹配<article><div>Playwright</div></article>
。
-
返回值
owner
添加于版本: v1.43返回指向与此 frame 定位器相同的 iframe
的 Locator 对象。
当您在某处获得 FrameLocator 对象,并且稍后想要与 iframe
元素交互时,此方法很有用。
对于反向操作,请使用 Locator.contentFrame()。
用法
FrameLocator frameLocator = page.locator("iframe[name=\"embedded\"]").contentFrame();
// ...
Locator locator = frameLocator.owner();
assertThat(locator).isVisible();
返回值
已弃用
first
添加于版本: v1.17返回指向第一个匹配框架的定位器。
用法
FrameLocator.first();
返回值
last
添加于版本: v1.17请改用 Locator.last(),后跟 Locator.contentFrame()。
返回指向最后一个匹配框架的定位器。
用法
FrameLocator.last();
返回值
nth
添加于版本: v1.17请改用 Locator.nth(),后跟 Locator.contentFrame()。
返回指向第 n 个匹配框架的定位器。它是从零开始的,nth(0)
选择第一个框架。
用法
FrameLocator.nth(index);
参数
返回值