1

I'm having an issue trying to click or submit a button on a test script I am running using selenium-webdriverjs.

I use the following NPM modules:

  • selenium-webdriver
  • mocha
  • chai
  • chai-as-promised

After filling out the form I am unable to click the button to go through to the dashboard. I have the button highlighted but it won't click with the mouse actions.

Here are some screen shots if they help (I took them manually during the test):

after both email and password sections are filled, clicked remember me button

mouse hovering over sign in button

On the last picture I want to click the sign in button, which should have the mouse hovering over it due to showing the intended css effects, and then somehow to advance to the next page.

Here is my test script in its entirety:

var driver = require('selenium-webdriver'),
      chai = require('chai'),
    expect = chai.expect;

    chai.use(require('chai-as-promised'));

describe('Webdriver - Admin Page Tests - ', function() {

    beforeEach(function() {
        this.timeout(10000);
        this.driver = new driver.Builder().withCapabilities(driver.Capabilities.firefox()).build();
        return this.driver.get('https://admin.example.us/en-US/sign-in');
    });

    afterEach(function() {
        return this.driver.quit();
    });

    describe('Login verification -', function() {

    it('filling in credentials and accessing the portal', function () {
            this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(2) > input'
            }).sendKeys('test@example.com');

            this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(3) > input'
            }).sendKeys('example');

            this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(4) > input[type="checkbox"]'
            }).click();

            var formButton = this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(5) > button'
            });

            this.driver.actions()
                .mouseMove(formButton)
                .click()
                .perform();

            return expect(this.driver.getCurrentUrl()).to.eventually.equal('https://admin.example.us/en-US/dashboard');
        });
    });
});

This is the error I get when running my test script:

1) Webdriver PC6 - Admin Page Tests -  Login verification - filling in credentials and accessing the portal:

      AssertionError: expected 'https://admin.example.us/en-US/sign-in' to equal 'https://admin.example.us/en-US/dashboard'
      + expected - actual

      -https://admin.example.us/en-US/sign-in
      +https://admin.example.us/en-US/dashboard

The above error basically confirms my issue that I am unable to properly click the sign in button and advance to the next page.

Here is what the login form looks like (I stripped the styling and react-ids from it):

<div>
  <h2>
    <span>Sign In</span>
    <span></span>
    <button type="button">
      <div>
        <span class="material-icons">help</span>
        <span>help</span>
      </div>
    </button>
  </h2>
  <form name="auth">
    <div class="Form-errorSummary">
      <ul></ul>
    </div>
    <div >
      <label for="mui-id-1">E-mail</label>
      <input required="" name="email" value="" type="text" id="mui-id-1">
      <hr><hr>
    </div>
    <div>
      <label for="mui-id-2">Password</label>
      <input name="password" required="" type="password" id="mui-id-2">
      <hr><hr>
    </div>
    <div>
      <input type="checkbox" name="remember">
      <div>
        <div>
        </div>
        <div>
          <div>
            <svg viewBox="0 0 24 24">
              <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
            </svg>
            <svg viewBox="0 0 24 24">
              <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z">
              </path>
            </svg>
          </div>
          <div>
          </div>
          <div>
          </div>
        </div>
        <label for="mui-id-48">Remember me</label>
        <div></div>
      </div>
    </div>
    <div>
      <button tabindex="0" type="submit">
        <div>
          <div>
            <span>Sign In</span>
          </div>
        </div>
      </button>
    </div>
  </form>
</div>

I've tried other methods like using the click function on the findElement portion such as:

this.driver.findElement({
  css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).click();

But it doesn't work. Neither does using sendKeys on findElement using these lines:

this.driver.findElement({
  css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).sendKeys(driver.Key.ENTER);

or

this.driver.findElement({
  css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).sendKeys(driver.Key.RETURN);

When I have the form in the same state in an instance of chrome I can easily click the button with vanilla JS in the chrome dev tools using this line:

document.querySelector('#app > div > div > div > div > form > div:nth-child(5) > button').click()

but when I try to using executeScript in my testing script it doesn't work:

this.driver.executeScript("document.querySelector('#app > div > div > div > div > form > div:nth-child(5) > button').click()");

I keep getting the same error as above, that I am stuck on the sign in page and unable to move forward.

azemPC
  • 264
  • 3
  • 15
  • I can't reproduce this, but seems like others have encountered the [same problem](http://stackoverflow.com/questions/33645673/selenium-webdriver-w-chai-as-promised-and-mocha-failing-to-wait) with your configuration. I don't think the button is not being clicked, i think you are getting the url before location is changed. Try waiting for an element present after login or until.titleIs / titleMatches, ... – cviejo Nov 24 '15 at 16:59
  • adding in a wait/sleep function did resolve my issue. Thank you. I do have an additional question, I thought I originally used promises in my expect functions. Shouldn't they be waiting for the element to appear? Why do I have to include an extra wait step when I thought making a promise did that for me? – azemPC Nov 30 '15 at 15:26

1 Answers1

0

I was able to make the test pass by adding a sleep function to wait for the page to fully load when looking for certain elements and expectations:

this.driver.sleep(250)

I messed around with the times and it seemed that 250ms was the minimum amount needed for my purposes without making the tests too long.

Here is how it looks when implemented in my code:

var driver = require('selenium-webdriver'),
      chai = require('chai'),
    expect = chai.expect;

    chai.use(require('chai-as-promised'));

describe('Webdriver - Admin Page Tests - ', function() {

    beforeEach(function() {
        this.timeout(10000);
        this.driver = new driver.Builder().withCapabilities(driver.Capabilities.firefox()).build();
        return this.driver.get('https://admin.example.us/en-US/sign-in');
    });

    afterEach(function() {
        return this.driver.quit();
    });

    describe('Login verification -', function() {

    it('filling in credentials and accessing the portal', function () {
        this.driver.sleep(250);

        this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(2) > input'
        }).sendKeys('test@example.com');

        this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(3) > input'
        }).sendKeys('example');

        this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(4) > input[type="checkbox"]'
        }).click();

        var formButton = this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(5) > button'
        });

        this.driver.actions()
            .mouseMove(formButton)
            .click()
            .perform();

        this.driver.sleep(250);

        return expect(this.driver.getCurrentUrl()).to.eventually.equal('https://admin.example.us/en-US/dashboard');
        });
    });
});
azemPC
  • 264
  • 3
  • 15