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

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类只在单击它的父元素时出现。 但是如果我在$select元素上调用.click() ，那么如果我直接在cy.get(".flight-segment-times .css-10nd86i")上cy.get(".flight-segment-times .css-10nd86i") .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