需要评估元素的类并在代码不正确时循环代码答案

【问题标题】：Need to evaluate the class of an element and loop through code while it's not true需要评估元素的类并在代码不正确时循环代码
【发布时间】：2021-11-04 14:25:54
【问题描述】：

我必须自动化一个具有“拆卸”方法的脚本，以确保页面的状态与我们交互之前的状态相同。我在弄清楚如何做到这一点时遇到问题。我目前的想法是当某个元素的状态通过一个类不存在或在 DOM 中不可见时执行一个 while 循环。

我们有一个“undoAction”按钮，一旦页面上没有任何要撤消的内容，它的类会更新为包含“undo-disabled”，同时保持原始“undoAction”类不变。

我的问题是我在互联网上找不到任何“虽然不是真的”条件。

启用时的元素：

<div class="undoAction  editor-topbar-item editor-topbar-icon-item"><i class="fa fa-undo"></i></div>

禁用时的元素：

<div class="undoAction undo-disabled editor-topbar-item editor-topbar-icon-item"><i class="fa fa-undo"></i></div>

我想做的是：

while(! .undo-disabled){
    .click(.undoAction)
}

我也尝试在 .undoAction 为真时执行此循环，但问题是他们只是将 .undo-disabled 添加到元素的类列表中，而不删除 .undoAction 类，所以它进入一个无限循环。

while(.undoAction){
    await t
        .click(.undoAction)

    if(.undo-disabled){
        break
    }
}

如果不创建一些东西来计算我在页面上执行的交互次数并为交互次数和递减设置 for 循环索引，还有其他方法可以处理这种情况吗？

谢谢，

【问题讨论】：

标签： javascript testing automated-tests e2e-testing testcafe

【解决方案1】：

如果您需要多次重复点击，请在循环内重新评估DOM node state。例如：

const button = Selector('.undoAction');
let disabled = await button.hasClass('undo-disabled');

while(!disabled) {
    await t.click(button);

    disabled = await button.hasClass('undo-disabled');
}

但是，如果您只想等到单击后添加“.undo-disabled”类，则可以使用这样的断言：

await t.expect(button.hasClass('undo-disabled')).ok({ timeout: 30000 });

【讨论】：

【解决方案2】：

如果我理解正确，您想重复单击撤消按钮，直到添加了 undo-disabled 类。

如果这个假设是正确的，一个解决方案是运行一个间隔，每半秒运行一次（如果需要，可以更长），然后单击撤消按钮。如果它检测到undo-disabled 类，那么它将清除间隔（停止它）。

注意：可能有更好的方法可以在幕后执行此操作，而不必依赖这样的 UI，但这里是您所要求的示例解决方案。

let counter = 0; // just for this example and not needed.
const undoButton = document.querySelector(".undoAction");

// below event listener is just for this example and not needed
undoButton.addEventListener("click", function() {
  ++counter;
  console.log(`undo click count: ${counter}`)
});


function startUndo() {
  const interval = setInterval(function() {
    const btn = document.querySelector(".undoAction")

    if (btn.classList.contains("undo-disabled")) {
      clearInterval(interval);
      return;
    }

    btn.click();

    // below "if" is just for this example and not needed
    if (counter === 4) {
      btn.classList.add("undo-disabled");
    }

  }, 500);
}


startUndo();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="undoAction editor-topbar-item editor-topbar-icon-item"><i class="fa fa-undo"></i></div>

【讨论】：