Выберите элемент с именем класса, который начинается с использования Cypress

Question

У меня есть несколько классов, которые динамически генерируются в React. У них всегда один и тот же префикс, но все они заканчиваются по-разному

Как я могу использовать Cypress, чтобы выбрать имя класса, которое начинается с X?

<div class="this-is-always-the-same-abcd"></>
<div class="this-is-always-the-same-efgh"></>
<div class="this-is-always-the-same-ijkl"></>

Answer 1

В соответствии с их Документацией по передовому опыту , вы должны использовать атрибуты data-*, чтобы обеспечить контекст для ваших селекторов и изолировать их от изменений CSS или JS.

Предполагается, что вы следуете этим рекомендациям:

• Не ориентируйте элементы на основе таких атрибутов CSS, как: id, class, tag.
• Не указывайте элементы, которые могут изменить свои textContent.
• Добавить data-* атрибутов, чтобы упростить таргетинг на элементы.

Вместо этого вы должны добавить атрибут data-cy, чтобы нацелиться на тестируемый селектор.

Вы можете использовать эту игровую площадку для определения уникального селектора.