1

I'm trying to use chimpjs with cucumber and selenium to automate login, but we currently do login through a modal. And currently all attempts to click on the login button on that modal result in the same error:

 Error: unknown error: Element is not clickable at point (764, 42). Other element would receive the click: <div class="login-overlay " style="display: block; opacity: 0.969096;">...</div>

These are the steps I am taking for selenium. I'm waiting for the modal to show up before entering the username or password, but when I try to click the login button, it fails on me.

module.exports = function() {
  this.Given(/^I am on the website homepage$/, function () {
    client.url('example.com');
  });

  this.When(/^I click the login button$/, function () {
    client.click('.navbar__link--login');
  });

  this.Then(/^I see the login screen$/, function () {
    client.waitForExist('.login-overlay');
  });

  this.Then(/^I enter my username in the email field$/, function () {
    client.setValue('#username', 'myemail@email.com');
  });

  this.Then(/^I enter my password in the password field$/, function () {
    client.setValue('#password', 'myemail@email.com');
  });

  this.Then(/^And I click the login button$/, function () {
    client.click('.login-btn');
  });

};

Currently everything passes except for the last step. Is it because we're using a modal for login? Or is there a way to click on buttons on modals in selenium? Or am I missing a really obvious step?

Solution: I found a solution to this, I was unable to click on the element, however I was able to do a form submission through the client.submitForm(selector) option. Doing this seemed to fix the problem, and I was able to pass the final step. I also changed the final step to say 'And I submit the login form' for readability. You can see more on the form submit option here: http://webdriver.io/api/action/submitForm.html

Nagoshi
  • 131
  • 5

1 Answers1

1

It sounds like there is a "login-overlay" element on top of the control.

As a workaround, make it invisible:

client.execute("arguments[0].style.display = 'none';", client.element('.login-btn'));

Not tested.

alecxe
  • 414,977
  • 106
  • 935
  • 1,083