Драматург — выберите элемент на основе свойства CSS
Мне нужно выбрать соответствующий элемент с Playwright путем фильтрации на основе свойств CSS. В моем конкретном случае мне нужно отфильтровать элементы со свойством 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-код, я знаю... Я мало что могу с этим поделать...)
В этом случае мне нужно выбрать 2-й span, в котором отсутствует стиль зачеркивания, но порядок и количество элементов span невозможно предугадать.
Есть ли способ сделать это с помощью одного запроса ilocator.Locator(selector);?
Мне нужно сделать это с помощью одного запроса, потому что код, который я создаю, должен быть универсальным, а не предполагать вещи и выполнять «ручную» фильтрацию. Все должно быть в селекторе.
@aloisdg Я только что сделал.
Ответы 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>Это интересно, потому что я не думал об этом, но есть две проблемы: 1) это включает элементы, которые я хочу отфильтровать, а не исключать их, и 2) могут быть проблемы с пробелами вокруг символа :. Хотя в теории это могло сработать. Вместо этого я мог бы использовать font-weight:bold как часть селектора для решения первой проблемы и надеяться, что ничего не изменится в пробелах для второй.
@user2173353 редактировать для включения/исключения и пример для обработки пробела после лайка :
Спасибо. Это должно работать. Первоначально я надеялся, что есть что-то, что не полагается на сопоставление текста, но, возможно, этого достаточно. :)
Можете ли вы скопировать/вставить html вместо скриншота?