使用 Cypress 在同一页面上测试多个 react-select 组件

Question

我正在尝试使用 cypress 在页面上测试 react-select 组件 (v5)。当页面上只有一个 react select 组件时，我可以使用 css 类名来执行此操作，但是当有多个时，我无法向组件添加唯一标识符。我尝试将 dataCy 属性添加到 select 组件，但它没有显示在 DOM.

中

cy.get("[dataCy=reports-menu]").click()

<Select
            options={reportItems}
            isSearchable
            className="mb-4"
            placeholder="Water System Reports"
            onChange={handleMenuChange}
            defaultValue={{ label: "Inventory", value: "inventory" }}
            dataCy="reports-menu"
          />

我也试过像这样通过占位符调用组件： cy.get(".css-319lph-ValueContainer").should("contain", "Inventory").click();

然后单击该项目，但我仍然收到一个错误

cy.click() can only be called on a single element. Your subject contained 2 elements. Pass { multiple: true } if you want to serially click each element

当一个页面可能包含多个 react-select 组件时，如何指定我想点击页面上的哪个 react-select 组件？

Answer 1

在 contains 中，您可以结合使用选择器和文本。

cy.contains('[placeholder="Water System Reports"]','Inventory').click()

Answer 2

您可以将 aria-label="reports-menu" 添加到 react-select。此属性添加到内部 <input> 元素，它可能是也可能不是您要单击的元素。

柏树select或者是

cy.get("[aria-label=reports-menu]")

您还可以添加 id="reports-menu"，它会添加到 Select 元素的最顶部 div，很可能这是您的点击目标。

柏树select或者是

cy.get("#reports-menu")

使用 Cypress 在同一页面上测试多个 react-select 组件

Test multiple react-select components on same page using Cypress

reactjs

react-select

cypress