Question

我有多个包含react-select的组件。我想遍历各个组件并获取react-select菜单中的值。

我坚强如果这样做应该会起作用

cy.get(".flight-segment-times .css-10nd86i")
   .each(($select) => { 
          $select.click({ force: true }); 
          cy.get(".css-11unzgr").contains("option")
        })

但是，这不起作用，因为.css-11unzgr类仅在单击其父元素时出现。但是，如果我在.click()元素上调用$select，则什至不会出现下拉菜单，如果我直接在.click({multiple: true})上调用cy.get(".flight-segment-times .css-10nd86i")，则每个下拉列表都会依次打开，但是我需要以便能够在这些点击操作之间做些事情。

Answer 1

cy.each()（以及其他基于jquery的命令）将jQuery集合传递给回调，因此您调用的.click()实际上是jQuery方法，而不是cypress命令。

您想要做的是首先cy.wrap()：

cy.get(".flight-segment-times .css-10nd86i")
    .each(($select) => { 
        cy.wrap($select).click({ force: true }); 
        cy.get(".css-11unzgr").contains("option");
    });

Answer 2

只需使其像两个操作即可：

cy.get(".flight-segment-times .css-10nd86i")
.click({ force: true })
cy.get(".css-11unzgr")
.contains("option")

但是由于您在实际打开React-Select组件时遇到问题，您可能单击了错误的组件。我要做的就是找到一个拥有'onMouseDown'属性的类（该类在我们的应用程序中称为'react-select__control'。如果我单击该元素，它将打开。

要找出哪个类具有'onMouseDown'属性，我使用React Developer Tools：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

赛普拉斯点击后做一些事情

2 个答案: