У меня есть проект, в котором некоторые компоненты, например выпадающие списки, написаны на 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, и не понятно как получить доступ к этому выпадающему списку
Это похоже на элемент управления 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/…
Вы расширили последний
<div>
в вашей красной коробке? Это может содержать все элементы DOM для выбранных параметров.