Как написать тест для Chips (React js) в Cypress

Question

Как проверить этот код на кипарисе?

<Chips
  id="ChipsId"
  className="chips"
  value={this.state.tags}
  onChange={this.onChange}
  suggestions={this.state.tagGroup}
  fromSuggestionsOnly="true"
/>

Я пробовал код:

      cy.find('#ChipsId')
      .type("Freshers")
      .type('{downarrow}')
      .type('{enter}');

Answer 1

Вам нужно использовать cy.get(), а не cy.find(). Кроме того, вам нужно нацелиться на фактический элемент <input type="text"> или сфокусировать его перед использованием cy.type.

Попробуйте:

cy.get('#ChipsId').click()
.focused().type('{downarrow}')

Answer 2

Ваш селектор неверен. Вы можете попробовать

cy.get("Chips[id='ChipsId']")
  .type("Freshers")
  .type('{downarrow}')
  .type('{enter}');

Также, если возможно, попробуйте добавить атрибут data-*, специфичный только для тестирования. Узнайте больше об этой лучшей практике здесь

Если вышеупомянутое не работает, я полагаю, что фишки - это компонент более высокого порядка, верно? Означает, что он содержит несколько других элементов DOM. Вам нужно get элемент ввода в элементе Chips, чтобы набрать в:

cy.get("Chips[id='ChipsId']").within(() => {
  cy.get('input')
    .type("Freshers")
    .type('{downarrow}')
    .type('{enter}');
})

Я не могу проверить это сейчас, но, возможно, даже cy.get("Chips[id='ChipsId'] input") или cy.find("Chips[id='ChipsId'] input") могут работать.