LocatorAssertions
该 LocatorAssertions 类提供断言方法,可用于对 定位器 测试中的状态。
import { test, expect } from '@playwright/test';
test('status becomes submitted', async ({ page }) => {
// ...
await page.getByRole('button').click();
await expect(page.locator('.status')).toHaveText('Submitted');
});
方法
toBeAttached
添加于:v1.33确保 定位器 指向一个 连接到 文档或 ShadowRoot 的元素。
用法
await expect(page.getByText('Hidden text')).toBeAttached();
参数
options
对象 (可选)
返回值
toBeChecked
添加于:v1.20确保 定位器 指向已选中的输入。
用法
const locator = page.getByLabel('Subscribe to newsletter');
await expect(locator).toBeChecked();
参数
options
对象 (可选)
返回值
toBeDisabled
添加于:v1.20确保 定位器 指向一个禁用的元素。如果元素具有 "disabled" 属性或通过 'aria-disabled' 禁用,则元素被禁用。注意,只有像 HTML button
、input
、select
、textarea
、option
、optgroup
这样的原生控件元素可以通过设置 "disabled" 属性来禁用。浏览器会忽略其他元素上的 "disabled" 属性。
用法
const locator = page.locator('button.submit');
await expect(locator).toBeDisabled();
参数
返回值
toBeEditable
添加于:v1.20确保 定位器 指向一个可编辑的元素。
用法
const locator = page.getByRole('textbox');
await expect(locator).toBeEditable();
参数
options
对象 (可选)
返回值
toBeEmpty
添加于:v1.20确保 定位器 指向一个空的可编辑元素或没有文本的 DOM 节点。
用法
const locator = page.locator('div.warning');
await expect(locator).toBeEmpty();
参数
返回值
toBeEnabled
添加于:v1.20确保 定位器 指向一个启用的元素。
用法
const locator = page.locator('button.submit');
await expect(locator).toBeEnabled();
参数
options
对象 (可选)
返回值
toBeFocused
添加于:v1.20确保 定位器 指向一个获得焦点的 DOM 节点。
用法
const locator = page.getByRole('textbox');
await expect(locator).toBeFocused();
参数
返回值
toBeHidden
添加于:v1.20确保 定位器 既不解析为任何 DOM 节点,也不解析为 不可见 的节点。
用法
const locator = page.locator('.my-element');
await expect(locator).toBeHidden();
参数
返回值
toBeInViewport
添加于:v1.31确保 定位器 指向与视窗相交的元素,根据 交集观察者 API。
用法
const locator = page.getByRole('button');
// Make sure at least some part of element intersects viewport.
await expect(locator).toBeInViewport();
// Make sure element is fully outside of viewport.
await expect(locator).not.toBeInViewport();
// Make sure that at least half of the element intersects viewport.
await expect(locator).toBeInViewport({ ratio: 0.5 });
参数
options
对象 (可选)
返回值
toBeVisible
添加于:v1.20要检查列表中至少有一个元素是否可见,请使用 locator.first()。
用法
// A specific element is visible.
await expect(page.getByText('Welcome')).toBeVisible();
// At least one item in the list is visible.
await expect(page.getByTestId('todo-item').first()).toBeVisible();
// At least one of the two elements is visible, possibly both.
await expect(
page.getByRole('button', { name: 'Sign in' })
.or(page.getByRole('button', { name: 'Sign up' }))
.first()
).toBeVisible();
参数
options
对象 (可选)
返回值
toContainText
添加于:v1.20确保 定位器 指向包含给定文本的元素。计算元素的文本内容时,将考虑所有嵌套元素。您也可以对值使用正则表达式。
用法
const locator = page.locator('.title');
await expect(locator).toContainText('substring');
await expect(locator).toContainText(/\d messages/);
如果您传递数组作为预期值,则期望是
- 定位器解析为元素列表。
- 此列表中的子集元素分别包含预期数组中的文本。
- 元素匹配子集的顺序与预期数组相同。
- 预期数组中的每个文本值都由列表中的某个元素匹配。
例如,考虑以下列表
<ul>
<li>Item Text 1</li>
<li>Item Text 2</li>
<li>Item Text 3</li>
</ul>
让我们看看如何使用断言
// ✓ Contains the right items in the right order
await expect(page.locator('ul > li')).toContainText(['Text 1', 'Text 3']);
// ✖ Wrong order
await expect(page.locator('ul > li')).toContainText(['Text 3', 'Text 2']);
// ✖ No item contains this text
await expect(page.locator('ul > li')).toContainText(['Some 33']);
// ✖ Locator points to the outer list element, not to the list items
await expect(page.locator('ul')).toContainText(['Text 3']);
参数
返回值
详情
当 expected
参数为字符串时,Playwright 将在匹配之前规范化实际文本和预期字符串中的空格和换行符。当使用正则表达式时,实际文本将按原样匹配。
toHaveAccessibleDescription
新增于: v1.44用法
const locator = page.getByTestId('save-button');
await expect(locator).toHaveAccessibleDescription('Save results to disk');
参数
-
预期可访问描述。
-
options
对象 (可选)-
是否执行不区分大小写的匹配。如果指定了 ignoreCase 选项,则优先于相应的正则表达式标志。
-
以毫秒为单位重试断言的时间。默认为
timeout
在TestConfig.expect
中。
-
返回值
toHaveAccessibleName
新增于: v1.44用法
const locator = page.getByTestId('save-button');
await expect(locator).toHaveAccessibleName('Save to disk');
参数
-
预期可访问名称。
-
options
对象 (可选)-
是否执行不区分大小写的匹配。如果指定了 ignoreCase 选项,则优先于相应的正则表达式标志。
-
以毫秒为单位重试断言的时间。默认为
timeout
在TestConfig.expect
中。
-
返回值
toHaveAttribute(name, value)
添加于:v1.20确保 定位器 指向具有给定属性的元素。
用法
const locator = page.locator('input');
await expect(locator).toHaveAttribute('type', 'text');
参数
-
属性名称。
-
预期属性值。
-
options
对象 (可选)-
ignoreCase
布尔值 (可选)新增于: v1.40#是否执行不区分大小写的匹配。如果指定了 ignoreCase 选项,则优先于相应的正则表达式标志。
-
以毫秒为单位重试断言的时间。默认为
timeout
在TestConfig.expect
中。
-
返回值
toHaveAttribute(name)
新增于: v1.39确保 定位器 指向具有给定属性的元素。该方法将断言属性存在。
const locator = page.locator('input');
// Assert attribute existence.
await expect(locator).toHaveAttribute('disabled');
await expect(locator).not.toHaveAttribute('open');
用法
await expect(locator).toHaveAttribute(name);
await expect(locator).toHaveAttribute(name, options);
参数
返回值
toHaveClass
添加于:v1.20确保 定位器 指向具有给定 CSS 类的元素。这需要是完全匹配或使用松散的正则表达式。
用法
<div class='selected row' id='component'></div>
const locator = page.locator('#component');
await expect(locator).toHaveClass(/selected/);
await expect(locator).toHaveClass('selected row');
请注意,如果将数组作为预期值传递,则可以断言整个元素列表
const locator = page.locator('list > .component');
await expect(locator).toHaveClass(['component', 'component selected', 'component']);
参数
返回值
toHaveCount
添加于:v1.20确保 定位器 解析为确切数量的 DOM 节点。
用法
const list = page.locator('list > .component');
await expect(list).toHaveCount(3);
参数
-
预期计数。
-
options
对象 (可选)
返回值
toHaveCSS
添加于:v1.20确保 定位器 解析为具有给定计算的 CSS 样式的元素。
用法
const locator = page.getByRole('button');
await expect(locator).toHaveCSS('display', 'flex');
参数
-
CSS 属性名称。
-
CSS 属性值。
-
options
对象 (可选)
返回值
toHaveId
添加于:v1.20确保 定位器 指向具有给定 DOM 节点 ID 的元素。
用法
const locator = page.getByRole('textbox');
await expect(locator).toHaveId('lastname');
参数
-
元素 ID。
-
options
对象 (可选)
返回值
toHaveJSProperty
添加于:v1.20确保 定位器 指向具有给定 JavaScript 属性的元素。请注意,此属性可以是基本类型,也可以是可序列化的纯 JavaScript 对象。
用法
const locator = page.locator('.component');
await expect(locator).toHaveJSProperty('loaded', true);
参数
-
属性名称。
-
属性值。
-
options
对象 (可选)
返回值
toHaveRole
新增于: v1.44请注意,角色将作为字符串匹配,不考虑 ARIA 角色层次结构。例如,断言具有子类角色 "switch"
的元素的超类角色 "checkbox"
将失败。
用法
const locator = page.getByTestId('save-button');
await expect(locator).toHaveRole('button');
参数
-
role
"警报" | "警报对话框" | "应用程序" | "文章" | "横幅" | "块引用" | "按钮" | "标题" | "单元格" | "复选框" | "代码" | "列标题" | "组合框" | "补充" | "内容信息" | "定义" | "删除" | "对话框" | "目录" | "文档" | "强调" | "供稿" | "图形" | "表单" | "通用" | "网格" | "网格单元格" | "组" | "标题" | "图像" | "插入" | "链接" | "列表" | "列表框" | "列表项" | "日志" | "主要" | "跑马灯" | "数学" | "仪表" | "菜单" | "菜单栏" | "菜单项" | "菜单项复选框" | "菜单项单选按钮" | "导航" | "无" | "备注" | "选项" | "段落" | "演示" | "进度条" | "单选按钮" | "单选按钮组" | "区域" | "行" | "行组" | "行标题" | "滚动条" | "搜索" | "搜索框" | "分隔符" | "滑块" | "旋转框" | "状态" | "粗体" | "下标" | "上标" | "开关" | "选项卡" | "表格" | "选项卡列表" | "选项卡面板" | "术语" | "文本框" | "时间" | "计时器" | "工具栏" | "工具提示" | "树" | "树状网格" | "树状项"#必需的 aria 角色。
-
options
对象 (可选)
返回值
toHaveScreenshot(name)
新增于: v1.23此函数将等待两个连续的定位器屏幕截图产生相同的结果,然后将最后一个屏幕截图与预期进行比较。
用法
const locator = page.getByRole('button');
await expect(locator).toHaveScreenshot('image.png');
请注意,屏幕截图断言仅适用于 Playwright 测试运行器。
参数
-
快照名称。
-
options
对象 (可选)-
animations
"禁用" | "允许" (可选)#当设置为
"禁用"
时,会停止 CSS 动画、CSS 过渡和 Web 动画。动画会根据其持续时间得到不同的处理- 有限动画会快速转发到完成,因此它们会触发
transitionend
事件。 - 无限动画会取消到初始状态,然后在屏幕截图后播放。
默认为
"禁用"
,它会禁用动画。 - 有限动画会快速转发到完成,因此它们会触发
-
caret
"隐藏" | "初始" (可选)#当设置为
"隐藏"
时,屏幕截图将隐藏文本光标。当设置为"初始"
时,文本光标行为不会改变。默认为"隐藏"
。 -
指定在拍摄屏幕截图时应屏蔽的定位器。屏蔽的元素将被一个完全覆盖其边界框的粉红色框
#FF00FF
(由 maskColor 自定义)覆盖。 -
指定屏蔽元素的覆盖框的颜色,以 CSS 颜色格式 格式。默认颜色为粉红色
#FF00FF
。 -
不同的像素与总像素数量之间的可接受比率,介于
0
和1
之间。默认值可通过TestConfig.expect
配置。默认情况下未设置。 -
可以不同的像素数量。默认值可通过
TestConfig.expect
配置。默认情况下未设置。 -
隐藏默认白色背景,并允许以透明方式捕获屏幕截图。不适用于
jpeg
图像。默认为false
。 -
scale
"css" | "设备" (可选)#当设置为
"css"
时,屏幕截图将为页面上的每个 CSS 像素具有一个像素。对于高 DPI 设备,这将使屏幕截图保持较小。使用"设备"
选项将产生每个设备像素一个像素,因此高 DPI 设备的屏幕截图将是两倍大甚至更大。默认为
"css"
。 -
stylePath
字符串 | 数组<字符串> (可选)添加于:v1.41#包含要应用于制作屏幕截图时的样式表的名称。在这里你可以隐藏动态元素,使元素不可见或更改其属性以帮助你创建可重复的屏幕截图。此样式表会穿透 Shadow DOM 并应用于内部框架。
-
在 YIQ 颜色空间 中,比较图像中相同像素之间可接受的感知颜色差异,介于零(严格)和一(宽松)之间,默认值可通过
TestConfig.expect
配置。默认为0.2
。 -
以毫秒为单位重试断言的时间。默认为
timeout
在TestConfig.expect
中。
-
返回值
toHaveScreenshot()
新增于: v1.23此函数将等待两个连续的定位器屏幕截图产生相同的结果,然后将最后一个屏幕截图与预期进行比较。
用法
const locator = page.getByRole('button');
await expect(locator).toHaveScreenshot();
请注意,屏幕截图断言仅适用于 Playwright 测试运行器。
参数
options
对象 (可选)-
animations
"禁用" | "允许" (可选)#当设置为
"禁用"
时,会停止 CSS 动画、CSS 过渡和 Web 动画。动画会根据其持续时间得到不同的处理- 有限动画会快速转发到完成,因此它们会触发
transitionend
事件。 - 无限动画会取消到初始状态,然后在屏幕截图后播放。
默认为
"禁用"
,它会禁用动画。 - 有限动画会快速转发到完成,因此它们会触发
-
caret
"隐藏" | "初始" (可选)#当设置为
"隐藏"
时,屏幕截图将隐藏文本光标。当设置为"初始"
时,文本光标行为不会改变。默认为"隐藏"
。 -
指定在拍摄屏幕截图时应屏蔽的定位器。屏蔽的元素将被一个完全覆盖其边界框的粉红色框
#FF00FF
(由 maskColor 自定义)覆盖。 -
指定屏蔽元素的覆盖框的颜色,以 CSS 颜色格式 格式。默认颜色为粉红色
#FF00FF
。 -
不同的像素与总像素数量之间的可接受比率,介于
0
和1
之间。默认值可通过TestConfig.expect
配置。默认情况下未设置。 -
可以不同的像素数量。默认值可通过
TestConfig.expect
配置。默认情况下未设置。 -
隐藏默认白色背景,并允许以透明方式捕获屏幕截图。不适用于
jpeg
图像。默认为false
。 -
scale
"css" | "设备" (可选)#当设置为
"css"
时,屏幕截图将为页面上的每个 CSS 像素具有一个像素。对于高 DPI 设备,这将使屏幕截图保持较小。使用"设备"
选项将产生每个设备像素一个像素,因此高 DPI 设备的屏幕截图将是两倍大甚至更大。默认为
"css"
。 -
stylePath
字符串 | 数组<字符串> (可选)添加于:v1.41#包含要应用于制作屏幕截图时的样式表的名称。在这里你可以隐藏动态元素,使元素不可见或更改其属性以帮助你创建可重复的屏幕截图。此样式表会穿透 Shadow DOM 并应用于内部框架。
-
在 YIQ 颜色空间 中,比较图像中相同像素之间可接受的感知颜色差异,介于零(严格)和一(宽松)之间,默认值可通过
TestConfig.expect
配置。默认为0.2
。 -
以毫秒为单位重试断言的时间。默认为
timeout
在TestConfig.expect
中。
-
返回值
toHaveText
添加于:v1.20确保 定位器 指向具有给定文本的元素。计算元素的文本内容时,将考虑所有嵌套元素。你也可以对值使用正则表达式。
用法
const locator = page.locator('.title');
await expect(locator).toHaveText(/Welcome, Test User/);
await expect(locator).toHaveText(/Welcome, .*/);
如果您传递数组作为预期值,则期望是
- 定位器解析为元素列表。
- 数组中的元素数量等于预期值的数量。
- 列表中的元素与预期的数组值逐个匹配,按顺序匹配。
例如,考虑以下列表
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
让我们看看如何使用断言
// ✓ Has the right items in the right order
await expect(page.locator('ul > li')).toHaveText(['Text 1', 'Text 2', 'Text 3']);
// ✖ Wrong order
await expect(page.locator('ul > li')).toHaveText(['Text 3', 'Text 2', 'Text 1']);
// ✖ Last item does not match
await expect(page.locator('ul > li')).toHaveText(['Text 1', 'Text 2', 'Text']);
// ✖ Locator points to the outer list element, not to the list items
await expect(page.locator('ul')).toHaveText(['Text 1', 'Text 2', 'Text 3']);
参数
返回值
详情
当 expected
参数为字符串时,Playwright 将在匹配之前规范化实际文本和预期字符串中的空格和换行符。当使用正则表达式时,实际文本将按原样匹配。
toHaveValue
添加于:v1.20确保 Locator 指向具有给定输入值的元素。你也可以对值使用正则表达式。
用法
const locator = page.locator('input[type=number]');
await expect(locator).toHaveValue(/[0-9]/);
参数
-
预期值。
-
options
对象 (可选)
返回值
toHaveValues
新增于: v1.23确保 Locator 指向多选/组合框(例如,具有 `multiple` 属性的 `select`),并且指定的选项被选中。
用法
例如,给定以下元素
<select id="favorite-colors" multiple>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
</select>
const locator = page.locator('id=favorite-colors');
await locator.selectOption(['R', 'G']);
await expect(locator).toHaveValues([/R/, /G/]);
参数
返回值
属性
not
添加于:v1.20使断言检查相反条件。例如,这段代码测试 Locator 是否不包含文本 `“error”`。
await expect(locator).not.toContainText('error');
用法
expect(locator).not
类型