使用 Cypress 在同一頁面上測試多個 react-select 組件

Question

我正在嘗試使用 cypress 在頁面上測試 react-select 組件（v5）。 當頁面上只有一個反應 select 組件時，我可以使用 css 類名來執行此操作，但是當有多個組件時，我無法為組件添加唯一標識符。 我嘗試向 select 組件添加一個dataCy屬性，但它沒有出現在 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

您可以將aria-label="reports-menu"添加到 react-select。 此屬性添加到內部<input>元素，它可能是也可能不是您要單擊的元素。

賽普拉斯選擇器是

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

您還可以添加id="reports-menu" ，它被添加到 Select 元素的最頂部 div 中，這很可能是您的點擊目標。

賽普拉斯選擇器是

cy.get("#reports-menu")

Answer 2

使用contains您可以使用選擇器和文本的組合。

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