lundi 23 novembre 2015

Unable to click or submit button using selenium webdriver js

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('http://ift.tt/1Tax7eX');
    });

    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('http://ift.tt/1R1rhgI');
        });
    });
});

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 'http://ift.tt/1Tax7eX' to equal 'http://ift.tt/1R1rhgI'
      + expected - actual

      -http://ift.tt/1Tax7eX
      +http://ift.tt/1R1rhgI

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.

Aucun commentaire:

Enregistrer un commentaire