Troubleshoot - Capybara

Issues with Percy Capybara SDK during the visual testing process.

Capybara is a feature-rich testing framework for web applications in the Ruby programming language. This page describes how to troubleshoot various issues when using Percy Capybara SDK during the visual testing process.

Waiting for elements with Capybara

Capybara has a robust internal waiting system designed to efficiently wait for test execution until specific page elements appear. Use the below code to efficiently wait for the #new-project element to exist, with and without RSpec. No need to use a flaky sleep call when using Capybara.

With RSpec tests

Without RSpec tests

You can use Capybara’s generic has_no_css?/has_no_content?/has_no_xpath? methods to make sure that the page state is correct before continuing on. You probably will want to raise an exception to stop execution if the query for the element returns true.

More info

• https://github.com/teamcapybara/capybara#querying
• https://github.com/teamcapybara/capybara#asynchronous-javascript-ajax-and-friends

Missing styles

If your screenshots are missing styles and you’re using Webpacker to build your apps front end assets, you will need to configure it to extract the CSS when building for tests. By default, Webpack will generate CSS as a blob asset, which cannot be discovered or saved when we’re doing asset discovery. In your webpacker config file you will need to specify extract_css: true:

Reference Topic

• Percy Common - FAQs