单击后如何测试显示元素? [英] how to test showing an element after a click?

问题描述

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

I'm working with mocha unit test and I need to test if an element is visible after click on a radio button. In other words I have two radio buttons that toggle two elements using javascript and I would like to test this.

这是我的测试

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")始终为假，在实际页面中它可以正常工作，有任何建议吗?

the first test passes but the second one doesn't. the problem is that $("#completed-task").is(":visible") is always false, in the actual page this works just fine, any suggestions?

推荐答案

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

You've got an animation on the element that is being shown / hidden. You need to put your assertion after a timeout. Since you're only checking if it's ':visible', you don't need to wait for the entire animation to complete. I would start with 100ms (or even 0ms) and then see if you need more.

例如:

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

This answer has more details and a link to docs: https://stackoverflow.com/a/15982893/361609

这篇关于单击后如何测试显示元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！