Firefox and Chrome Selenium webdrivers differ in behaviour with Capybara and SitePrism

Question

I have a Sign In page that contains 2 text fields and a submit button. The submit button is only enabled upon the text fields being filled correctly.

<fieldset>
    <div class="control">
        <input type="email" name="username" class="" value="Email">
        <span class="input-icon"></span>
    </div>
    <div class="control">
        <input type="text" name="password" class="" value="Password">
        <span class="input-icon"></span>
    </div>
    <input type="submit" id="signInFormSubmitButton" disabled="" value="Sign In">
</fieldset>

I'm using Capybara and SitePrism to identify the web elements of the SignInPage class:

class SignInPage < SitePrism::Page
  element :username_field, "input[name='username']"
  element :password_field, "input[name='password']"
  element :sign_in_button, "input[id='signInFormSubmitButton']"

and interact with those within a method of the same class:

  def signInWith(username, password)
    username_field.set username
    # password_field.click
    password_field.set password
  end

My step definition then calls that method:

When(/^I attempt to sign in with "([^"]*)" and "([^"]*)"$/) do |username, password|
  @home_page.header.signIn
  @sign_in_page.signInWith(username, password)
end

When running my test using the chromedriver, all the text fields are filled, enabling the Sign In button, which is then verified and pressed by another method. With geckodriver, I receive the following error:

Element is not Enabled (Selenium::WebDriver::Error::InvalidElementStateError)

Using sleeps to diagnose, it turns out the password text field is not being populated because the focus is not being set to it by simply using password_field.set password. The only way, I can get the test to behave as the chromedriver does, it to uncomment the line, # password_field.click.

Should there be such a big difference between Selenium webdrivers? After all, it could be said that adding the extra click represents more of a human-driven behaviour, and on the other hand, it could be said I am having to introduce unneccessary steps in order to make it work.

Notable gem versions:

capybara (2.14.4, 2.6.0)
cucumber (2.4.0)
selenium-webdriver (3.4.3)
site_prism (2.9)

webdrivers:

chromedriver v2.29
geckodriver v0.14.0

score 0 · Answer 1 · answered Aug 03 '17 at 16:55

Should there be such a big difference - No. Can there be - Yes.

Different browsers can (and do) behave differently and JS can have different effects as well. That being said, both your chromedriver and geckodriver are out of date. Upgrade to chromedriver 2.31 and geckodriver 0.17 (0.18 won't work properly until FF 55 is released) and see if that fixes the discrepancy.

Additionally, you list two versions of Capybara - hopefully you're not actually running one of the tests with Capybara 2.6.0 - that's massively out of date too.

As a final tip (not related to your issue), when using SitePrism you can utilize Capybara selectors to make your element definitions cleaner and require less direct CSS/XPath

class SignInPage < SitePrism::Page
  element :username_field, :field, 'username'
  element :password_field, :field, 'password'
  element :sign_in_button, :button, 'signInFormSubmitButton'

Unfortunately, updating both of the drivers (specifically the `geckodriver` did not resolve this issue. I also cleaned up the `capybara` gem and removed the old version. This had no effect on the issue. — jimjamz, Aug 07 '17 at 10:23
@jimjamz It sounds like you may have some JS attached to the username field doing validation or something(?) that is preventing the focus shift to the password field in FF due to differences in event timing. — Thomas Walpole, Aug 07 '17 at 17:32

Firefox and Chrome Selenium webdrivers differ in behaviour with Capybara and SitePrism

1 Answers1