In my app I have a page that pops up a modal that will update some content in it and dismiss itself (and become invisible) after uncertain amount of time. In my spec, I am trying to wait until the modal dismisses. My strategy is to have Capybara wait for the content on the modal to become invisible by doing
expect(page).to have_css('.hidden-element', visible: :hidden, text: 'Hidden Content')
However, it looks like Capybara won't be able to get the text of a hidden element, and I am getting the error:
expected to find css ".hidden-element" with text "Hidden Content" but there were no matches. Also found "", which matched the selector but not all filters.
It would pass if I do :all
or false
, but that's not what I want:
expect(page).to have_css('.hidden-element', visible: :all, text: 'Hidden Content')
Given that I could not change my app, I wonder why that didn't work or what the best way is to achieve that in this case. Thanks!
I am using RSpec, Capybara, Capybara-webkit.
If the element is actually becoming non-visible on the page, rather than being removed from the page completely, the major difference is that when visible the text is matched against visible text with the CSS applied (text-transform, etc). So if the elements text in the HTML is actually 'hidden content' but has text-transform: capitalize
applied to it when visible you would need to test against the HTML form when checking non-visible elements
expect(page).to have_css('.hidden-element', visible: :hidden, text: 'hidden content')
If, on the other hand, the text in the HTML is as you show it and the element is actually removed from the page (rather than just being hidden) you can do
expect(page).not_to have_css('.hidden-element', visible: :hidden, text: 'Hidden Content')
to wait for it to be removed.
UPDATE: There is a limitation in Capybara < 2.11.0 when using the visible: :hidden
option that text can't be matched. You may be able to workaround it by doing something like
element = page.find('.hidden-element', visible: :all, text: 'hidden content')
expect(element).to match_css('.hidden-element', visible: :hidden)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With