Новые типы CSS селекторов: Таблица и Таблица (список)

css парсинг селекторы товары 25 сен 13:25 19

Таблица и Таблица (список): новые типы характеристик

Во вкладке CSS селекторы появились два новых типа — Таблица и Таблица (список). Они предназначены для таблиц характеристик и любых повторяющихся блоков на странице товара: одна настройка собирает сразу весь набор характеристик, для каждой строки отдельно читая название и значение. Раньше на каждое поле нужен был свой селектор — теперь достаточно одного на весь блок.

Ниже — что именно добавилось, чем новые типы отличаются друг от друга и от прежних, и на что смотреть при настройке.

Зачем это понадобилось

До этого в CSS селекторах было пять типов, и все они про одно значение:

Строка — текстовое значение первого элемента по селектору;
HTML — html-содержимое первого элемента по селектору;
Атрибут — значение атрибута первого элемента, имя атрибута указывается отдельно;
Список строк — текстовые значения всех элементов по селектору;
Список атрибутов — значения атрибутов всех элементов по селектору, имя атрибута указывается отдельно.

Этого хватает, когда характеристика на странице одна: артикул, бренд, страна-производитель. Но таблица характеристик — это десятки пар «название — значение» в одном блоке. Через «Строку» её так просто не забрать: на каждую пару пришлось бы писать отдельный селектор. Для таблицы на двадцать строк — двадцать настроек, и каждая ломается при первой же правке разметки сайта.

Как работают новые типы

«Таблица» и «Таблица (список)» задаются тремя селекторами вместо одного:

Поле	Что указывается
Селектор элемента	Строка таблицы или другой повторяющийся блок
Селектор ключа	Название характеристики внутри этой строки
Селектор значения	Значение характеристики внутри этой строки

Поле «Название характеристики» для этих типов не заполняется: название берётся из селектора ключа. Парсер перебирает все элементы по селектору элемента, в каждом находит название и значение и записывает их в характеристики товара.

Пример разметки, под которую подходит такой набор:

<table class="specs">
  <tr><td class="name">Бренд</td><td class="value">Samsung</td></tr>
  <tr><td class="name">Модель</td><td class="value">Galaxy S24</td></tr>
</table>

Селектор элемента — table.specs tr, селектор ключа — .name, селектор значения — .value. Результат: две характеристики товара — «Бренд: Samsung» и «Модель: Galaxy S24». Сколько строк в таблице, столько характеристик и получится.

Таблица или Таблица (список)

Таблица — значение характеристики это текст строки: одна строка даёт одно значение.
Таблица (список) — то же самое, но значение характеристики собирается как список текстов внутри строки.

Тип	Что попадает в значение	Когда выбирать
Таблица	Текст строки целиком	В строке одна пара «название — значение»
Таблица (список)	Список текстов внутри строки	В строке несколько значений: размеры, комплектация, совместимые модели

Например, в строке «Размеры» перечислены четыре размера подряд. Через «Таблицу» к характеристике прилипнет одна строка «S, M, L, XL», через «Таблицу (список)» — четыре отдельных значения списком, из которых дальше можно собрать отдельные характеристики.

Правила, о которых стоит знать

Существующие характеристики не перезаписываются. Если у товара уже есть характеристика с таким названием, значение останется прежним. Это отличает новые типы от «Строки», которая перезаписывает характеристику с тем же названием.
Пустые строки пропускаются. Если в строке нет названия или значения, в характеристики она не попадёт.
У «Таблицы» пропускается строка, где название совпадает со значением — она не добавит мусорной характеристики вида «Размер — Размер».
Порядок строк сохраняется: характеристики идут так, как расположены на странице.
Отбор идёт по html-коду детальной страницы, без исполнения JavaScript — как и у остальных типов селекторов.

Проверка селекторов

Ошибка в селекторе — самая частая причина пустого результата. Порядок проверки:

Запустите пробный парсинг и посмотрите, какие характеристики получились у товаров.
Откройте карточку товара в браузере, включите консоль разработчика и проверьте выборку: document.querySelectorAll('table.specs tr') должна вернуть ровно те строки, которые нужны.
Отдельно проверьте селектор ключа и селектор значения в рамках одной строки: если по ним ничего не находится, внутри строки другие классы.
Помните, что поддерживаются стандартные CSS3-селекторы, а также выборка по текстовому содержимому :contains() и :icontains(). Пример: .detail > .info:nth-child(2) .char_name:contains("Бренд") + .value.

Что осталось прежним и в чём ограничения

Лимит селекторов не изменился: 1 произвольный CSS селектор на Пробной версии, тарифах Day и Lite, до 100 — на Pro.
Селекторы работают на детальной странице товара, без каких-либо преобразований страницы и без исполнения JavaScript.
Если на сайте характеристики подгружаются скриптами и в html-коде страницы их нет, пользовательские селекторы не помогут: там просто нечего выбирать.
Корректная работа пользовательских селекторов на всех сайтах не гарантируется — многое зависит от того, как сторонний ресурс отдаёт разметку.

Частая ошибка

Основная ошибка — пытаться вытащить таблицу характеристик перечислением: свой селектор на артикул, свой на бренд, свой на материал и так далее. Такая настройка выглядит рабочей ровно до первого обновления сайта, а потом рассыпается целиком — какой из двадцати селекторов отвалился, ещё нужно найти.

Для повторяющихся блоков правильнее один раз описать строку тремя селекторами: название характеристики берётся из ключа, значение — из значения. Тогда новая строка в таблице на сайте автоматически станет новой характеристикой товара, без правок настройки.

Итог

В CSS селекторах теперь два типа для табличных данных: Таблица — для пар «название — значение», Таблица (список) — для случаев, когда в строке лежит несколько значений. Обе настраиваются тремя селекторами (элемент, ключ, значение), не перезаписывают уже существующие характеристики и пропускают пустые строки. Если раньше таблица характеристик требовала отдельного селектора на каждое поле, теперь достаточно одной настройки на весь блок.

Перейти к парсингу — чтобы добавить селекторы, откройте вкладку «CSS селекторы» на странице начала парсинга и нажмите «Добавить».