css - 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 代码，我知道...对此我无能为力...)

在本例中，我需要选择第二个 span，它缺少删除线样式，但无法预期 span 元素的顺序和数量.

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

Answer 1

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

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

CSS 演示:

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;
}

<span>
  <span style="stuff">a</span>
  <span style="stuff; text-decoration:line-through; foo">b</span>
</span>