Как протестировать компоненты React на сайте в Cypress E2E?

У меня есть проект, в котором некоторые компоненты, например выпадающие списки, написаны на React. В этом случае я не могу выбрать элемент из раскрывающегося списка, потому что DOM не показывает, что находится в этом раскрывающемся списке.

<div class = "Select__control css-1s2u09g-control"><div class = "Select__value-container css-1d8n9bt"><div class = "Select__placeholder css-14el2xx-placeholder" id = "react-select-6-placeholder">Select...</div><input id = "react-select-6-input" tabindex = "0" inputmode = "none" aria-autocomplete = "list" aria-expanded = "false" aria-haspopup = "true" role = "combobox" aria-readonly = "true" aria-describedby = "react-select-6-placeholder" class = "css-1hac4vs-dummyInput" value = ""></div><div class = "Select__indicators css-1wy0on6"><div class = "Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden = "true"><span></span></div></div></div>

Как проводить E2E-тесты в этом случае? Может кто объяснит или поделится своим опытом? В интернете информации не нашел. Спасибо

Я искал этот компонент в исходниках, но в коде проекта нет файлов с реакцией, эти компоненты находятся в node_modules, и не понятно как получить доступ к этому выпадающему списку

Вы расширили последний <div> в вашей красной коробке? Это может содержать все элементы DOM для выбранных параметров.

jjhelguero 10.11.2022 17:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
1
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это похоже на элемент управления react-select (судя по классам).

Это «триггерное» поведение затрудняет поиск параметров, список исчезает при любом действии мыши.

Как я это делаю

  • открыть инструменты разработчика

  • щелкните правой кнопкой мыши выбор, нажмите inspect, чтобы найти его в devtools

  • щелкните выбор на странице, чтобы открыть ее, повторите несколько раз, чтобы открыть и закрыть, посмотрите инструменты разработчика

  • элемент в devtools появляется и исчезает при открытии и закрытии меню. Элемент имеет такой формат: <div id = "react-select-6-listbox">, но число в идентификаторе зависит от того, сколько выборок используется на странице.

Теперь мы знаем идентификатор оболочки параметров, так что это тестовый код:

cy.get('.Select__control')    
  .parent()                                    // the top-level of react-select
  .click()                                     // open the list

cy.get('[id^ = "react-select"][id$ = "listbox"]')  // the injected options wrapper
  .within(() => {
    cy.contains('5 - May').click()             // select an option        
  })

cy.get('.Select__control')   
  .find('.Select__placeholder')
  .should('contain', '5 - May')                // verify selected text

Если текст 5 - May уникален на странице, вы можете просто выбрать его после открытия раскрывающегося списка, но использование .within() на обертке безопаснее.

Не могли бы вы посоветовать этот вопрос >> stackoverflow.com/questions/74397762/…

soccerway 11.11.2022 04:37

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