How to use Cuprite with a remote browser (browserless/chrome)

[SirMishaa]

Hello !

In my work, I'd like to have a remote chrome browser using https://hub.docker.com/r/browserless/chrome

  app:
    build:
      context: .
      # The target is really important here. It specifies which stage of the Dockerfile to use.
      target: dev
      args:
        BUILDING_ENV: development
    image: aaaaaaa
    entrypoint: ./entrypoints/puma-entrypoint.sh
    volumes:
      - .:/opt/app
      - gem_cache:/usr/local/bundle/gems
      - /opt/app/node_modules
    env_file:
      - .env.dev
      - .env
    environment:
      - VITE_RUBY_HOST=vite
    ports:
      - '${APP_PORT:-8080}:3000'
    depends_on:
      - postgres
      - redis

  chrome:
    # Currently, Apple M1 is only supported in unnumbered "latest" versions.
    # See https://github.com/browserless/chrome/issues/1393
    image: browserless/chrome:latest
    ports:
      - "3333:3333"
    # Mount application source code to support file uploading
    # (otherwise Chrome won't be able to find files).
    # NOTE: Make sure you use absolute paths in `#attach_file`.
    volumes:
      - .:/app:cached
    environment:
      # By default, it uses 3000, which is typically used by Rails.
      PORT: 3333
      # Set connection timeout to avoid timeout exception during debugging
      # https://docs.browserless.io/docs/docker.html#connection-timeout
      CONNECTION_TIMEOUT: 600000

It seems to run, we got messages when running tests

But unfortunately, all tests are failing

I was wondering if you have ever successfully implemented this kind of thing (I was inspired by that article https://evilmartians.com/chronicles/system-of-a-test-setting-up-end-to-end-rails-testing) ? The goal is also to be able to see the browser interface via an X server, that's why we use https://hub.docker.com/r/browserless/chrome

Thanks a lot!

[n1xn]

docker-compose.yml

...
  browserless:
    image: browserless/chrome:latest
    container_name: ${COMPOSE_PROJECT_NAME}_browserless
    restart: always
    environment:
      - PORT=4000
    ports:
      - '4000:4000'

.env

BROWSERLESS_URL=http://localhost:4000/

test/helpers/cuprite_helper.rb

# frozen_string_literal: true

require 'capybara/cuprite'

Capybara.register_driver(:browserless) do |app|
  Capybara::Cuprite::Driver.new(app, browser_options:
    {
      window_size: [1920, 1080],
      url: ENV.fetch('BROWSERLESS_URL', nil),
      headless: true,
      'no-sandbox': true,
      'disable-gpu': true
    })
end

Capybara.default_driver = :browserless
Capybara.javascript_driver = :browserless

# This is because the BrowserLessTest is failing.
# The problem was that, without this line, visits to a page
# always appended the capybara port to the url.
Capybara.run_server = false

test/application_system_test_case.rb

# frozen_string_literal: true

require 'test_helper'
require_relative '../test/helpers/cuprite_helper'

class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
  driven_by :browserless
end

test/system/browser_less_test.rb

# frozen_string_literal: true

require 'application_system_test_case'

class BrowserLessTest < ApplicationSystemTestCase
  test 'Remote browser connection established' do
    visit 'https://google.com'
    assert_equal 'Google', page.title
  end
end

execution

bin/rails test:system