在获取和返回 DOM 元素之前让函数等待答案

【问题标题】：Make function wait before getting and returning DOM element在获取和返回 DOM 元素之前让函数等待
【发布时间】：2013-08-01 23:24:32
【问题描述】：

使用 Mocha > Chai > PhantomJS 进行一些无头测试。一切都已设置并正常工作，但我正在尝试用错误的凭据填写表单，然后检查是否创建了 DOM 元素。

我想做的基本上是这样的：

it('should display error message string for bad credentials', function(done) {
    page.evaluate(function() {
        document.querySelector('input.form-input[type="text"]').value = 'foo@bar.com';
        document.querySelector('input.form-input[type="password"]').value = 'wrongpass';
        document.querySelector('input.form-action-b').click();
        return document.querySelector('div.status-oops p').innerText;
    }, function(result) {
        result.should.equal('Username and password do not match.');
        done();
    });
});

但我得到：“未捕获的类型错误：无法读取属性‘应该’为空”

...因为 div.status-oops 还不存在。我在 Chrome 控制台中得到了相同的结果，但如果我在几秒钟后尝试显示相同的文本，它就可以正常工作。

有什么办法可以延迟退货吗？

【问题讨论】：

对于初学者，click() 在 Phantom 中不起作用。
click() 实际上在此设置中有效，因为我有另一个成功利用它的测试：gist.github.com/dropknow1edge/6137988

标签： javascript asynchronous phantomjs mocha.js chai

【解决方案1】：

看看waitfor.js。您可以设置一个计时器来等待元素出现。您的代码将类似于：

it('should display error message string for bad credentials', function(done) {
    page.evaluate(function() {
        document.querySelector('input.form-input[type="text"]').value = 'foo@bar.com';
        document.querySelector('input.form-input[type="password"]').value = 'wrongpass';
        document.querySelector('input.form-action-b').click();
    });

    waitFor(function() {
        // wait for 'div.status-oops p' to appear
        return page.evaluate(function() {
            return document.querySelector('div.status-oops p').is(":visible");
        });
    }, function() {
        // on appearance, grab the innerText and compare it to the desired value
        result = page.evaluate(function() {
            return document.querySelector('div.status-oops p').innerText;
        });
        result.should.equal('Username and password do not match.');
        phantom.exit();
    });
});

【讨论】：