Get URL after sending form with webdriverio

Question

I need to automate a sign in process test. I'm using webdriver.io in order to do that.

Here is my problem.

I have this bizarre sign in process:

1. I have to fulfil a form in a regular webpage
2. After sending the form, I'll be redirected to an URL that does not exist, but it contains an access code in one of its query params
3. Then I take this access code and send it to another location to obtain an access token.

What I need is a way of programmatically complete step 2, since 1 and 3 I have already figured out.

I'm trying like this:

var webdriverio = require('webdriverio');
var options = {
    desiredCapabilities: {
        browserName: 'chrome'
    }
};

webdriverio
    .remote(options)
    .init()
    .url(myUrl)
    .title(function(err, res) {
        console.log('Title was: ' + res.value);
    })
    .setValue('#usuario', user)
    .setValue('#password', password)
    .submitForm('form', function(){
        this.url(function(err, res){
            console.log(res.value);
        });
        this.pause(5000, function(){
            this.end();
        });
    });

However, it seems like the callback for submitForm is called before the page gets loaded. This way, my log shows the very same URL I passed before.

If I try like this:

.submitForm('form', function(){
    this.pause(5000, function(){
        this.url(function(err, res){
            console.log(res.value);
            this.end();
        });
    });
});

I get this strange output:

data:text/html,chromewebdata

I know that a pause is not flawless in this context, but I could not find an asynchronous way of doing this.

Can anyone help?

Answer 1

You are probably not waiting for specific state after your form is submitted. What is the expected result after the form is submitted?

For example, you are expecting browser to redirect to a page with a header

<h1 class="success">Your form is submitted successfully</h1>

Then you should do something like this:

webdriverio
    .remote(options)
    .init()
    .url(myUrl)
    .waitForExist('form')
    .setValue('#usuario', user)
    .setValue('#password', password)
    .submitForm('form')
    .waitForExist('h1.success', 5000)
    .getText('h1', function (err, res) {
        expect(res).to.contain('submitted successfully'); //chai.js
    })
    .call(done);