Playwright 如何获取元素属性

一句话回答：取值用 await locator.getAttribute('data-action')（返回字符串或 null）；断言用 await expect(locator).toHaveAttribute('href', '/home')（自动等待重试，测试里优先）。不存在该属性时 getAttribute 返回 null——与"属性值为空字符串"是两回事。

基本用法

// 读取属性值
const href = await page.getByRole('link').getAttribute('href');
const action = await page.getByRole('button').getAttribute('data-action');

// 断言（推荐，自动等待）
await expect(page.getByRole('button')).toHaveAttribute('data-action', 'cancel');
await expect(page.getByRole('link')).toHaveAttribute('href', /\/docs/);   // 支持正则

常用变体

// class 里包含某值（不用关心完整 class 串）
await expect(locator).toHaveClass(/(^|\s)active(\s|$)/);

// 布尔属性（disabled、checked 等）的存在性
const isDisabled = await locator.isDisabled();      // 语义化方法更好
const hasAttr = (await locator.getAttribute('disabled')) !== null;

null 与空字符串

<div data-empty="" data-none></div>

• getAttribute('data-empty') → ''（空串）
• getAttribute('data-none') → ''（无值属性也是空串）
• getAttribute('data-missing') → null（不存在）

判断"有没有这个属性"要写 !== null，不要写真值判断（空串会被误判为不存在）。

属性 vs 属性值 vs DOM property

getAttribute 读的是 当前 HTML attribute（脚本也可更新，并非永远静态）；元素的动态状态（如 input 当前的 value、checked）是 DOM property，两者会脱节（用户改过的 input 值不会反映回 attribute）：

await locator.inputValue();        // 当前值（property）
await locator.getAttribute('value'); // HTML 里写的初始值（attribute）

常见问题（FAQ）

Q：想拿的"值"用 getAttribute 拿到 null 或旧值？

A：你要的很可能是 DOM property。input 当前值用 inputValue()、选中态用 isChecked()、可见性用 isVisible()——Playwright 为常见 property 都提供了语义方法。

Q：data- 属性可以直接取吗？*

A：可以，getAttribute('data-user-id') 直接读。Playwright 还支持按 data 属性定位：page.getByTestId('submit-btn')（默认对应 data-testid，可配置）。

Q：怎么断言"属性不存在"？

A：await expect(locator).not.toHaveAttribute('disabled', /.*/) 会自动重试；先读 getAttribute 再 toBeNull 仅验证一次快照。若要验证实际禁用状态，用 toBeEnabled()，不要把属性缺失等同于可操作。

---

参考资料

本文依据官方资料核对，未进行现场运行测试；代码与配置示例需结合实际版本、权限和环境验证。

• playwright.dev：class locator
• playwright.dev：class locatorassertions

延伸阅读

• Playwright 如何检查元素的值
• Playwright 如何获取当前页面 URL