Capybara + Webkit: How to test client side validations - "required" input elements?

Question

Using Rspec and Capybara, I'm trying to test a failing validation for a form, where a "required" input is not filled in, so it fails. New navigators understanding HTML5 provide built-in validations, and I understand Capybara is using that as well. Before, I was using

page.should have_error

which doesn't work for me anymore.

Someone knows how to test this now?

Many thanks!

David

Answer 1

HTML5 client side validations are tricky to find. I found this post with a great answer. The code is:

describe "when I leave required field empty" do
  it "I get an the correct html5 validation error" do
    #Leave the field empty
    click_on "Save" # or whichever button triggers the submit

    message = page.find("#field_id_attr").native.attribute("validationMessage")
    expect(message).to eq "Please fill out this field."
  end
end

Basically the way it works is that the field element has an attribute called "validationMessage" and the process is:

1. Click submit - this triggers the error message
2. Get a reference to the native(html) attribute(as opposed to the Capybara page object attribute) called "validationMessage". This will give you the value or the message itself.
3. Assert that the value is as expected.