rbatta rbatta - 4 months ago 15
AngularJS Question

Travis CI not recognizing large resolution on xvfb causing feature specs to fail

I am trying to get travis to pass my feature specs, however with xvfb default settings, it runs with a smaller window. As the site uses responsive webdesign, it means it's viewing the page as if it were on mobile. My tests fail because of this.

I searched around and found various different ways to set up my

.travis.yml
file, none of which work, but here is what I currently have:

.travis.yml

language: ruby
rvm:
- 2.3.0
addons:
postgresql: "9.4"

before_install:
- "export DISPLAY=:99.0"
- "sh -e /etc/init.d/xvfb start"
- "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16"
- "sleep 3"

before_script:
- cp config/database.yml.travis config/database.yml
- cp config/application.yml.example config/application.yml
- psql -c 'create database db_test;' -U postgres

script:
- bundle exec rake db:migrate
- bundle exec rake


Sample view code that has the responsive bit (in haml):

_view.haml

.row
.col-xs-12
%label
%span.visible-lg-inline Line {{question + 1}}:
%b


As you can see, the
visible-lg
thing is what is borking things. The entire app uses
visible-lg
/
hidden-lg
classes in different spots so changing this isn't an option. Also it's bootstrapped.

Associated Travis error:

Failure/Error: expect(page).to have_content("Line 1: #{question}")


My specs pass locally, since Firefox loads up a standard sized window vs mobile-sized/small window. How do I change my
.travis.yml
file to get it to respect the larger screen resolution I've set?

Another example Travis error:

Failure/Error: click_on 'Preview'

Capybara::ElementNotFound:
Unable to find link or button "Preview"


('Preview' exists but not in mobile mode)

I am using Ruby 2.3, Rails 4.2.5, and AngularJS

Answer

The answer was not my travis.yml file as I originally thought.

After a week of searching, I stumbled upon this: https://discuss.circleci.com/t/capybara-driver-rack-test/407 which had a link to this: http://blaulabs.de/2011/11/22/acceptance-testing-with-responsive-layouts/

In my spec/spec_helper.rb I put the following at the very bottom after the config section(s):

def set_selenium_window_size_to_large
  page.driver.browser.manage.window.resize_to(1280, 1280)
end

def set_selenium_window_size_to_small
  page.driver.browser.manage.window.resize_to(600, 600)
end

With the above code, I can now invoke 2 different window sizes so I can test whether the hamburgler menu options are not displayed when in mobile mode or when in desktop mode.

In my feature specs, I then called that method in my before block so all my tests that needed it get it. Also, rails_helper calls spec_helper so I'm covered that way.

require 'rails_helper'

feature 'A question page', :devise, js: true do
  before do
    @question = create :question

    set_selenium_window_size_to_large

    visit question_path
    click_on 'Get started'
  end
  scenario 'it has some questions' do
    expect(page).to have_content("Line 1: #{question}")
  end
end

My .travis.yml file went back to a simpler one:

language: ruby
rvm:
- 2.3.0
addons:
  postgresql: "9.4"

before_install:
- "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16"

before_script:
- cp config/database.yml.travis config/database.yml
- cp config/application.yml.example config/application.yml
- psql -c 'create database db_test;' -U postgres
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start

script:
- bundle exec rake db:migrate
- bundle exec rake

All my tests are green as expected!