FrameLocator
FrameLocator 表示页面上 `iframe` 的一个视图。它捕获了足以检索 `iframe` 并在该 iframe 中定位元素的逻辑。FrameLocator 可以通过 locator.contentFrame()、page.frameLocator() 或 locator.frameLocator() 方法创建。
const locator = page.locator('#my-frame').contentFrame().getByText('Submit');
await locator.click();
严格性
帧定位器是严格的。这意味着如果一个给定的选择器匹配多个元素,所有对帧定位器的操作都将抛出错误。
// Throws if there are several frames in DOM:
await page.locator('.result-frame').contentFrame().getByRole('button').click();
// Works because we explicitly tell locator to pick the first frame:
await page.locator('.result-frame').contentFrame().first().getByRole('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'>
await page.getByAltText('Playwright logo').click();
参数
-
用于定位元素的文本。
-
options
Object (可选)
返回
getByLabel
新增于:v1.27允许通过关联的 <label>
或 aria-labelledby
元素的文本或 aria-label
属性来定位输入元素。
用法
例如,此方法将在以下 DOM 中通过标签“用户名”和“密码”找到输入
<input aria-label="Username">
<label for="password-input">Password:</label>
<input id="password-input">
await page.getByLabel('Username').fill('john');
await page.getByLabel('Password').fill('secret');
参数
-
用于定位元素的文本。
-
options
Object (可选)
返回
getByPlaceholder
新增于:v1.27允许通过占位符文本定位输入元素。
用法
例如,考虑以下 DOM 结构。
<input type="email" placeholder="name@example.com" />
您可以按占位符文本定位输入框后填充它
await page
.getByPlaceholder('name@example.com')
.fill('playwright@microsoft.com');
参数
-
用于定位元素的文本。
-
options
Object (可选)
返回
getByRole
新增于:v1.27允许根据元素的 ARIA 角色、ARIA 属性 和 可访问名称 来定位元素。
用法
考虑以下 DOM 结构。
<h3>Sign up</h3>
<label>
<input type="checkbox" /> Subscribe
</label>
<br/>
<button>Submit</button>
您可以通过其隐式角色定位每个元素
await expect(page.getByRole('heading', { name: 'Sign up' })).toBeVisible();
await page.getByRole('checkbox', { name: 'Subscribe' }).check();
await page.getByRole('button', { name: /submit/i }).click();
参数
-
role
"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
Object (可选)-
通常由
aria-checked
或原生<input type=checkbox>
控件设置的属性。了解更多关于
aria-checked
的信息。 -
通常由
aria-disabled
或disabled
设置的属性。注意与大多数其他属性不同,
disabled
在 DOM 层次结构中是继承的。了解更多关于aria-disabled
的信息。 -
name 是否精确匹配:区分大小写和全字符串。默认为 false。当 name 是正则表达式时忽略。请注意,精确匹配仍会去除空格。
-
通常由
aria-expanded
设置的属性。了解更多关于
aria-expanded
的信息。 -
控制是否匹配隐藏元素的选项。默认情况下,只有非隐藏元素(由 ARIA 定义)由角色选择器匹配。
了解更多关于
aria-hidden
的信息。 -
通常用于角色
heading
、listitem
、row
、treeitem
的数字属性,<h1>-<h6>
元素具有默认值。了解更多关于
aria-level
的信息。 -
匹配 可访问名称 的选项。默认情况下,匹配不区分大小写并搜索子字符串,使用 exact 来控制此行为。
了解更多关于 可访问名称 的信息。
-
通常由
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 定位元素
await page.getByTestId('directions').click();
参数
返回
详情
默认情况下,data-testid
属性用作测试 ID。如有必要,请使用 selectors.setTestIdAttribute() 配置不同的测试 ID 属性。
// Set custom test id attribute from @playwright/test config:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
testIdAttribute: 'data-pw'
},
});
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', { exact: true });
// Matches both <div>s
page.getByText(/Hello/);
// Matches second <div>
page.getByText(/^hello$/i);
参数
-
用于定位元素的文本。
-
options
Object (可选)
返回
详情
按文本匹配始终会规范化空格,即使是精确匹配也是如此。例如,它会将多个空格转换为一个空格,将换行符转换为空格,并忽略前导和尾随空格。
类型为 button
和 submit
的输入元素通过其 value
而不是文本内容进行匹配。例如,通过文本 "登录"
定位匹配 <input type=button value="登录">
。
getByTitle
新增于:v1.27允许通过元素的 title 属性定位元素。
用法
考虑以下 DOM 结构。
<span title='Issues count'>25 issues</span>
您可以通过 title 文本定位它后检查问题数量
await expect(page.getByTitle('Issues count')).toHaveText('25 issues');
参数
-
用于定位元素的文本。
-
options
Object (可选)
返回
locator
新增于: v1.17此方法在定位器的子树中查找与指定选择器匹配的元素。它也接受过滤选项,类似于 locator.filter() 方法。
用法
frameLocator.locator(selectorOrLocator);
frameLocator.locator(selectorOrLocator, options);
参数
-
selectorOrLocator
string | Locator#用于解析 DOM 元素的选择器或定位器。
-
options
Object (可选)-
将方法的结果缩小到包含与此相对定位器匹配的元素的那些结果。例如,具有 `text=Playwright` 的 `article` 匹配 `<article><div>Playwright</div></article>`。
内部定位器**必须相对于**外部定位器,并且从外部定位器匹配开始查询,而不是从文档根部开始查询。例如,你可以在 `<article><content><div>Playwright</div></content></article>` 中找到包含 `div` 的 `content`。但是,查找包含 `article div` 的 `content` 将失败,因为内部定位器必须是相对的,并且不应使用 `content` 之外的任何元素。
请注意,外部和内部定位器必须属于同一个框架。内部定位器不能包含 FrameLocator。
-
匹配不包含与内部定位器匹配的元素的元素。内部定位器是针对外部定位器进行查询的。例如,不包含 `div` 的 `article` 匹配 `<article><span>Playwright</span></article>`。
请注意,外部和内部定位器必须属于同一个框架。内部定位器不能包含 FrameLocator。
-
hasNotText
string | RegExp (可选)新增于:v1.33#匹配内部某处不包含指定文本的元素,可能在子元素或后代元素中。当传入 string 时,匹配不区分大小写并搜索子字符串。
-
匹配内部某处包含指定文本的元素,可能在子元素或后代元素中。当传入 string 时,匹配不区分大小写并搜索子字符串。例如,`"Playwright"` 匹配 `<article><div>Playwright</div></article>`。
-
返回
owner
新增于: v1.43返回一个 Locator 对象,指向与此帧定位器相同的 `iframe`。
当你获得一个 FrameLocator 对象,并且稍后想要与 `iframe` 元素交互时,此方法很有用。
对于反向操作,请使用 locator.contentFrame()。
用法
const frameLocator = page.locator('iframe[name="embedded"]').contentFrame();
// ...
const locator = frameLocator.owner();
await expect(locator).toBeVisible();
返回
已弃用
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);
参数
返回