Драматург — выберите элемент на основе свойства 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);? Мне нужно сделать это с помощью одного запроса, потому что код, который я создаю, должен быть универсальным, а не предполагать вещи и выполнять «ручную» фильтрацию. Все должно быть в селекторе.

Можете ли вы скопировать/вставить html вместо скриншота?

aloisdg 21.11.2022 00:20

@aloisdg Я только что сделал.

user2173353 21.11.2022 00:24
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:
Как создать модальное окно с помощью CSS и JS
Как создать модальное окно с помощью CSS и JS
В этой статье мы создадим модальное окно на чистом JavaScript.
1
2
174
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 21.11.2022 00:32

@user2173353 редактировать для включения/исключения и пример для обработки пробела после лайка :

aloisdg 21.11.2022 00:37

Спасибо. Это должно работать. Первоначально я надеялся, что есть что-то, что не полагается на сопоставление текста, но, возможно, этого достаточно. :)

user2173353 21.11.2022 00:48

Другие вопросы по теме