Question

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

Answer 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")都可以使用。

Answer 2

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

尝试：

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

如何在赛普拉斯中编写芯片测试（React js）

2 个答案: