В Cypress, как выбрать элемент ввода на основе имени?

Question

Я начинаю изучать Cypress.Я хочу выбрать поле ввода и указать номер телефона с помощью cypress.io.Код у меня следующий, но он не работает.Однако можно ли использовать find или есть другой способ заставить элемент ввода набрать номер телефона?

cy.get('div').contains('Phone Number').find('input[name=teacher[0].number]').type('8000-1612023')

<div class="required field">
  <label>Phone Number</label>
  <div title="Teacher number" class="ui fluid right labeled input no-spinners">
      <input required="" type="number" name="teacher[0].number" value="">
      <div class="ui label label">US</div>
  </div>
</div>

Answer 1

Попробуйте вместо этого:

cy.contains('div', 'Phone Number').find('input').first().type('8000-1612023')

Первый аргумент contains говорит Cypress найти элемент с этим селектором, который содержит текст.

Answer 2

Почему бы вам не нацелить поле ввода, используя следующий код

cy.get('input[name="teacher[0].number"]').type('8000-1612023')

Пожалуйста, найдите скриншот ниже для успешного теста.Я также рекомендую вам изменить тип ввода в вашем HTML на tel

HTML:

<input required="" type="tel" name="teacher[0].number" value="">

Cypress:

describe('Trial', function() {
it('Test', function() {
    cy.visit('http://localhost:8080/trials/')
    cy.get('input[name="teacher[0].number"]').type('8000-1612023')
})
});

Результат теста: