** I have set up CircleCI to handle JavaScript **.
It was a test of CircleCI
that worked without problems until now, but since I did something, it did not pass, so I will describe the remedy.
The configuration file so far is here.
--Environment
--Problem
--Cause
--Use js: true
with RSpec
--This time, the changes made to match the ** local environment ** and the ** CircleCI environment **
spec/support/capybara.rb
spec/rails_helper.rb
Dockerfile
.circleci/config.yml
--The whole .circleci/config.yml
config/database.yml.ci
--Summary
SocketError:
Failed to open TCP connection to chrome:4444
(getaddrinfo: No address associated with hostname)
# chrome:Failed to open TCP connection to 4444
SocketError: getaddrinfo: No address associated with hostname
#There is no address associated with the host name
When I implemented ** JavaScript test in RSpec **, the test that passed in the local environment did not pass in CircleCI's automatic test **.
In conclusion, I think it is due to the difference between the local environment and the CircleCI environment **.
I started a chrome container locally and passed through System Spec
, but I got an error because the setting is also required in the CircleCI configuration file
.
-** Added chrome ** in Dockerfile from chrome container
-** The URL when using Chrome was specified **, so it was deleted
--Added ** Chrome added ** and ** used in background ** in CircleCI config file
spec/support/capybara.rb
It looks like a big change, but the point is that you didn't specify the url
.
Change before
require 'capybara/rspec'
require 'selenium-webdriver'
module CapybaraSupport
Capybara.javascript_driver = :selenium_chrome_headless
Capybara.default_driver = :selenium_chrome_headless
Capybara.register_driver :selenium_chrome_headless 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: :chrome, url: url, desired_capabilities: caps)
end
After change
require 'capybara/rspec'
require 'selenium-webdriver'
Capybara.register_driver :selenium_chrome_headless do |app|
options = ::Selenium::WebDriver::Chrome::Options.new
options.add_argument('--headless')
options.add_argument('--no-sandbox')
options.add_argument('--disable-dev-shm-usage')
options.add_argument('--window-size=1400,1400')
driver = Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end
Capybara.javascript_driver = :selenium_chrome_headless
spec/rails_helper.rb
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 :selenium_chrome_headless
end
end
Dockerfile
** I want to use Chrome for testing my local environment **, so I'm doing ** Add Chrome ** with Dockerfile
.
I wrote this description before RUN mkdir/myapp
.
RUN apt-get update && apt-get install -y unzip && \
CHROME_DRIVER_VERSION=`curl -sS chromedriver.storage.googleapis.com/LATEST_RELEASE` && \
wget -N http://chromedriver.storage.googleapis.com/$CHROME_DRIVER_VERSION/chromedriver_linux64.zip -P ~/ && \
unzip ~/chromedriver_linux64.zip -d ~/ && \
rm ~/chromedriver_linux64.zip && \
chown root:root ~/chromedriver && \
chmod 755 ~/chromedriver && \
mv ~/chromedriver /usr/bin/chromedriver && \
sh -c 'wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -' && \
sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list' && \
apt-get update && apt-get install -y google-chrome-stable
#Create a working directory with the name myapp directly under the root (application directory in the container)
RUN mkdir /myapp
WORKDIR /myapp
.circleci/config.yml
CircleCI configuration file. ** Added Chrome ** to eliminate the ** difference from the local environment **.
steps:
- run:
name: Chrome Driver Install
command: |
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install -y unzip
wget -N http://chromedriver.storage.googleapis.com/87.0.4280.88/chromedriver_linux64.zip -P ~/
unzip ~/chromedriver_linux64.zip -d ~/
rm ~/chromedriver_linux64.zip
sudo chown root:root ~/chromedriver
sudo chmod 755 ~/chromedriver
sudo mv ~/chromedriver /usr/bin/chromedriver
sh -c 'wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -'
sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
sudo apt-get update && sudo apt-get install -y google-chrome-stable
background: true
I wrote no_output_timeout: 15m
where I run RSpec.
Even if you don't have this, it's not directly related to the test, so you can delete it.
If nothing is set, there is a ** standard time limit of 10 minutes **, and if it is exceeded, a ** timeout error ** will occur, so this is added just in case. It depends on the number of tests, but in reality it only takes a few minutes, so it's unnecessary.
version: 2
jobs:
build:
docker:
- image: circleci/ruby:2.6.6-node-browsers
environment:
- BUNDLER_VERSION: 2.0.2
- RAILS_ENV: 'test'
- image: circleci/mysql:8.0
command: [--default-authentication-plugin=mysql_native_password]
environment:
- MYSQL_USER: root
- MYSQL_DB: ci_test
- MYSQL_ROOT_HOST: "127.0.0.1"
working_directory: ~/myapp
steps:
- run:
name: Chrome Driver Install
command: |
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install -y unzip
wget -N http://chromedriver.storage.googleapis.com/87.0.4280.88/chromedriver_linux64.zip -P ~/
unzip ~/chromedriver_linux64.zip -d ~/
rm ~/chromedriver_linux64.zip
sudo chown root:root ~/chromedriver
sudo chmod 755 ~/chromedriver
sudo mv ~/chromedriver /usr/bin/chromedriver
sh -c 'wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -'
sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
sudo apt-get update && sudo apt-get install -y google-chrome-stable
background: true
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "Gemfile.lock" }}
- v1-dependencies-
- run:
name: install dependencies
command: |
gem install bundler -v 2.0.2
bundle install --jobs=4 --retry=3 --path vendor/bundle
- save_cache:
key: v1-dependencies-{{ checksum "Gemfile.lock" }}
paths:
- ./vendor/bundle
- run: mv config/database.yml.ci config/database.yml
- run: yarn install
- run: bundle exec rake db:create
- run: bundle exec rake db:schema:load
- run:
name: run tests
command: |
mkdir /tmp/test-results
TEST_FILES="$(circleci tests glob "spec/**/*_spec.rb" | \
circleci tests split --split-by=timings)"
bundle exec rspec \
--format RspecJunitFormatter \
--out /tmp/test-results/rspec.xml \
--format progress \
$TEST_FILES
no_output_timeout: 15m
- store_test_results:
path: /tmp/test-results
- store_artifacts:
path: /tmp/test-results
destination: test-results
config/database.yml.ci
test:
adapter: mysql2
encoding: utf8
pool: 5
username: 'root'
port: 3306
host: '127.0.0.1'
database: ci_test
--** Add Chrome with Dockerfile
and CircleCI config file
**
--Even if it works locally, it may fail on CircleCI.
――Thankfully, there are many articles (information), so it is important to understand which problem you are facing.
Previous article contains the CircleCI configuration file
before the change. (Strictly speaking, a little refactoring etc.)
** Before applying JavaScript **, but please have a look if you like because it summarizes CircleCI
.
-Launch Chrome Driver on CircleCI -Run Rails SystemTest (headless chrome) on Docker -[Rails 6.0 x MySQL 8.0 x RSpec x Circle CI] Error collection from CI/CD automation -I introduced CircleCI 2.0 to Rails app