Capybara: Finding invisible elements and how to test that an element is not visible

Posted Over 2 years ago. Visible to the public. Repeats. Linked content.

When Capybara locates elements in the DOM, by default it allows only accessing visible elements -- when you are using a driver that supports it (e.g. Selenium, not the default Rack::Test driver).

Consider the following HTML:

<div class="test1">One<div>
<div class="test2">Two</div>

With some CSS:

.test1 { display: block }
.test2 { display: none }

We will be using Capybara's find below, but this applies to any Capybara finder methods.

Default: visible: :visible or visible: true

As described above, by default Capybara finds only visible elements.

  • find('.test1') finds the .test1 element
  • find('.test2') raises a Capybara::ElementNotFound error, as the .test2 element is not rendered.

Using find(...) means the same as find(..., visible: true) or find(..., visible: :visible).

Note that you could change the default behavior by setting the ignore_hidden_elements config option. However, ignoring invisible elements is a useful default.

Ignoring visibility with visible: :all or visible: false

If you want to access the hidden .test2 element, you can do so by supplying an option visible: :all.
Note that this only removes the visibility restriction, meaning:

  • find('.test1', visible: :all) finds the .test1 element
  • find('.test2', visible: :all) finds the .test2 element

Note that Capybara also supports visible: false as a synonym for visible: :all.
Since it is not always clear that visible: false means "both hidden and visible elements", I suggest you prefer :all over false.

Finding invisible elements with visible: :hidden

What if you want to test that .test1 is not visible? Use visible: :hidden

  • find('.test1', visible: :hidden) raises a Capybara::ElementNotFound error, as the .test1 element is not hidden.
  • find('.test2', visible: :hidden) finds the .test2 element

As an example, an RSpec test which tries to confirm an element exists but is currently not visible, would say:

expect(page).to have_css('.test2', visible: :hidden)
github.com
Arne Hartherz
makandra.com
Say thanks2
Last edit
Over 2 years ago
Arne Hartherz
License
Source code in this card is licensed under the MIT License.

Related cards:

Cucumber: Test that an element is not overshadowed by another element

I needed to make sure that an element is visible and not overshadowed by an element that has a higher z-index (like a modal overlay).

Here is the step I wanted:

Then the very important notice should not be overshadowed by another element
`...

How to create giant memory leaks in AngularJS (and other client-side JavaScript)

This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users.

Although this guide has been written for Angular 1 originally, most of the advice is relevant...

Fixing flaky E2E tests

An end-to-end test (E2E test) is a script that remote-controls a web browser with tools like Selenium WebDriver. This card shows basic techniques for fixing a flaky E2E test suite that sometimes passes and sometimes fails.

Although many examples ...

How to test print stylesheets with Cucumber and Capybara

A print stylesheet is easy to create. Choose a font suited for paper, hide some elements, done. Unfortunately print stylesheets often break as the application is developed further, because they are quickly forgotten and nobody bothers to check if ...

Check that an element is hidden via CSS with Spreewald

If you have content inside a page that is hidden by CSS, the following will work with Selenium, but not when using the Rack::Test driver. The Selenium driver correctly only considers text that is actually visible to a user.

Then I should not ...

How to employ and run your tests with parallel_tests to speed up test execution

When your cucumber features grow massively over time, the test execution can take a lot of time.
One easy way to speed up your test execution is to use the parallel_tests gem.
It comes along with some ...

Using feature flags to stabilize flaky E2E tests

A flaky test is a test that is often green, but sometimes red. It may only fail on some PCs, or only when the entire test suite is run.

There are many causes for flaky...

Change how Capybara sees or ignores hidden elements

Short version

  • Capybara has a global option (Capybara.ignore_hidden_elements) that determines whether Capybara sees or ignores hidden elements.
  • Prefer not to change this global option, and use the :visible option when callin...

Invoices: How to properly round and calculate totals

While it might seem trivial to implement an invoice that sums up items and shows net, gross and vat totals, it actually involves a lot of rules and caveats. It is very easy to create invoices where numbers don't add up and a few cents are missing....

Upgrading Cucumber and Capybara to the latest versions available for Rails 2

Specify these gem versions in your Gemfile:

gem 'cucumber', '~> 1.3.0'
gem 'cucumber-rails', '= 0.3.2' # max version for Rails 2
gem 'capybara', '< 2' # capybara 2+ requires Rails 3
gem 'mime-types', '< 2' # dependeny of capybara

...

Posted by Arne Hartherz to makandra dev (2022-01-11 11:54)
This website uses short-lived cookies to improve usability.
or learn more