包括剧作家中针对 CSS 和属性的断言？

Question

这里我在 playwright 中有一段带有 ToHaveCSS 函数的代码，它返回所提到的 CSS 的确切值。
Locator: locator('//label[text()='聊天状态']/following-sibling::*/button') 预期字符串：“rgb(40, 176, 131)” 收到字符串：“rgb(40, 176, 131) 无重复滚动 0% 0% / 自动填充框边框框”

如您所见，预期值与接收到的值与一些额外的字符串相匹配。

有没有像string.includes这样的函数？哪个可以通过这个测试。我只是想验证颜色和其他我不需要的东西。我仍然可以将收到的值复制粘贴到预期的字符串中以传递它。但是，如果值动态变化并且我只想验证颜色怎么办？ playwright中有没有函数可以做到这一点？

Answer 1

根据 expect 中内置

toHaveCss

方法的文档：

拥有CSS 添加于：v1.20 确保定位器解析为具有给定计算 CSS 样式的元素。

示例：

await expect(locator).toHaveCSS('display', 'flex');

这里，此方法只会根据预期的字符串“flex”断言显示值。

在我使用上面的示例测试中

toHaveCss

，我有一些与你类似的东西（我不确定为什么在你的情况下实际字符串有其他值）

这是我的背景颜色示例测试断言，效果很好：

test("Check background colour", async ({ page }) => {
  await page.goto("https://the-internet.herokuapp.com");
  expect(page.getByText("A/B Testing")).toHaveCSS("color", "rgb(43, 166, 203)");
});

您可以为此期望创建一个辅助方法（记住使用

expect

）并传递任何CSS属性名称和断言的预期值。