Как устранить ошибку Cypress (cy.type() можно вызывать только для одного элемента.)?

У меня есть три поля ввода:

      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-му входу?

Можете ли вы включить HTML для тестируемого сайта?

agoff 11.05.2022 21:40
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
41
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Использование .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-модулей, которую я собирался решить сегодня позже!

ERLay 12.05.2022 09:55

Как бы вы реорганизовали это, чтобы оно соответствовало селектору «начинается с»? 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 13.05.2022 12:02

@ERLay, невозможно сказать, не видя «структуры» HTML. gist.github.com/ShanonJackson/1f0084c97c94ef547a7d8ee8c3ca62‌​d6

Shanon Jackson 14.05.2022 00:34

Спасибо!, решил это, используя .eq, где это необходимо.

ERLay 14.05.2022 06:35

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