1

我正在编写一个使用 Cypress 测试的 React 应用程序。在我的集成测试中，我编写了一个带有字符串数组的 cypress 命令，以便在多值选择框中选择项目。

我使用的代码大致如下：

Cypress.Commands.add("command", (options) => {
  options.forEach((option) => {
    cy.get("div[data-g-portal-id='1']") // this is the container for the select box dropdown
      .find("div[role='menubar']")
      .contains(option)
      .click({ force: true });
  });
}

我已经尝试过各种迭代，包括cy.wrap和.each. 无论我做什么，当数组包含多个项目时，它会单击一个项目，该项目被标记为已成功选择，然后它单击另一个项目，将其标记为已选，但第一个项目失去其选择状态。就好像组件的内部状态从未真正得到初始更改。

我已经确认这不是我的应用程序中的错误；手动测试时，多选工作正常。但赛普拉斯只是不想知道。任何帮助将非常感激。

4

1 回答 1

0

v2.grommet.io/select 使用“门户”来显示下拉选项。

门户只是在下拉列表打开时div附加到body的，并在单击选项时再次删除。

问题是，没有属性可以连接下拉列表和包含选项的门户。可能存在其他门户，例如Layer组件使用门户。

我们需要定位的选项门户将始终是页面上的最后一个门户（因为我们刚刚打开了下拉菜单）。在自定义命令中，应用.last()命令将选择选项门户。

Cypress.Commands.add("multiselect", (options) => {
  options.forEach((option) => {

    cy.get(`[data-g-portal-id]`)
      .last()            // just opened the dropdown so option are in the last portal
      .find("div[role='menubar']")
      .contains(option)
      .click();
  });
});


cy.get('input[name="my-select"]')
  .click();                           // open dropdown
  .multiselect(['First', 'Third']);

cy.get('input[name="my-select"]')
  .click();                           // close dropdown

cy.get('input[name="my-select"]')
  .should('have.value', 'multiple')

测试以显示文本“多个”的下拉列表结束。

选择的配置，

<Select
  multiple               // allow multiple selected options
  closeOnChange={false}  // do not close the dropdown between selections
  name="my-select"       
  options={myOptions}
  ...
/>
于 2020-12-16T03:31:47.550 回答