Cypress/Javascript - 如何等待一个元素没有类？

Question

我的 javacript/cypress 代码有点问题。

我想要做的是，如果用户点击一个按钮（它是下面的 html 中的 <a> 链接），然后等到使用 <a> 链接从 dom 中删除 class selectionAdded。

让我告诉你我的意思。这是按钮：

<a class="oddsBoostedPrice   button__bet eventSelection--link" "="">

单击该按钮，将出现一个名为 .selectionAdded 的类（将前端表示为悬停在按钮上的“已添加”文本）。

<a class="oddsBoostedPrice   button__bet eventSelection--link selectionAdded" "="">

片刻之后，“已添加”悬停从按钮上消失，因此元素现在看起来像这样（添加了.selected 类，但更重要的是，它回到了可点击状态，只有在删除 .selectionAdded 时才会发生这种情况来自dom）。

<a class="oddsBoostedPrice   button__bet eventSelection--link selected" "="">

所以基本上我下面的逻辑基本上是说明找到一个尚未选择的元素，单击它，从循环中中断，然后等待元素不包含类 selectionAdded（以确保按钮处于可点击状态，稍后我将单击相同的按钮）。

const oddsSelectionElements = new OddsSelectionElements();

When ("User selects an available bet bundle selection", () => {
  oddsSelectionElements.oddsButton().each((element, index) => {
      if (element.not("have.class", "selected")) {
      oddsSelectionElements.selectionName().eq(index).invoke("text").then(formatters.formatString).as("selectionName");
      cy.wrap(element).click();
      return false;
    }
  })
   oddsSelectionElements.oddsButton().not("have.class", "selectionAdded"); 
})

类 OddsSelectionElements

class OddsSelectionElements {

    oddsButton() {
        return cy.get('.button__bet')
    }
 
}

导出默认 OddsSelectionElements

我的问题是我的测试是不稳定的，看起来这是因为有时在测试的后期，当它不处于可点击状态时它会单击按钮，我相信这是因为它没有等到按钮没有那个@ 987654330@班级。

需要做什么来解决这个问题？

Answer 1

尝试像这样检查元素的 css

if (!element.css("selected")) {
  ...

Answer 2

赛普拉斯.not() command 应该传递一个选择器

cy.get('selector').not('.selected') 

你使用它的方式不是有效的语法，但不幸的是没有报错

.not("have.class", "selectionAdded")  // "have.class" can't be used with .not()

---

在你的测试中

oddsSelectionElements.oddsButton()
  .each((element, index) => {
    if (element.not(".selected").length === 0) {     
      oddsSelectionElements.selectionName()
        .eq(index)
        .invoke("text")
        .then(formatters.formatString).as("selectionName");
      cy.wrap(element).click();
      return false;
    }
  })
oddsSelectionElements.oddsButton().not(".selectionAdded"); 

Answer 3

好的，要解决此问题，您可以添加超时。这可以是单个命令的本地或全局的。默认情况下，cypress 的超时时间为 4 秒

要在本地应用超时，您可以执行以下操作：

//timeout for 7 seconds
cy.get('selector', { timeout: 7000 }).("have.class", "selectionAdded")  

或者，如果您想全局增加所有命令的超时时间，请转到 cypress.json 并添加：

defaultCommandTimeout: 7000

也请更改：

oddsSelectionElements.oddsButton().("not.have.class", "selectionAdded")