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

Question

У меня есть несколько элементов div с идентификатором features-##### и features-#####, где # является динамической c цифрой.

Как мне заставить Cypress найти все элементы с соответствующей частью Идентификатор features-, а затем нажмите на первую или вторую в программном c порядке?

Это то, что я сделал до сих пор, но я не могу понять, как использовать h regex для извлечения затем все элементы, которые я сделал, обрабатывают их программно.

  describe('builder features component', () => {
    it('should allow the user to select a features component', () => {
      cy.get(el).should('div.id', /^features-\w+/).first().click();
    });
  });

Answer 1

Cypress предлагает использовать data- атрибуты для выбора элементов. Например, если вы добавите data-cy="builder-feature" ко всем своим функциям, вам не придется заботиться о регулярных выражениях, которые просто замедлят ваши тесты.

cy.get('[data-cy="builder-feature"]').first().click()

См. Рекомендации .

Answer 2

Rich Churcher прав, упомянутый им подход должен быть вашим первым выбором. Но если у вас нет контроля над приложением и вы не можете добавить атрибуты data-cy, вы можете использовать синтаксис селектора css для достижения этой цели.

const featuresSelector = '[id^="features-"]'; 

Это позволит выбрать любой элемент с идентификатором, который начинается с ... См. Хорошее объяснение на Как выбрать все элементы, идентификатор которых начинается и заканчивается указанными c строками?

И тогда вы можете использовать этот селектор вот так:

cy.get(featuresSelector).first().click(); // click the 1st element in the collection
cy.get(featuresSelector).eq(1).click(); // click the second element (index starts at 0)
cy.get(featuresSelector).eq(-1).click(); // click the last element
cy.get(featuresSelector).each((element, index, collection) => {
    // or event loop through the entire collection
})

Answer 3

Использует функцию contains (). Функция может получать регулярное выражение в качестве параметра

cy.contains(/^features-\w+/).click();