如何在 Cypress 中为 Chips (React js) 编写测试答案

【问题标题】：How to write the test for Chips (React js) in Cypress如何在 Cypress 中为 Chips (React js) 编写测试
【发布时间】：2019-10-10 07:13:40
【问题描述】：

如何在 cypress 中测试这段代码？

<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}');

【问题讨论】：

标签： reactjs cypress

【解决方案1】：

您的选择器不正确。你可以试试

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

此外，如果可能，请尝试添加特定于测试的data-* 属性。阅读有关此最佳实践的更多信息here

如果上述方法不起作用，我猜芯片是一个更高阶的组件，对吧？意味着它包含其他几个 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") 可以工作。

【讨论】：

【解决方案2】：

您需要使用cy.get() 而不是cy.find()。此外，您需要定位实际的<input type="text"> 元素，或者在使用cy.type 之前对其进行聚焦。

试试：

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

【讨论】：