javascript - 单击后如何测试显示元素？

Question

我正在使用 Mocha 单元测试，因此需要测试单击单选按钮后是否可见某个元素。换句话说，我有两个使用javascript切换两个元素的单选按钮，我想对此进行测试。

这是我的测试:

it("Checking #completed-task existance", function (done) {
    chai.assert.equal($("#completed-task").length, 1);
    done();
});

it("Checking #completed-task is visible", function (done) {
    $("#master div.onoffswitch").find("input[data-id='completed-task']").click();
    chai.assert.equal($("#completed-task").is(":visible"), true);
});

第一次测试通过，但第二次没有通过。问题是 $("#completed-task").is(":visible")始终为false，在实际页面中此方法很好，有什么建议吗？

Answer 1

在显示/隐藏的元素上有一个动画。您需要在超时后放入断言。由于只检查它是否是':visible'，所以不需要等待整个动画完成。我将从100毫秒(甚至0毫秒)开始，然后查看是否需要更多。

例如:

it("Checking #completed-task is visible", function (done) {
    $("#master div.onoffswitch").find("input[data-id='completed-task']").click();

    // This may be needed to increase the mocha timeout.        
    //this.timeout(100);

    setTimeout(function() {
        chai.assert.equal($("#completed-task").is(":visible"), true);
        done();
    }, 100);
});

该答案有更多详细信息以及指向文档的链接:
https://stackoverflow.com/a/15982893/361609