Блог

Главная - Вопросы по программированию - Как использовать data-cy в цикле v-for

Как использовать data-cy в цикле v-for

#vue.js #cypress

#vue.js #cypress

Вопрос:

Я data-cy пытаюсь использовать для проверки заголовка текста, но, поскольку он используется v-for , cypress test не может найти текст и вместо этого выдает неудачный тест, поскольку он не смог найти точное совпадение.

 it('first line contain heading', ()=>{
    cy.visit('http://localhost:8080/')
    cy.get('[data-cy="book-heading"]')
      .invoke('text')
      .should('equal', 'In Search of Lost Time')
})

ошибка
DOM

Как можно использовать cypress для получения правильного текста?

Комментарии:

1. Можете ли вы опубликовать скриншот ошибки вместе со скриншотом Dom?

2. @AlapanDas Я обновил вопрос с ошибкой и скриншотом.

Ответ №1:

Это должно сработать.

 it('first line contain heading', () => {
   cy.visit('http://localhost:8080/')
   cy.get('[data-cy="book-heading"]').contains('In Search of Lost Time')
})

Комментарии:

1. Спасибо. что, если я захочу второй заголовок, будет ли он сканировать всю страницу на предмет ключевых слов?

2. Если у вас есть несколько вхождений data-cy="book-heading"] на странице, вы можете получить к ним доступ с помощью eq() , что-то вроде cy.get('[data-cy="book-heading"]').eq(0).contains('In Search of Lost Time') или cy.get('[data-cy="book-heading"]').eq(1).contains('In Search of Lost Time') и т.д.