Javascript 使函数在获取和返回DOM元素之前等待

使用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();
    });
});

但我得到了：“未捕获的TypeError:无法读取null的属性'should'”

…因为div.status-oops还没有出现。我在Chrome控制台中得到了相同的结果，但如果我在几秒钟后尝试显示相同的文本，效果就很好了

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

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

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();
    });
});

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

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();
    });
});

对于初学者，

click（）

在幻影中不起作用。

click（）

实际上在这个设置中起作用，因为我有另一个测试成功地利用了它：对于初学者，

click（）

在幻影中不起作用。

click（）

实际上在这个设置中起作用，因为我有另一个测试成功地利用了它：