如何在 Mac 上的 Dockerized Rails 环境中使用 Selenium 和 Chrome 运行 Capybara 测试

Chr*_*ris 5 selenium google-chrome ruby-on-rails capybara docker

我觉得我已经很接近了,但遇到了困难,所以希望得到一些建议。

\n\n

我的目标是能够使用 Chrome 运行我的系统测试并(截取屏幕截图)。

\n\n

非 JS 测试通过使用:rack_test.

\n\n

当由(我的 Chrome 设置)驱动时,我可以访问一条路径,截取显示此站点无法到达127.0.0.1 拒绝连接的:remote_browser屏幕截图。

\n\n

另外值得一提的是,如果我尝试使用 vnc,则会open vnc://localhost:5900收到错误Connection failed to \xe2\x80\x9clocalhost\xe2\x80\x9d Unable to communications with \xe2\x80\x9clocalhost\xe2\x80\x9d。确保远程计算机可用并且防火墙未阻止屏幕共享。

\n\n

我知道我\xe2\x80\x99m 缺少一些东西,但我不知道什么。

\n\n

这是我的docker-compose.yml文件。I\xe2\x80\x99m 使用独立的 Chrome 映像。

\n\n
version: \'3\'\n\nservices:\n\n  app: &app\n    build: .\n    tmpfs:\n      - /tmp\n\n  backend: &backend\n    <<: *app\n    stdin_open: true\n    tty: true\n    volumes:\n      - .:/usr/src/app:cached\n      - rails_cache:/usr/src/app/tmp/cache\n      - bundle:/usr/local/bundle\n      - node_modules:/app/node_modules\n      - packs:/app/public/packs\n    env_file:\n      - .env/development/database\n      - .env/development/web\n    environment:\n      - WEBPACKER_DEV_SERVER_HOST=webpack-dev-server\n\n  web:\n    <<: *backend\n    entrypoint: ./bin/docker-entrypoint.sh\n    command: bundle exec rails server -b 0.0.0.0\n    ports:\n      - "3000:3000"\n\n  chrome:\n    image: selenium/standalone-chrome:3.141.59\n    ports:\n      - "4444:4444"\n      - "5900:5900"\n\n  webpack-dev-server:\n    <<: *app\n    command: ./bin/webpack-dev-server\n    volumes:\n      - .:/usr/src/app:cached\n      - bundle:/usr/local/bundle\n      - node_modules:/app/node_modules\n      - packs:/app/public/packs\n    ports:\n      - "3035:3035"\n    environment:\n      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0\n\n  database:\n    image: postgres\n    env_file:\n      - .env/development/database\n    volumes:\n      - db_data:/var/lib/postgresql/data\n\nvolumes:\n  db_data:\n  rails_cache:\n  bundle:\n  node_modules:\n  packs:\n
Run Code Online (Sandbox Code Playgroud)\n\n

我的Gemfile包括capybaraselenium-webdriver

\n\n
group :test do\n  gem \'capybara\', \'~> 3.32\', \'>= 3.32.1\'\n  gem \'selenium-webdriver\', \'~> 3.142\', \'>= 3.142.7\'\nend\n
Run Code Online (Sandbox Code Playgroud)\n\n

然后我的rails_helper.rb文件包括这个

\n\n
version: \'3\'\n\nservices:\n\n  app: &app\n    build: .\n    tmpfs:\n      - /tmp\n\n  backend: &backend\n    <<: *app\n    stdin_open: true\n    tty: true\n    volumes:\n      - .:/usr/src/app:cached\n      - rails_cache:/usr/src/app/tmp/cache\n      - bundle:/usr/local/bundle\n      - node_modules:/app/node_modules\n      - packs:/app/public/packs\n    env_file:\n      - .env/development/database\n      - .env/development/web\n    environment:\n      - WEBPACKER_DEV_SERVER_HOST=webpack-dev-server\n\n  web:\n    <<: *backend\n    entrypoint: ./bin/docker-entrypoint.sh\n    command: bundle exec rails server -b 0.0.0.0\n    ports:\n      - "3000:3000"\n\n  chrome:\n    image: selenium/standalone-chrome:3.141.59\n    ports:\n      - "4444:4444"\n      - "5900:5900"\n\n  webpack-dev-server:\n    <<: *app\n    command: ./bin/webpack-dev-server\n    volumes:\n      - .:/usr/src/app:cached\n      - bundle:/usr/local/bundle\n      - node_modules:/app/node_modules\n      - packs:/app/public/packs\n    ports:\n      - "3035:3035"\n    environment:\n      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0\n\n  database:\n    image: postgres\n    env_file:\n      - .env/development/database\n    volumes:\n      - db_data:/var/lib/postgresql/data\n\nvolumes:\n  db_data:\n  rails_cache:\n  bundle:\n  node_modules:\n  packs:\n
Run Code Online (Sandbox Code Playgroud)\n\n

当我运行测试时,我启动 Docker

\n\n
docker-compose up chrome database\n
Run Code Online (Sandbox Code Playgroud)\n\n

在我的日志中,我看到有关 Chrome 服务启动的信息。

\n\n
chrome_1              | 2020-04-24 16:17:05,059 INFO spawned: \'xvfb\' with pid 10\nchrome_1              | 2020-04-24 16:17:05,060 INFO spawned: \'selenium-standalone\' with pid 11\nchrome_1              | 16:17:05.229 INFO [GridLauncherV3.parse] - Selenium server version: 3.141.59, revision: e82be7d358\nchrome_1              | 2020-04-24 16:17:05,230 INFO success: xvfb entered RUNNING state, process has stayed up for > than 0 seconds (startsecs)\nchrome_1              | 2020-04-24 16:17:05,230 INFO success: selenium-standalone entered RUNNING state, process has stayed up for > than 0 seconds (startsecs)\nchrome_1              | 16:17:05.289 INFO [GridLauncherV3.lambda$buildLaunchers$3] - Launching a standalone Selenium Server on port 4444\nchrome_1              | 2020-04-24 16:17:05.328:INFO::main: Logging initialized @260ms to org.seleniumhq.jetty9.util.log.StdErrLog\nchrome_1              | 16:17:05.486 INFO [WebDriverServlet.<init>] - Initialising WebDriverServlet\nchrome_1              | 16:17:05.548 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444\n
Run Code Online (Sandbox Code Playgroud)\n\n

然后我用这个运行系统测试

\n\n
docker-compose run --rm web bundle exec rspec spec/system/example_spec.rb\n
Run Code Online (Sandbox Code Playgroud)\n\n

我的示例测试非常简单

\n\n
group :test do\n  gem \'capybara\', \'~> 3.32\', \'>= 3.32.1\'\n  gem \'selenium-webdriver\', \'~> 3.142\', \'>= 3.142.7\'\nend\n
Run Code Online (Sandbox Code Playgroud)\n\n

它运行并通过

\n\n
[Screenshot]: /usr/src/app/tmp/screenshots/r_spec_example_598.png\n.\n\nFinished in 0.77216 seconds (files took 1.73 seconds to load)\n1 example, 0 failures\n
Run Code Online (Sandbox Code Playgroud)\n\n

这是日志

\n\n
chrome_1              | 16:29:55.662 INFO [ActiveSessionFactory.apply] - Capabilities are: {\nchrome_1              |   "browserName": "chrome",\nchrome_1              |   "chromeOptions": {\nchrome_1              |     "args": [\nchrome_1              |       "disable-gpu",\nchrome_1              |       "no-sandbox"\nchrome_1              |     ]\nchrome_1              |   },\nchrome_1              |   "cssSelectorsEnabled": true,\nchrome_1              |   "javascriptEnabled": true,\nchrome_1              |   "nativeEvents": false,\nchrome_1              |   "rotatable": false,\nchrome_1              |   "takesScreenshot": false,\nchrome_1              |   "version": ""\nchrome_1              | }\nchrome_1              | 16:29:55.662 INFO [ActiveSessionFactory.lambda$apply$11] - Matched factory org.openqa.selenium.grid.session.remote.ServicedSession$Factory (provider: org.openqa.selenium.chrome.ChromeDriverService)\nchrome_1              | Starting ChromeDriver 81.0.4044.69 (6813546031a4bc83f717a2ef7cd4ac6ec1199132-refs/branch-heads/4044@{#776}) on port 13909\nchrome_1              | Only local connections are allowed.\nchrome_1              | Please protect ports used by ChromeDriver and related test frameworks to prevent access by malicious code.\nchrome_1              | [1587745795.669][SEVERE]: bind() failed: Cannot assign requested address (99)\nchrome_1              | 16:29:55.943 INFO [ProtocolHandshake.createSession] - Detected dialect: W3C\nchrome_1              | 16:29:55.943 INFO [RemoteSession$Factory.lambda$performHandshake$0] - Started new session d8f42b8387f0160b95f333eac5c1b576 (org.openqa.selenium.chrome.ChromeDriverService)\nchrome_1              | 16:29:56.287 INFO [ActiveSessions$1.onStop] - Removing session d8f42b8387f0160b95f333eac5c1b576 (org.openqa.selenium.chrome.ChromeDriverService)\n
Run Code Online (Sandbox Code Playgroud)\n\n

屏幕截图看起来像这样......

\n\n

在此输入图像描述

\n\n

另外,这是我尝试打开时的错误消息vnc://localhost:5900

\n\n

在此输入图像描述

\n\n

它\xe2\x80\x99s已经到了我几乎要承认失败并且没有测试这些用例的地步,所以非常感谢一些建议。谢谢!

\n

Chr*_*ris 7

感谢托马斯·沃波尔为我指明了正确的方向。

\n\n

我现在已经可以使用它了,并且我想我\xe2\x80\x99d 发布了解决方案,以防其他人难以使设置工作。

\n\n

第一点 \xe2\x80\x94\xc2\xa0vnc 不起作用

\n\n

这很容易修复\xe2\x80\x94我使用的Chrome版本不包括这个,有必要使用调试selenium版本。

\n\n

selenium_chrome里面的服务就变成docker-compose.yml这样了

\n\n
  selenium_chrome:\n    image: selenium/standalone-chrome-debug:3.141.59\n    ports:\n      - "5900:5900"\n
Run Code Online (Sandbox Code Playgroud)\n\n

主要网络问题

\n\n

这与Capybara.app_host托马斯·沃波尔(Thomas Walpole)解释的有关。

\n\n

该解决方案采取了多个步骤。首先,测试服务器现在在不同的端口 4000 上进行广播。

\n\n

web中的服务已docker-compose.yml添加端口。

\n\n
  web:\n    <<: *backend\n    entrypoint: ./bin/docker-entrypoint.sh\n    command: bundle exec rails server -b 0.0.0.0\n    ports:\n      - "3000:3000"\n      - "4000:4000"\n
Run Code Online (Sandbox Code Playgroud)\n\n

使用rails_helper.rb此端口并且web是该服务的 Docker 内部网络地址web

\n\n
    Capybara.server_host = \'0.0.0.0\'\n    Capybara.server_port = 4000\n    Capybara.app_host = "http://web:4000"\n
Run Code Online (Sandbox Code Playgroud)\n\n

我的代码的最后一个问题是该代码的位置。它还需要位于Rspec.config街区内。

\n\n

完整rails_helper.rb代码

\n\n

因此,完整的工作最终相关代码rails_helper.rb是这样的。

\n\n
require \'capybara/rspec\'\nrequire \'selenium-webdriver\'\n\nCapybara.register_driver :headless_selenium_chrome_in_container do |app|\n  capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(\n    chromeOptions: { args: %w(headless disable-gpu window-size=1440x768) }\n  )\n\n  Capybara::Selenium::Driver.new(app,\n    :browser => :remote,\n    url: "http://selenium_chrome:4444/wd/hub",\n    desired_capabilities: capabilities\n  )\nend\n\nCapybara.register_driver :selenium_chrome_in_container do |app|\n  Capybara::Selenium::Driver.new(app,\n    :browser => :remote,\n    url: "http://selenium_chrome:4444/wd/hub",\n    desired_capabilities: :chrome\n  )\nend\n\nRSpec.configure do |config|\n  ...\n\n  config.before(:each, type: :system) do\n    Capybara.server_host = \'0.0.0.0\'\n    Capybara.server_port = 4000\n    Capybara.app_host = "http://web:4000"\n    driven_by(:headless_selenium_chrome_in_container)\n  end\nend\n
Run Code Online (Sandbox Code Playgroud)\n\n

注意:这提供了无头运行 Chrome 的选项,或者使用可通过 访问的浏览器运行的选项vnc://localhost:5900

\n