如何在Playwright中创建同时匹配data-testid与CSS样式的自定义选择器？

你原来的链式调用会查找子元素，而目标是带有data-testid的元素本身，所以需要把两个条件合并到同一个选择器里，直接定位目标元素。

1. 精确匹配style属性的CSS选择器 #

如果style属性的内容完全固定（包括空格、分号），可以直接组合两个属性选择器：

[data-testid="sign-up-error"][style="display: table-row;"]

在Playwright中使用：

this.formFieldError = page.locator('[data-testid="sign-up-error"][style="display: table-row;"]');

2. 模糊匹配style属性（更健壮） #

如果style属性可能包含其他样式（比如后续添加颜色、间距等），或者空格格式有变化，建议用*=匹配包含指定样式片段的元素：

[data-testid="sign-up-error"][style*="display: table-row"]

这种写法会匹配所有data-testid为sign-up-error且style中包含display: table-row的元素，不管style里还有其他什么内容。

为什么原来的代码不生效？ #

你之前的代码：

this.formFieldError = page.getByTestId("sign-up-error").locator("[style='display: table-row']")

逻辑是：先找到带有sign-up-error测试ID的元素，再在它的子元素中查找有对应style的元素——但目标元素本身就是那个带测试ID的<tr>，所以链式调用的locator找不到它。

内容的提问来源于stack exchange，提问作者karan satia