如何在 Mac 上的 Dockerised Rails 环境中使用 Selenium 和 Chrome 运行 Capybara 测试
How to run Capybara tests using Selenium & Chrome in a Dockerised Rails environment on a Mac
我觉得我很接近，但是碰壁了，所以希望得到一些建议。
我的目标是能够 运行 我的系统测试和（截图）使用 Chrome。
非 JS 测试通过使用 :rack_test。
当由 :remote_browser 驱动时（我的 Chrome 设置）我可以访问路径，截图显示 无法访问此站点 127.0. 0.1 拒绝连接。
另外值得一提的是，如果我尝试将 vnc 与 open vnc://localhost:5900 一起使用，我会得到一个错误 连接“localhost”失败 无法与“localhost”通信。确保远程计算机可用且防火墙未阻止屏幕共享。
我知道我遗漏了一些东西，但我不知道是什么。
这是我的 docker-compose.yml 文件。我正在使用独立 Chrome 图像。
version: '3'
services:
app: &app
build: .
tmpfs:
- /tmp
backend: &backend
<<: *app
stdin_open: true
tty: true
volumes:
- .:/usr/src/app:cached
- rails_cache:/usr/src/app/tmp/cache
- bundle:/usr/local/bundle
- node_modules:/app/node_modules
- packs:/app/public/packs
env_file:
- .env/development/database
- .env/development/web
environment:
- WEBPACKER_DEV_SERVER_HOST=webpack-dev-server
web:
<<: *backend
entrypoint: ./bin/docker-entrypoint.sh
command: bundle exec rails server -b 0.0.0.0
ports:
- "3000:3000"
chrome:
image: selenium/standalone-chrome:3.141.59
ports:
- "4444:4444"
- "5900:5900"
webpack-dev-server:
<<: *app
command: ./bin/webpack-dev-server
volumes:
- .:/usr/src/app:cached
- bundle:/usr/local/bundle
- node_modules:/app/node_modules
- packs:/app/public/packs
ports:
- "3035:3035"
environment:
- WEBPACKER_DEV_SERVER_HOST=0.0.0.0
database:
image: postgres
env_file:
- .env/development/database
volumes:
- db_data:/var/lib/postgresql/data
volumes:
db_data:
rails_cache:
bundle:
node_modules:
packs:
我的 Gemfile 包括 capybara 和 selenium-webdriver
group :test do
gem 'capybara', '~> 3.32', '>= 3.32.1'
gem 'selenium-webdriver', '~> 3.142', '>= 3.142.7'
end
然后我的 rails_helper.rb 文件包含这个
require 'capybara/rspec'
require 'selenium-webdriver'
Capybara.server_host = '0.0.0.0'
Capybara.server_port = 3000
Capybara.app_host = "http://localhost:3000"
Capybara.register_driver :remote_browser do |app|
capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
chromeOptions: { args: %w(disable-gpu no-sandbox) }
)
Capybara::Selenium::Driver.new(app,
:browser => :remote,
url: "http://chrome:4444/wd/hub",
desired_capabilities: capabilities
)
end
Capybara.javascript_driver = :remote_browser
当我 运行 测试时，我从 Docker 开始
docker-compose up chrome database
在我的日志中，我看到有关 Chrome 服务启动的信息。
chrome_1 | 2020-04-24 16:17:05,059 INFO spawned: 'xvfb' with pid 10
chrome_1 | 2020-04-24 16:17:05,060 INFO spawned: 'selenium-standalone' with pid 11
chrome_1 | 16:17:05.229 INFO [GridLauncherV3.parse] - Selenium server version: 3.141.59, revision: e82be7d358
chrome_1 | 2020-04-24 16:17:05,230 INFO success: xvfb entered RUNNING state, process has stayed up for > than 0 seconds (startsecs)
chrome_1 | 2020-04-24 16:17:05,230 INFO success: selenium-standalone entered RUNNING state, process has stayed up for > than 0 seconds (startsecs)
chrome_1 | 16:17:05.289 INFO [GridLauncherV3.lambda$buildLaunchers] - Launching a standalone Selenium Server on port 4444
chrome_1 | 2020-04-24 16:17:05.328:INFO::main: Logging initialized @260ms to org.seleniumhq.jetty9.util.log.StdErrLog
chrome_1 | 16:17:05.486 INFO [WebDriverServlet.<init>] - Initialising WebDriverServlet
chrome_1 | 16:17:05.548 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444
然后我运行用这个
进行系统测试
docker-compose run --rm web bundle exec rspec spec/system/example_spec.rb
我的例子测试很简单
require 'rails_helper'
RSpec.describe "Example", type: :system do
before do
driven_by(:remote_browser)
end
it "should take a screenshot of root path" do
visit root_path
take_screenshot
end
end
它 运行 过去了
[Screenshot]: /usr/src/app/tmp/screenshots/r_spec_example_598.png
.
Finished in 0.77216 seconds (files took 1.73 seconds to load)
1 example, 0 failures
这是日志
chrome_1 | 16:29:55.662 INFO [ActiveSessionFactory.apply] - Capabilities are: {
chrome_1 | "browserName": "chrome",
chrome_1 | "chromeOptions": {
chrome_1 | "args": [
chrome_1 | "disable-gpu",
chrome_1 | "no-sandbox"
chrome_1 | ]
chrome_1 | },
chrome_1 | "cssSelectorsEnabled": true,
chrome_1 | "javascriptEnabled": true,
chrome_1 | "nativeEvents": false,
chrome_1 | "rotatable": false,
chrome_1 | "takesScreenshot": false,
chrome_1 | "version": ""
chrome_1 | }
chrome_1 | 16:29:55.662 INFO [ActiveSessionFactory.lambda$apply] - Matched factory org.openqa.selenium.grid.session.remote.ServicedSession$Factory (provider: org.openqa.selenium.chrome.ChromeDriverService)
chrome_1 | Starting ChromeDriver 81.0.4044.69 (6813546031a4bc83f717a2ef7cd4ac6ec1199132-refs/branch-heads/4044@{#776}) on port 13909
chrome_1 | Only local connections are allowed.
chrome_1 | Please protect ports used by ChromeDriver and related test frameworks to prevent access by malicious code.
chrome_1 | [1587745795.669][SEVERE]: bind() failed: Cannot assign requested address (99)
chrome_1 | 16:29:55.943 INFO [ProtocolHandshake.createSession] - Detected dialect: W3C
chrome_1 | 16:29:55.943 INFO [RemoteSession$Factory.lambda$performHandshake[=22=]] - Started new session d8f42b8387f0160b95f333eac5c1b576 (org.openqa.selenium.chrome.ChromeDriverService)
chrome_1 | 16:29:56.287 INFO [ActiveSessions.onStop] - Removing session d8f42b8387f0160b95f333eac5c1b576 (org.openqa.selenium.chrome.ChromeDriverService)
屏幕截图是这样的...
此外，这是我尝试打开时的错误消息 vnc://localhost:5900
我已经接近承认失败并且没有测试这些用例了，所以非常感谢您的建议。谢谢！
感谢 Thomas Walpole 为我指明了正确的方向。
我现在可以使用它了，我想我会 post 解决方案，以防其他人难以使设置正常工作。
第一点 — vnc 不工作
这很容易修复——我使用的 Chrome 版本没有包含这个，必须使用调试 selenium 版本。
docker-compose.yml中的selenium_chrome服务变成了这个
selenium_chrome:
image: selenium/standalone-chrome-debug:3.141.59
ports:
- "5900:5900"
主要网络问题
这与 Thomas Walpole 解释的 Capybara.app_host 有关。
该解决方案采取了多个步骤。首先，测试服务器现在在不同的端口 4000 上广播。
docker-compose.yml 中的 web 服务添加了端口。
web:
<<: *backend
entrypoint: ./bin/docker-entrypoint.sh
command: bundle exec rails server -b 0.0.0.0
ports:
- "3000:3000"
- "4000:4000"
rails_helper.rb 使用此端口，web 是 web 服务的 Docker 内部网络地址。
Capybara.server_host = '0.0.0.0'
Capybara.server_port = 4000
Capybara.app_host = "http://web:4000"
我的代码的最后一个问题是这段代码的位置。它还需要在 Rspec.config 块内。
完成rails_helper.rb代码
因此 rails_helper.rb 中完整的工作最终相关代码是这样的。
require 'capybara/rspec'
require 'selenium-webdriver'
Capybara.register_driver :headless_selenium_chrome_in_container do |app|
capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
chromeOptions: { args: %w(headless disable-gpu window-size=1440x768) }
)
Capybara::Selenium::Driver.new(app,
:browser => :remote,
url: "http://selenium_chrome:4444/wd/hub",
desired_capabilities: capabilities
)
end
Capybara.register_driver :selenium_chrome_in_container do |app|
Capybara::Selenium::Driver.new(app,
:browser => :remote,
url: "http://selenium_chrome:4444/wd/hub",
desired_capabilities: :chrome
)
end
RSpec.configure do |config|
...
config.before(:each, type: :system) do
Capybara.server_host = '0.0.0.0'
Capybara.server_port = 4000
Capybara.app_host = "http://web:4000"
driven_by(:headless_selenium_chrome_in_container)
end
end
注意：这为 运行 Chrome 提供了无头选项，或者使用可通过 vnc://localhost:5900.
访问的浏览器
我觉得我很接近，但是碰壁了，所以希望得到一些建议。
我的目标是能够 运行 我的系统测试和（截图）使用 Chrome。
非 JS 测试通过使用 :rack_test。
当由 :remote_browser 驱动时（我的 Chrome 设置）我可以访问路径，截图显示 无法访问此站点 127.0. 0.1 拒绝连接。
另外值得一提的是，如果我尝试将 vnc 与 open vnc://localhost:5900 一起使用，我会得到一个错误 连接“localhost”失败 无法与“localhost”通信。确保远程计算机可用且防火墙未阻止屏幕共享。
我知道我遗漏了一些东西，但我不知道是什么。
这是我的 docker-compose.yml 文件。我正在使用独立 Chrome 图像。
version: '3'
services:
app: &app
build: .
tmpfs:
- /tmp
backend: &backend
<<: *app
stdin_open: true
tty: true
volumes:
- .:/usr/src/app:cached
- rails_cache:/usr/src/app/tmp/cache
- bundle:/usr/local/bundle
- node_modules:/app/node_modules
- packs:/app/public/packs
env_file:
- .env/development/database
- .env/development/web
environment:
- WEBPACKER_DEV_SERVER_HOST=webpack-dev-server
web:
<<: *backend
entrypoint: ./bin/docker-entrypoint.sh
command: bundle exec rails server -b 0.0.0.0
ports:
- "3000:3000"
chrome:
image: selenium/standalone-chrome:3.141.59
ports:
- "4444:4444"
- "5900:5900"
webpack-dev-server:
<<: *app
command: ./bin/webpack-dev-server
volumes:
- .:/usr/src/app:cached
- bundle:/usr/local/bundle
- node_modules:/app/node_modules
- packs:/app/public/packs
ports:
- "3035:3035"
environment:
- WEBPACKER_DEV_SERVER_HOST=0.0.0.0
database:
image: postgres
env_file:
- .env/development/database
volumes:
- db_data:/var/lib/postgresql/data
volumes:
db_data:
rails_cache:
bundle:
node_modules:
packs:
我的 Gemfile 包括 capybara 和 selenium-webdriver
group :test do
gem 'capybara', '~> 3.32', '>= 3.32.1'
gem 'selenium-webdriver', '~> 3.142', '>= 3.142.7'
end
然后我的 rails_helper.rb 文件包含这个
require 'capybara/rspec'
require 'selenium-webdriver'
Capybara.server_host = '0.0.0.0'
Capybara.server_port = 3000
Capybara.app_host = "http://localhost:3000"
Capybara.register_driver :remote_browser do |app|
capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
chromeOptions: { args: %w(disable-gpu no-sandbox) }
)
Capybara::Selenium::Driver.new(app,
:browser => :remote,
url: "http://chrome:4444/wd/hub",
desired_capabilities: capabilities
)
end
Capybara.javascript_driver = :remote_browser
当我 运行 测试时，我从 Docker 开始
docker-compose up chrome database
在我的日志中，我看到有关 Chrome 服务启动的信息。
chrome_1 | 2020-04-24 16:17:05,059 INFO spawned: 'xvfb' with pid 10
chrome_1 | 2020-04-24 16:17:05,060 INFO spawned: 'selenium-standalone' with pid 11
chrome_1 | 16:17:05.229 INFO [GridLauncherV3.parse] - Selenium server version: 3.141.59, revision: e82be7d358
chrome_1 | 2020-04-24 16:17:05,230 INFO success: xvfb entered RUNNING state, process has stayed up for > than 0 seconds (startsecs)
chrome_1 | 2020-04-24 16:17:05,230 INFO success: selenium-standalone entered RUNNING state, process has stayed up for > than 0 seconds (startsecs)
chrome_1 | 16:17:05.289 INFO [GridLauncherV3.lambda$buildLaunchers] - Launching a standalone Selenium Server on port 4444
chrome_1 | 2020-04-24 16:17:05.328:INFO::main: Logging initialized @260ms to org.seleniumhq.jetty9.util.log.StdErrLog
chrome_1 | 16:17:05.486 INFO [WebDriverServlet.<init>] - Initialising WebDriverServlet
chrome_1 | 16:17:05.548 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444
然后我运行用这个
进行系统测试docker-compose run --rm web bundle exec rspec spec/system/example_spec.rb
我的例子测试很简单
require 'rails_helper'
RSpec.describe "Example", type: :system do
before do
driven_by(:remote_browser)
end
it "should take a screenshot of root path" do
visit root_path
take_screenshot
end
end
它 运行 过去了
[Screenshot]: /usr/src/app/tmp/screenshots/r_spec_example_598.png
.
Finished in 0.77216 seconds (files took 1.73 seconds to load)
1 example, 0 failures
这是日志
chrome_1 | 16:29:55.662 INFO [ActiveSessionFactory.apply] - Capabilities are: {
chrome_1 | "browserName": "chrome",
chrome_1 | "chromeOptions": {
chrome_1 | "args": [
chrome_1 | "disable-gpu",
chrome_1 | "no-sandbox"
chrome_1 | ]
chrome_1 | },
chrome_1 | "cssSelectorsEnabled": true,
chrome_1 | "javascriptEnabled": true,
chrome_1 | "nativeEvents": false,
chrome_1 | "rotatable": false,
chrome_1 | "takesScreenshot": false,
chrome_1 | "version": ""
chrome_1 | }
chrome_1 | 16:29:55.662 INFO [ActiveSessionFactory.lambda$apply] - Matched factory org.openqa.selenium.grid.session.remote.ServicedSession$Factory (provider: org.openqa.selenium.chrome.ChromeDriverService)
chrome_1 | Starting ChromeDriver 81.0.4044.69 (6813546031a4bc83f717a2ef7cd4ac6ec1199132-refs/branch-heads/4044@{#776}) on port 13909
chrome_1 | Only local connections are allowed.
chrome_1 | Please protect ports used by ChromeDriver and related test frameworks to prevent access by malicious code.
chrome_1 | [1587745795.669][SEVERE]: bind() failed: Cannot assign requested address (99)
chrome_1 | 16:29:55.943 INFO [ProtocolHandshake.createSession] - Detected dialect: W3C
chrome_1 | 16:29:55.943 INFO [RemoteSession$Factory.lambda$performHandshake[=22=]] - Started new session d8f42b8387f0160b95f333eac5c1b576 (org.openqa.selenium.chrome.ChromeDriverService)
chrome_1 | 16:29:56.287 INFO [ActiveSessions.onStop] - Removing session d8f42b8387f0160b95f333eac5c1b576 (org.openqa.selenium.chrome.ChromeDriverService)
屏幕截图是这样的...
此外，这是我尝试打开时的错误消息 vnc://localhost:5900
我已经接近承认失败并且没有测试这些用例了，所以非常感谢您的建议。谢谢！
感谢 Thomas Walpole 为我指明了正确的方向。
我现在可以使用它了，我想我会 post 解决方案，以防其他人难以使设置正常工作。
第一点 — vnc 不工作
这很容易修复——我使用的 Chrome 版本没有包含这个，必须使用调试 selenium 版本。
docker-compose.yml中的selenium_chrome服务变成了这个
selenium_chrome:
image: selenium/standalone-chrome-debug:3.141.59
ports:
- "5900:5900"
主要网络问题
这与 Thomas Walpole 解释的 Capybara.app_host 有关。
该解决方案采取了多个步骤。首先，测试服务器现在在不同的端口 4000 上广播。
docker-compose.yml 中的 web 服务添加了端口。
web:
<<: *backend
entrypoint: ./bin/docker-entrypoint.sh
command: bundle exec rails server -b 0.0.0.0
ports:
- "3000:3000"
- "4000:4000"
rails_helper.rb 使用此端口，web 是 web 服务的 Docker 内部网络地址。
Capybara.server_host = '0.0.0.0'
Capybara.server_port = 4000
Capybara.app_host = "http://web:4000"
我的代码的最后一个问题是这段代码的位置。它还需要在 Rspec.config 块内。
完成rails_helper.rb代码
因此 rails_helper.rb 中完整的工作最终相关代码是这样的。
require 'capybara/rspec'
require 'selenium-webdriver'
Capybara.register_driver :headless_selenium_chrome_in_container do |app|
capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
chromeOptions: { args: %w(headless disable-gpu window-size=1440x768) }
)
Capybara::Selenium::Driver.new(app,
:browser => :remote,
url: "http://selenium_chrome:4444/wd/hub",
desired_capabilities: capabilities
)
end
Capybara.register_driver :selenium_chrome_in_container do |app|
Capybara::Selenium::Driver.new(app,
:browser => :remote,
url: "http://selenium_chrome:4444/wd/hub",
desired_capabilities: :chrome
)
end
RSpec.configure do |config|
...
config.before(:each, type: :system) do
Capybara.server_host = '0.0.0.0'
Capybara.server_port = 4000
Capybara.app_host = "http://web:4000"
driven_by(:headless_selenium_chrome_in_container)
end
end
注意：这为 运行 Chrome 提供了无头选项，或者使用可通过 vnc://localhost:5900.