У меня есть три поля ввода:
cy.get(':nth-child(1) > .input-module_input__3wsvS').should('be.visible').type(foo)
cy.get(':nth-child(2) > .input-module_input__3wsvS').should('be.visible').type(bar)
cy.get(':nth-child(3) > .input-module_input__3wsvS').should('be.visible').type(foo-bar)
Как мне пройти тест? Я использую модули css в реакции. ID-теги, кажется, не работают, так что есть другие предложения?
.first() подходит для идентификации 1-го, но как мне обратиться ко 2-му и 3-му входу?





Использование .eq() может дать вам лучшие результаты
cy.get('.input-module_input__3wsvS').eq(0).should('be.visible').type('foo')
cy.get('.input-module_input__3wsvS').eq(1).should('be.visible').type('bar')
Будьте осторожны с использованием «хэша», который исходит от веб-сайтов внешнего интерфейса, которые используют css-модули, поскольку любое изменение базового css изменит его значение и, следовательно, нарушит тесты.
Точно так же, чем сложнее селектор, тем больше площадь поверхности для изменения структуры документа, чтобы не пройти тест.
.eq() - это то, как вы выбираете детей по индексу (на основе 0), вы можете найти документацию здесь:
https://docs.cypress.io/api/commands/eq
Для проектов, использующих модули css, я бы предложил использовать селектор «начинается с».
cy.get(`[class^='${cls}']`))
// или добавьте следующую команду для «частичного класса», чтобы упростить запись
Cypress.Commands.add('pclass', (cls) => cy.get(`[class^='${cls}']`));
использование в вашем примере:
cy.get(`[class^='input-module_input']`).eq(1) // (for second child)
// or (After you've added the command)
cy.pclass("input-module_input").eq(1); // (for second child that mathes)
Очень полезно, спасибо. Это также решило проблему css-модулей, которую я собирался решить сегодня позже!
Как бы вы реорганизовали это, чтобы оно соответствовало селектору «начинается с»? cy.get(':nth-child(2) > :nth-child(2) > .inputmodule_input__3wsvS').type('foo') cy.get(':nth-child(2) > :nth-child( 3) > .inputmodule_input__3wsvS').type('bar') cy.get(':nth-child(2) > :nth-child(4) > .input-module_input__3wsvS').type('foofoobar') cy. get(':nth-child(2) > :nth-child(5) > .input-module_input__3wsvS').type('barbarfoo')
@ERLay, невозможно сказать, не видя «структуры» HTML. gist.github.com/ShanonJackson/1f0084c97c94ef547a7d8ee8c3ca62d6
Спасибо!, решил это, используя .eq, где это необходимо.
Можете ли вы включить HTML для тестируемого сайта?