Make function wait before getting and returning DOM element

Question

Doing some headless testing using Mocha > Chai > PhantomJS. Everything is setup and working, but I'm trying to fill a form with bad credentials, and then check to see that a DOM element is created.

What I want to do is basically this:

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

But I'm getting: "Uncaught TypeError: Cannot read property 'should' of null"

...because div.status-oops isn't there yet. I get the same results in Chrome console, but if I then try to show the same text a few seconds later it works just fine.

Any ideas how to delay the return?

`click()` actually does work in this setup, as I have another test that utilizes it successfully: https://gist.github.com/dropknow1edge/6137988 — dropknow1edge, Aug 02 '13 at 06:57

score 1 · Answer 1 · edited Sep 22 '14 at 11:29

Take a look at waitfor.js. You can set a timer to wait for the element to appear. Your code will look something like:

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

Make function wait before getting and returning DOM element

1 Answers1