Provide latest Chrome and Firefox on the build image

[zzak]

For example, we can configure actioncable to run it's tests on Chrome and Firefox in the container:
rails/rails@main...zzak:rails:cable-on-image-browsers-integration-test

# just how I setup my rails for testing
$ cd ~/code/rails
$ rsync -av ~/code/buildkite-config/ .buildkite

$ RUBY_IMAGE="ruby:3.3" docker compose -f .buildkite/docker-compose.yml build base

$ CI=true IMAGE_NAME="buildkite-base" RUBY_IMAGE="ruby:3.3" docker compose -f .buildkite/docker-compose.yml run default runner actioncable 'rake test:integration'

$ karma start
30 11 2024 10:35:07.008:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
30 11 2024 10:35:07.009:INFO [launcher]: Launching browsers ChromeHeadless, Firefox with concurrency unlimited
30 11 2024 10:35:07.011:INFO [launcher]: Starting browser Chrome
30 11 2024 10:35:07.013:INFO [launcher]: Starting browser Firefox
30 11 2024 10:35:07.148:INFO [Chrome Headless 131.0.0.0 (Linux x86_64)]: Connected on socket lNiHE5L2e4_vY58QAAAB with id 98478716
Chrome Headless 131.0.0.0 (Linux x86_64) WARN: 'QUnit.load is deprecated and will be removed in QUnit 3.0. https://qunitjs.com/api/QUnit/load/'

Chrome Headless 131.0.0.0 (Linux x86_64): Executed 15 of 25 SUCCESS (0 secs / 0.02 secs)
WARN: 'QUnit.load is deprecated and will be removed in QUnit 3.0. https://qunitjs.com/api/QUnit/load/'
Chrome Headless 131.0.0.0 (Linux x86_64) WARN: 'Test "#addSubProtocol" took longer than 3000ms, but no timeout was set. Set QUnit.config.testTimeo
ut or call assert.timeout() to avoid a timeout in QUnit 3. https://qunitjs.com/api/config/testTimeout/'
Firefox 128.0 (Linux x86_64) WARN: 'Test "#addSubProtocol" took longer than 3000ms, but no timeout was set. Set QUnit.config.testTimeout or call a
ssert.timeout() to avoid a timeout in QUnit 3. https://qunitjs.com/api/config/testTimeout/'
Chrome Headless 131.0.0.0 (Linux x86_64): Executed 25 of 25 SUCCESS (8.468 secs / 8.467 secs)
Firefox 128.0 (Linux x86_64): Executed 25 of 25 SUCCESS (9.861 secs / 9.915 secs)
TOTAL: 50 SUCCESS
Done in 11.47s.

# or if we set CI_TEST_SAUCELABS it will use that for backwards compatibility

$ karma start
30 11 2024 10:51:11.073:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
30 11 2024 10:51:11.074:INFO [launcher]: Launching browsers sl_chrome, sl_ff, sl_safari, sl_edge with concurrency unlimited
30 11 2024 10:51:11.076:INFO [launcher]: Starting browser chrome 70 on SauceLabs
30 11 2024 10:51:11.090:INFO [launcher]: Starting browser firefox 63 on SauceLabs
30 11 2024 10:51:11.090:INFO [launcher]: Starting browser safari 12 (macOS 10.13) on SauceLabs
30 11 2024 10:51:11.090:INFO [launcher]: Starting browser microsoftedge 17.17134 (Windows 10) on SauceLabs
30 11 2024 10:51:36.399:INFO [launcher.sauce]: chrome 70 session at https://saucelabs.com/tests/268d1f3b990a4106bc8a64da557ae1f4
30 11 2024 10:51:38.352:INFO [Chrome 70.0.3538.67 (Windows 7)]: Connected on socket NjLOo2wDPY6vH9SYAAAB with id 80707420
30 11 2024 10:51:39.860:INFO [launcher.sauce]: firefox 63 session at https://saucelabs.com/tests/78af108b91a84a228be4cf821f447747
Chrome 70.0.3538.67 (Windows 7) WARN: 'QUnit.load is deprecated and will be removed in QUnit 3.0. https://qunitjs.com/api/QUnit/load/'
30 11 2024 10:51:41.462:INFO [Firefox 63.0 (Windows 7)]: Connected on socket Wdj5nxKDcIHyLJnkAAAD with id 93980408
30 11 2024 10:51:41.971:INFO [launcher.sauce]: safari 12 (macOS 10.13) session at https://saucelabs.com/tests/e545dfb34f2b478a9d10b8b692596af6
WARN: 'QUnit.load is deprecated and will be removed in QUnit 3.0. https://qunitjs.com/api/QUnit/load/'
WARN: 'Test "#addSubProtocol" took longer than 3000ms, but no timeout was set. Set QUnit.config.testTimeout or call assert.timeout() to avoid a ti
meout in QUnit 3. https://qunitjs.com/api/config/testTimeout/'
30 11 2024 10:51:43.691:INFO [Safari 12.1.1 (Mac OS 10.13.6)]: Connected on socket gok_alas7zmKrtObAAAF with id 36031358
Safari 12.1.1 (Mac OS 10.13.6) WARN: 'QUnit.load is deprecated and will be removed in QUnit 3.0. https://qunitjs.com/api/QUnit/load/'
30 11 2024 10:51:46.113:INFO [launcher.sauce]: microsoftedge 17.17134 (Windows 10) session at https://saucelabs.com/tests/d5421b5030a74ec4acb85b3a
4ee68ccf
Firefox 63.0 (Windows 7) WARN: 'Test "#addSubProtocol" took longer than 3000ms, but no timeout was set. Set QUnit.config.testTimeout or call asser
t.timeout() to avoid a timeout in QUnit 3. https://qunitjs.com/api/config/testTimeout/'
30 11 2024 10:51:47.942:INFO [Edge 17.17134 (Windows 10)]: Connected on socket tlxbKsaX8ztPCpVXAAAH with id 61615433
Safari 12.1.1 (Mac OS 10.13.6) WARN: 'Test "#addSubProtocol" took longer than 3000ms, but no timeout was set. Set QUnit.config.testTimeout or call
 assert.timeout() to avoid a timeout in QUnit 3. https://qunitjs.com/api/config/testTimeout/'
Edge 17.17134 (Windows 10) WARN: 'QUnit.load is deprecated and will be removed in QUnit 3.0. https://qunitjs.com/api/QUnit/load/'
.........................
Chrome 70.0.3538.67 (Windows 7): Executed 25 of 25 SUCCESS (11.992 secs / 11.892 secs)
Edge 17.17134 (Windows 10) WARN: 'Test "#addSubProtocol" took longer than 3000ms, but no timeout was set. Set QUnit.config.testTimeout or call ass
ert.timeout() to avoid a timeout in QUnit 3. https://qunitjs.com/api/config/testTimeout/'
.........................
Firefox 63.0 (Windows 7): Executed 25 of 25 SUCCESS (10.096 secs / 10.019 secs)
.........................
Safari 12.1.1 (Mac OS 10.13.6): Executed 25 of 25 SUCCESS (13.282 secs / 11.48 secs)
.........................
Edge 17.17134 (Windows 10): Executed 25 of 25 SUCCESS (11.945 secs / 11.824 secs)
TOTAL: 100 SUCCESS
30 11 2024 10:52:01.728:INFO [launcher.sauce]: Shutting down Sauce Connect
Done in 62.20s.

Another use-case I had was for the bug report templates, where we can test that AV or Action Cable (#50437) renders in a browser. I could also see this useful for integration testing the views and js for Action Text and Active Storage (direct upload, etc).

Saucelabs has been known to be flakey at times, and having the browsers on the image gives us a path to mitigate that. While this does add time to the build step, that should mostly be cached and the nightly builds should make sure we have a fresh cached image to work with on subsequent builds. There is always the risk using "latest", I've experienced in the past where (especially chrome) can break or stop being available and new builds fail. We can always pin the version when that happens, or revert back to saucelabs.

There is also a docker container we pull for selenium with browsers, but I forget what / if we still use it -- this would be a replacement for that as well.

Last thing, Karma is deprecated and I did spend some time to investigate alternatives -- but it's also a good time to consider if we want to keep Saucelabs as well. I was basically trying to port the integration tests to raw qunit with a runner like puppeteer or playwright but I can't remember if I got it working with Saucelabs. How much do we care about macos safari / windows edge?