The finer points of testing element visibility

dashboard_home.feature

@javascript

Feature: Dashboard home

  Scenario: Logged-out user navigates to the dashboard
    Given I am not logged in
    When I navigate to '/#dashboard'
    Then I should not see the '#dashboard-wrapper' element
    And I should see the '#homepage-wrapper' element

env.rb

require 'capybara/cucumber'
require 'rspec/expectations'
require 'selenium-webdriver'

require_relative 'wait_for_ajax'

include WaitForAjax

Capybara.run_server        = false
Capybara.app_host          = 'http://localhost'

Capybara.register_driver :selenium_chrome do |app|
  Capybara::Selenium::Driver.new(app, browser: :chrome)
end

Capybara.javascript_driver = :selenium_chrome

original_canto_steps.rb

# These are the steps that didn't work. Specifically, the last step failed, saying the #homepage-wrapper element was not visible,
# when in fact it was visible in every desktop browser I tested with. Do not include these steps in your project.

Given(/^I am not logged in$/) do 
  page.driver.browser.manage.delete_all_cookies
end

When(/^I navigate to the dashboard$/) do 
  visit '/#dashboard'
end

Then(/^I should not see the '(.*)' element$/) do |id|
  expect(find(id)).not_to be_visible
end

Then(/^I should see the '(.*)' element$/) do |id|
  expect(find(id)).to be_visible
end

Testing Element Visibility in Capybara-Cucumber (UNFINISHED)

In this gist I'll show how I solved the problem of testing the visibility of elements using Capybara/Cucumber integration tests. The tests are being run against a locally-hosted site and do not have access to its internals, so I'm leaving the internals out here. Do note that the app itself is written in JavaScript, with only the integration tests being Ruby. The relevant file structure looks like this:

├── features/
|   ├── step_definitions/
|   |   ├── canto_steps.rb
|   ├── support/
|   |   ├── env.rb
|   |   ├── wait_for_ajax.rb
|   ├── dashboard_home.feature

You are encouraged to familiarize yourself with the ways jQuery and CSS handle visibility and display since those are the most obvious sources of problems in this scenario. This gist is not finished and deals with a problem I was having whereby the 

wait_for_ajax.rb

module WaitForAjax
  def wait_for_ajax
    Timeout.timeout(Capybara.default_wait_time) do 
      loop until finished_all_ajax_requests?
    end
  end

  def finished_all_ajax_requests?
    page.evaluate_script('jQuery.active').zero?
  end
end