Build a browser test environment using Capybara in the Docker development environment

Overview

I summarized how to build an RSpec test environment in the docker development environment. Since I am a beginner and self-taught, I think there are some mistakes and better ways to do it, but I would be grateful if you could point out at that time.

I referred to the following article. I tried RSpec System test with Selenium Docker on Rails on Docker.

Introduction

Previously, I posted an article about browser test error resolution in Cannot run browser test in Rails development using Docker. If you comment and use docker-compose to run chrome itself as one of the services, I was advised that it would be easy to test without polluting the Rails environment, so I tried it. Thank you for pointing out!

1. Add chrome service to docker-compose.yml

The image used is standalone-chrome, which is the one with Chrome installed from the beginning.

docker-compose.yml


version: '3'
services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/[app name]
    ports:
      - 3000:3000
    depends_on:
      - db
      - chrome #← Add
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
 #↓ Add
  chrome:
    image: selenium/standalone-chrome:latest
    ports:
      - 4444:4444
 #↑ Add
volumes:
  db-volume:

2. Introduction of RSpec

Add gem of rspec-rails

Gemfile


group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'rspec-rails', '~> 4.0.1'  #add to
  gem 'factory_bot_rails', '~>4.11'
end

Install gem.

$ docker-compose build

Install RSpec

$ docker-compose run web rails g rspec:install

Next, in the file created by installation, describe the settings in "rails_helper.rb". Set to use docker-selenium container browser when running RSpec.

/spec/rails_helper.rb


#~
Capybara.register_driver :remote_chrome do |app|
  url = "http://chrome:4444/wd/hub"
  caps = ::Selenium::WebDriver::Remote::Capabilities.chrome(
    "goog:chromeOptions" => {
      "args" => [
        "no-sandbox",
        "headless",
        "disable-gpu",
        "window-size=1680,1050"
      ]
    }
  )
  Capybara::Selenium::Driver.new(app, browser: :remote, url: url, desired_capabilities: caps)
end

#~

RSpec.configure do |config|
  
  config.before(:each, type: :system) do
    driven_by :rack_test
  end

  config.before(:each, type: :system, js: true) do
    driven_by :remote_chrome
    Capybara.server_host = IPSocket.getaddress(Socket.gethostname)
    Capybara.server_port = 4444
    Capybara.app_host = "http://#{Capybara.server_host}:#{Capybara.server_port}"
  end
#~
end

Finally, edit .rspec to read the settings in rails_helper.rb.

.rspec


- --require spec_helper
+ --require rails_helper

that's all.

Now let's write a test and see if we can run it.

#When the container starts
$ docker-compose exec web rspec [rspec test file path]

I was able to see a hard copy of my browser when the test failed.

スクリーンショット 2020-09-22 22.30.01.png

Recommended Posts

Build a browser test environment using Capybara in the Docker development environment
Try to build a Java development environment using Docker
Install Ubuntu 20.04 in virtual box on windows10 and build a development environment using docker
Build a Wordpress development environment with Docker
Build a simple Docker + Django development environment
Use MailHog for checking emails in the development environment (using Docker)
We will build a Spring Framework development environment in the on-premises environment.
Build a development environment for Docker + Rails6 + Postgresql
Build a WordPress development environment quickly with Docker
Build a simple Docker Compose + Django development environment
Build a development environment for Docker, java, vscode
Build Docker + Laravel PHP + Vue.js development environment in 5 minutes
[When using MiniMagick] A memorandum because I stumbled in the CircleCI test environment.
[2021] Build a Docker + Vagrant environment for using React / TypeScript
Build a local development environment for Open Distro for Elasticsearch with multiple nodes using Docker
I tried to build the environment little by little using docker
Build a Node.js environment with Docker
Build Unity development environment on docker
[App development 0.5] [Node.js express Docker] Build an environment for Node.js Express MongoDB using Docker
Install Rails in the development environment and create a new application
Build a development environment for Django + MySQL + nginx with Docker Compose
Set up a Wordpress Docker environment without using the Worpdress image
Create a web environment quickly using Docker
One file of Docker x Laravel threat! Build a local development environment with the minimum configuration
Building a Lambda development environment in Eclipse
Build a WAS execution environment from Docker
Build a Java development environment on Mac
Creating a Servlet in the Liberty environment
Build an Ultra96v2 development environment on Docker 1
How to build a Ruby on Rails environment using Docker (for Docker beginners)
Build an environment of "API development + API verification using Swagger UI" with Docker
How to build a Ruby on Rails development environment with Docker (Rails 6.x)
Build a local development environment for Rails tutorials with Docker (Rails 6 + PostgreSQL + Webpack)
[Copy and paste] Build a Laravel development environment with Docker Compose Participation
How to build a Ruby on Rails development environment with Docker (Rails 5.x)
Template: Build a Ruby / Rails development environment with a Docker container (Ubuntu version)
Template: Build a Ruby / Rails development environment with a Docker container (Mac version)
Build a Docker-based development environment on Windows 10 Home 2020 ver. Part 2 VS Code should make the Docker development environment comfortable
Build a test flow on CircleCI using Jib
Improve the performance of your Docker development environment
[Win10] Build a JSF development environment with NetBeans
Display "Hello World" in the browser using Java
Allow development in Eclipse environment using iPLAss SDK
Display "Hello World" in the browser using Java
A reminder of Docker and development environment construction
Support out of support in docker environment using centos6
[First team development ②] Build an environment with Docker
Create a Spring Boot development environment with docker
Build a Java development environment with VS Code
Build a Doker-based development environment on Windows 10 Home 2020 ver. Part 1 Until WSL2-based Docker build
[Note] Execute java program in the integrated development environment Eclipse-I tried using git
[App development 1] [Node.js express Docker] Build an environment for Node.js Express MongoDB (mongoose) using Docker [December 2020]
Introduce Docker to the development environment and test environment of existing Rails and MySQL applications
Build a development environment to create Ruby on Jets + React apps with Docker
I tried using a database connection in Android development
[Road _node.js_1-1] Road to build Node.js Express MySQL environment using Docker
Until you build a Nuxt.js development environment with Docker and touch it with VS Code
Build a Ruby on Rails development environment on AWS Cloud9
I stumbled when I tried using neo4j in the jenv environment, so make a note
[Rails] [Docker] Copy and paste is OK! How to build a Rails development environment with Docker
Docker the development environment of Ruby on Rails project