I’ve been using Capybara-WebKit for a long time but while switching from CircleCI 1.0 to CircleCI 2.0 I had some problems to use it on the CI. This triggered to try Chrome Headless with Selenium Webdriver. I will show you how to configure Circle CI 2.0 and your Ruby on Rails project to use capybara/selenium/chrome headless together. Add capybara and selenium-webdriver Let’s add and gems to : capybara selenium-webdriver Gemfile group , gem gem # Gemfile :development :test do 'capybara' 'selenium-webdriver' end and run . bundle install If you already had the gems in your then ensure you have latest version with . Gemfile bundle update capybara selenium-webdriver If you want to make sure Capybara feature specs will work on your development machine: $ brew install chromedriver If your feature specs fail then upgrade the driver because you may have installed old one. $ brew upgrade chromedriver Configure Capybara Add config file for Capybara: JS_DRIVER = Capybara.default_driver = Capybara.javascript_driver = JS_DRIVER
Capybara.default_max_wait_time = RSpec.configure config.before( ) Capybara.current_driver = JS_DRIVER example.metadata[ ]
    Capybara.current_driver = example.metadata[ ]
    Capybara.current_driver = example.metadata[ ] config.after( ) Capybara.use_default_driver # spec/support/config/capybara.rb :selenium_chrome_headless :rack_test 2 do |config| :each do |example| if :js :selenium if :selenium :selenium_chrome if :selenium_chrome end :each do end end Ensure you load config files from directory: spec/support Dir[Rails.root.join( )].each { f } # spec/rails_helper.rb # The following line is provided for convenience purposes. It has the downside # of increasing the boot-up time by auto-requiring all files in the support # directory. Alternatively, in the individual `*_spec.rb` files, manually # require only the support files necessary. 'spec/support/**/*.rb' |f| require Example feature spec We can create example feature spec to test if everything works: feature before { visit root_path } it expect(page).to have_content it , expect(page).to have_content xit , expect(page).to have_content xit , expect(page).to have_content # spec/features/home_spec.rb 'Homepage Features' do # it won't run js code but it is fast do 'Hello World' end # it will run js code '' :js do 'Hello World' end # it will open Firefox # remove x from xit to run the test in Firefox on your machine to preview '' :selenium do 'Hello World' end # it will open Chrome # remove x from xit to run the test in Chrome on your machine to preview '' :selenium_chrome do 'Hello World' end end And run tests on your development machine with or . bin/rspec spec/features/home_spec.rb bundle exec rspec spec/features/home_spec.rb Configure CircleCI 2.0 to run Chrome headless Here is example : .circleci/config.yml # .circleci/config.yml version: 2 jobs: build: parallelism: 1 working_directory: ~/project-name docker: # this is important to use proper image with browsers support - image: circleci/ruby:2.4.2-node-browsers environment: PGHOST: 127.0 .0 .1 PGUSER: project-name RAILS_ENV: test - image: circleci/postgres:9.4.12-alpine environment: POSTGRES_DB: project-name_test POSTGRES_PASSWORD: "" POSTGRES_USER: project-name - image: redis:3.2.7 steps: - checkout # Restore bundle cache - type: cache-restore # remove space between { { key: project-name-{ { checksum "Gemfile.lock" }} # Bundle install dependencies - run: bundle install --path vendor/bundle # Store bundle cache - type: cache-save # remove space between { { key: project-name-{ { checksum "Gemfile.lock" }} paths: - vendor/bundle # Prepare .env, useful if you use dotenv gem - run: cp .env.example .env # Database setup - run: bundle exec rake db:create - run: bundle exec rake db:schema:load # Run rspec in parallel - type: shell command: |
          bundle exec rspec --profile 10 \
                            --format RspecJunitFormatter \
                            --out /tmp/test-results/rspec.xml \
                            --format progress

      # Save artifacts - type: store_test_results path: /tmp/test-results Speed up your tests with Circle CI parallelisation If your feature specs are very long you can save some time by running multiple parallel CI nodes. For instance set it to in and use dynamic RSpec specs allocation across CI nodes with gem and Queue Mode to get optimal test suite split to save as much time as possible. 6 .circleci/config.yml knapsack_pro # .circleci/config.yml jobs: build: parallelism: 6 steps: # some tests that are not balanced and executed only on first CI node - run: case $CIRCLE_NODE_INDEX in 0 ) npm test ;; esac # auto-balancing CI build time execution to be flat and optimal (as fast as possible). # Queue Mode does dynamic tests allocation so the previous not balanced run command won't # create a bottleneck on the CI node - run: name: RSpec via knapsack_pro Queue Mode command: |
        # export word is important here!
        export RAILS_ENV=test
        bundle exec rake "knapsack_pro:queue:rspec[--format documentation]" You can learn in 1 minute video. how RSpec test suite parallelisation works Summary Now you are good to push your code to a repository and see how your Capybara feature specs work with Chrome Headless on CircleCI 2.0. Previously published at https://docs.knapsackpro.com/2017/circleci-2-0-capybara-feature-specs-selenium-webdriver-with-chrome-headless

RSpec, Capybara, CircleCI And Chrome Headless Webdriver Configuration

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Circle CI: How To Run Ruby and JavaScript Tests in Parallel

Enabling Cuprite: A Headless Chrome Ruby Driver for Capybara

How to Build Awesome Integration Tests with Capybara

How To Configure Rails Tests with RSpec, FactoryBot and Capybara

How to Integrate Selenium with Capybara

Circle CI: How To Run Ruby and JavaScript Tests in Parallel

Enabling Cuprite: A Headless Chrome Ruby Driver for Capybara

How to Build Awesome Integration Tests with Capybara

How To Configure Rails Tests with RSpec, FactoryBot and Capybara

How to Integrate Selenium with Capybara

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps