Как мне выбрать вложенный ввод, который не имеет атрибута id, используя Cypress? - PullRequest
Новая
       26

Как мне выбрать вложенный ввод, который не имеет атрибута id, используя Cypress?

2 голосов
/ 03 июля 2019

Я пишу Cypress-тест для проекта React.Я должен быть в состоянии нацелиться на <input>, вложенный внутрь <label>, чтобы я мог ввести в это поле ввода.У <input> нет идентификаторов классов.

Вот мой HTML. 

    <label class="Input">
        <div class="label">LABEL TEXT</div>
        <input type="text">
    </label>

У меня есть многочисленные входные данные в той же форме с точным HTML, показанным выше.Они отличаются только текстом в <div> (т. Е. LABEL TEXT).

Причина, по которой я окружаю <input> в теге метки, заключается в том, что я хочу, чтобы пользователь мог ориентироваться на ввод, щелкая в любом месте вокруг текста метки ИЛИ на вводе.Добавление класса к входам не имеет смысла для нашей кодовой базы только ради тестирования Cypress.Я не могу использовать псевдо-селекторы, такие как: first cy.get('input[type="text"]:first'), потому что я не хочу, чтобы мои тесты ломались, если я добавляю дополнительные формы в форму.

Я попробовал следующее, но он пытается ввести вметка вместо ввода. 

  cy.contains('LABEL TEXT')
      .click()
      .type('test')

Несмотря на то, что он фокусируется на средстве запуска Cypress, он все равно пытается ввести <div> вместо сфокусированного ввода.

Поскольку я очень плохо знаком с Сайпрессом и утверждениями, мне остается чесать голову.Я заинтересован в решении (если возможно), которое не включает добавление классов к моим входам только для тестирования Cypress.Я надеюсь, что это просто недостаток в моих знаниях CSS, Cypress или утверждений.

Спасибо

Ответы [ 3 ]

2 голосов
/ 03 июля 2019

Я думаю, что-то вроде 

cy.getByText("label text").parent().within(() => {

   cy.get('input') // this yields the input
})

будет работать.

Я рекомендую вам проверить https://github.com/testing-library/cypress-testing-library на некоторые аккуратные селекторы

1 голос
/ 03 июля 2019

Я только что воспроизвел ваш точно такой же сценарий с несколькими одинаковыми надписями, отличающимися только текстами внутреннего div. Ответ Мигеля Карвахала был близок, но нужно немного подправить. Следующий код работал правильно: 

cy.get("div[class='label']").contains("LABEL TEXT2").parent().within(() => {
   cy.get("input[type='text']").type("StackOverflowHelp")
})

Проверено на следующем HTML: 

<label class="Input">
  <div class="label">LABEL TEXT1</div>
  <input type="text">
</label>
<label class="Input">
  <div class="label">LABEL TEXT2</div>
  <input type="text">
</label>

Результат:

enter image description here

1 голос
/ 03 июля 2019

Да, вы можете использовать CSS-селекторы , чтобы получить больше точности!

Попытка: 

cy.get('.Input > input') // selects an <input> tag that is a direct
                         // descendant of a "Input" class
.click()
.type('test')

Вы также можете использовать селекторы CSS для выбора n-го элемента в DOM, который соответствует селектору: 

cy.get('.Input:nth-child(2) > input') // selects all <input> tags that
                                      // are direct children of the
                                      // second "Input"-class element
                                      // in any containing element
.click()
.type('test')
...