Capybara: find('#label').click not working for hidden input

[Souravgoswami]

Note: This is for issues with Capybara. If you have a howto type question, please ask on the mailing list as requested in the README: http://groups.google.com/group/ruby-capybara

Meta

Capybara Version:
3.33.0

Expected Behavior

find('#label').click() to work.

Actual Behavior

Test fails. Capybara can't click on label of a hidden input, but an actual user of the app with a browser (tried Firefox, Chromium, and Falkon) can.

Clicking on a link with some content redirected to show action, but with the code in reproduce, it fails.

Steps to reproduce

1. I Have a label in a new.html.erb:

<%= form_for @post do |f| %>
    <div class="form-group">
        <%= f.date_field :date, class: 'form-control' %>
        <br>

        <%= f.text_area :rationale, class: 'form-control' %>
        <br>

        <center>
            <label id="label" class="btn-outline-pink-animated" data-content="Save">
                <%= f.submit '', style: 'display: none' %>
            </label>
        </center>
    </div>
<% end %>

The label has no content, I am setting the data content of the label with the data-content="something" in the <label>, which sets the text in the button's ::after pseudo element.

The button can be found here...

1. In test, have this code wrapped in a describe block:

it 'can be created from new form page' do
    fill_in 'post[date]', with: Date.today
    fill_in 'post[rationale]', with: 'Some rationale'

    page.find('#label').click

    expect(page).to have_content('Some rationale')
end

[twalpole]

This is behaving as expected - you're asking Capybara to click on a label element that has no size on the page so it can't be clicked on (pseudo elements are not part of the element). Instead you'd need to click on an element that actually has size on the page - in your example it'd probably be the <center> element - find('center').click

[Souravgoswami]

That didn't work either. I guess it's because

isn't clickable.

But the solution was so simple, not sure why I didn't figure out myself before putting it here, I am noob BTW, this could help others:

1. I added id="submit" to the submit button:

<div class="form-group">
    <center id="save">
        <label class="btn-outline-pink-animated" data-content="Save">
            <%= f.submit '', style: 'display: none', id: "submit" %>
        </label>
    </center>
</div>

1. Instead of find('#submit').click, I put find('#submit', visible: false).click

This fixed the issue.

[twalpole]

I wouldn’t depend on that - I’m guessing it will only work in Chrome and should stop working whenever they become spec compliant. It's also not replicating what a user would do, so makes your test pretty much invalid/pointless.

[Souravgoswami]

I guess the user will click the hidden submit button by clicking on the pseudo elements, IDK another way to do that with rspec, and the code find('center').click didn't work at all!

But the buttons I created works on chrome, firefox, falkon browser as far as I can say... Here's a sample codepen:
https://codepen.io/souravgoswami/pen/VweqQgg

It works flawlessly for my rails app as well, but the rspec fails...

[twalpole]

What driver are you using?

[Souravgoswami]

I am using _rack_test_ driver.

[twalpole]

That explains why clicking on center doesn’t work - rack_test is very basic and doen’t look at child elements for clickable things. Your HTML really isn’t properly testable with rack_test

[Souravgoswami]

Yes, Sorry for the late reply, and this might help others, I am done with Selenium. In my app with many AJAX calls, putting js: true to the it() works just fine, and tests passes... And yes, the find('center').click() also works now, but I gave it an ID and remove the <center> because it was just for time being (shouldn't be used in HTML5)...