Playwright - 根据 CSS 属性选择元素

Question

我需要通过基于 CSS 属性的过滤来使用 Playwright 选择适当的元素。在我的特定情况下，我需要过滤掉具有该属性的元素text-decoration:line-through并关注其余的元素。

这是包含元素的 DOM：

<span>
    <span style="line-height:1.15 !important;display:initial;text-decoration:line-through;display:block;">0.42</span>
    <span style="line-height:1.15 !important;display:initial;font-weight:bold;">0.29</span>
</span>

（糟糕的 HTML 代码，我知道……对此我无能为力……）

在这种情况下，我需要选择 2nd span，它缺少删除线样式，但span无法预期元素的顺序和数量。

有没有办法通过单个ilocator.Locator(selector);查询来做到这一点？我需要使用单个查询来完成此操作，因为我创建的代码需要是通用的，而不是假设事物并进行“手动”过滤。一切都需要在选择器中。

Answer 1

您可以使用包含运算符“*=”。它应该类似于：

page.locator('span[style*="text-decoration:line-through"]')

演示在CSS：

page.locator('span[style*="text-decoration:line-through"]')

span {
  color: orange;
}

/* target span with line-through */
span[style*="text-decoration:line-through"],
/* handle white space */
span[style*="text-decoration: line-through"] {
  color: blue;
}

/* target span without line-through */
span:not([style*="text-decoration:line-through"]),
/* handle white space */
span:not([style*="text-decoration: line-through"]) {
  color: red;
}