toil(front): update alpine image to 3.22.2 (#692)

## 📝 Description

- Bumped the CI image to Alpine 3.20+, updated wallaby to comply with
the new ChromeDriver version

- Hardened our Wallaby helpers to handle DOM refreshes/retries, then
applied them across the suite (flash assertions, modal submits, Okta
setup, artifacts policies, etc.) so the worst flakes are gone

- Stabilized the stubborn cases (self‑hosted agents page, artifacts
retention editor, Okta integration flows) by waiting on the right UI
hooks instead of the old modal DOM



## ✅ Checklist
- [x] I have tested this change
- [ ] This change requires documentation update

Author: skipi

.semaphore/semaphore.yml

@@ -37,6 +37,8 @@ global_job_config:
         - 'if [ -f out/dependency-scan-trivy.json ]; then CHECK_TYPE=deps make check.generate-report; fi'
         - 'if [ -f out/security-export.json ]; then artifact push workflow out/security-export.json -d scans/$SEMAPHORE_JOB_ID.json; fi'
         - 'if [ -f out/security-summary.md ]; then artifact push job out/security-summary.md -d .semaphore/REPORT.md; fi'
+        - 'if [ -d out/screenshots ] && [ "$(ls -A out/screenshots)" ]; then artifact push workflow out/screenshots -d screenshots; fi'
+
 
 after_pipeline:
   task:

front/AGENTS.md

@@ -24,9 +24,18 @@
 ## Testing Guidelines
 - Keep unit tests close to their modules and name `describe` blocks after the function under test.
 - Wallaby browser specs need the Docker stack running; execute with `mix test test/browser`.
+- Prefer the helpers in `Support.Browser`/`Support.Browser.Assertions` (`assert_stable/2`, `assert_flash_notice/2`, etc.) instead of calling `assert_text/2` or `assert_has/2` directly—these wrappers handle stale DOM retries and should be the default in new tests.
+- When a flow depends on flashes or full-page redirects, assert against deterministic selectors (e.g., `#changes-notification p[data-test=...]`) rather than generic text nodes, and wait for the new page before chaining more actions.
+- Seed every browser test with the features and permissions it needs (usually via `Support.Stubs.Feature.enable_feature/3` and `Support.Stubs.PermissionPatrol.allow_everything/2`) so the UI renders the buttons you intend to click.
+- Keep destructive test fixtures scoped: create orgs/projects/users per test module using the stubs in `test/support/stubs`, and add explicit waits if a change propagates asynchronously (e.g., retention policies or self-hosted agents).
 - Generate coverage with `mix coveralls.html` and `npm run coverage`.
 - Update fixtures in `test/fixture` when workflow, API, or UI contracts change.
 
+## Browser Testing Notes
+- Use the `browser_test` macro from `FrontWeb.WallabyCase` for every Wallaby spec. It handles screenshot capture, session cleanup, and tags so failures are easier to debug.
+- Chrome/Chromedriver now refuse to click invisible elements; always wait until the target button/link is visible (`assert_stable/2`, `assert_stable_text/2`) before clicking, and prefer selectors that match the final rendered node (not a parent wrapper).
+- For modals, redirects, and flash messages, re-sync the page via `Support.Browser.assert_flash_notice/2` or another deterministic element to avoid stale references after navigation.
+
 ## Commit & Pull Request Guidelines
 - Commits follow `type(scope): message (#issue)` (e.g., `fix(front): adjust mermaid rendering (#621)`).
 - Each commit should bundle code, schema, and tests for a single concern.

front/Dockerfile

@@ -1,6 +1,6 @@
 ARG ELIXIR_VERSION=1.14.5
 ARG OTP_VERSION=25.3.2.21
-ARG ALPINE_VERSION=3.19.7
+ARG ALPINE_VERSION=3.22.2
 ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-alpine-${ALPINE_VERSION}"
 ARG RUNNER_IMAGE="alpine:${ALPINE_VERSION}"
 

front/config/test.exs

@@ -19,9 +19,9 @@ config :front,
   docs_domain: "docs.semaphoretest.test",
   start_reactor: true
 
-config :wallaby, screenshot_dir: System.get_env("WALLABY_SCREENSHOTS") || "./out"
+config :wallaby, screenshot_dir: System.get_env("WALLABY_SCREENSHOTS") || "./out/screenshots"
 config :wallaby, screenshot_on_failure: true
-config :wallaby, driver: Wallaby.Experimental.Chrome
+config :wallaby, driver: Wallaby.Chrome
 config :wallaby, max_wait_time: 10_000
 
 config :joken, current_time_adapter: Support.TimeMock

front/mix.exs

@@ -51,7 +51,7 @@ defmodule Front.Mixfile do
       {:tentacat, github: "renderedtext/tentacat"},
       {:httpoison, ">= 0.0.0"},
       {:uuid, "~> 1.1"},
-      {:wallaby, "~> 0.23.0", runtime: false, only: [:dev, :test]},
+      {:wallaby, "~> 0.30", runtime: false, only: [:dev, :test]},
       {:fun_registry, github: "renderedtext/fun-registry", only: [:dev, :test]},
       {:grpc_mock, github: "renderedtext/grpc-mock", only: [:dev, :test]},
       {:yaml_elixir, "~> 2.4"},

front/mix.lock

@@ -19,13 +19,13 @@ defmodule Front.Browser.AccountTest do
   end
 
   describe "Okta welcome page" do
-    test "it welcomes the customer to semaphore", %{page_url: page_url, session: session} do
+    browser_test "it welcomes the customer to semaphore", %{page_url: page_url, session: session} do
       page = visit(session, page_url)
 
       assert_text(page, "Welcome")
     end
 
-    test "it asks the customer to connect to a git provider account", %{
+    browser_test "it asks the customer to connect to a git provider account", %{
       page_url: page_url,
       session: session
     } do

front/test/browser/account_test.exs

@@ -17,19 +17,19 @@ defmodule Front.Browser.ActivityMonitorTest do
     {:ok, %{page: page}}
   end
 
-  test "active pipelines are displayed on the activity monitor page", %{page: page} do
+  browser_test "active pipelines are displayed on the activity monitor page", %{page: page} do
     FrontWeb.Plugs.Development.ActivityMonitor.running_pipelines()
     |> Enum.each(fn p ->
       assert_text(page, p.commit_message)
     end)
   end
 
-  test "queuing pipelines are displayed on the activity monitor page", %{page: page} do
+  browser_test "queuing pipelines are displayed on the activity monitor page", %{page: page} do
     assert_text(page, "Lobby")
     assert_text(page, "(1)")
   end
 
-  test "usage gauge for machines are presented on the activity monitor", %{page: page} do
+  browser_test "usage gauge for machines are presented on the activity monitor", %{page: page} do
     assert_text(page, "e1-standard-2")
     assert_text(page, "4/8")
   end

front/test/browser/activity_monitor_test.exs

@@ -5,7 +5,7 @@ defmodule Front.Browser.AuditLogsTest do
 
   import Wallaby.Query, only: [link: 1]
 
-  test "viewing audit logs that have project details", %{session: session} do
+  browser_test "viewing audit logs that have project details", %{session: session} do
     user = Stubs.User.create_default()
     org = Stubs.Organization.create_default()
     Support.Stubs.Feature.enable_feature(org.id, :audit_logs)
@@ -83,7 +83,7 @@ defmodule Front.Browser.AuditLogsTest do
        }}
     end
 
-    test "project link is displayed", %{session: session, project: project} do
+    browser_test "project link is displayed", %{session: session, project: project} do
       page = open(session)
 
       assert_text(page, "Project:")
@@ -94,7 +94,7 @@ defmodule Front.Browser.AuditLogsTest do
       assert Wallaby.Browser.current_path(page) == "/projects/#{project.name}"
     end
 
-    test "branch link is displayed", %{session: session, branch: branch} do
+    browser_test "branch link is displayed", %{session: session, branch: branch} do
       page = open(session)
 
       assert_text(page, "Branch:")
@@ -105,7 +105,7 @@ defmodule Front.Browser.AuditLogsTest do
       assert Wallaby.Browser.current_path(page) == "/branches/#{branch.id}"
     end
 
-    test "workflow link is displayed", %{session: session, workflow: workflow, hook: hook} do
+    browser_test "workflow link is displayed", %{session: session, workflow: workflow, hook: hook} do
       page = open(session)
 
       assert_text(page, "Workflow:")
@@ -116,7 +116,11 @@ defmodule Front.Browser.AuditLogsTest do
       assert Wallaby.Browser.current_path(page) == "/workflows/#{workflow.id}"
     end
 
-    test "pipeline link is displayed", %{session: session, workflow: workflow, pipeline: pipeline} do
+    browser_test "pipeline link is displayed", %{
+      session: session,
+      workflow: workflow,
+      pipeline: pipeline
+    } do
       page = open(session)
 
       assert_text(page, "Pipeline:")
@@ -127,13 +131,13 @@ defmodule Front.Browser.AuditLogsTest do
       assert Wallaby.Browser.current_path(page) == "/workflows/#{workflow.id}"
     end
 
-    test "event description is visible", %{session: session} do
+    browser_test "event description is visible", %{session: session} do
       page = open(session)
 
       assert_text(page, "Triggered a promotion to Production")
     end
 
-    test "agent name and IP address is visible", %{session: session} do
+    browser_test "agent name and IP address is visible", %{session: session} do
       page = open(session)
 
       assert_text(page, "s1-local-testing")

front/test/browser/audit_logs_test.exs

@@ -21,21 +21,24 @@ defmodule Front.Browser.OrganizationSettings.ContactsTest do
   end
 
   describe "form" do
-    test "when org does not have any contacts, it is empty", %{page: page} do
+    browser_test "when org does not have any contacts, it is empty", %{page: page} do
       page
       |> click(@contacts_tab)
       |> assert_contact_forms_are_shown()
     end
 
-    test "when org has only one contact set, display it's information", %{page: page, org: org} do
+    browser_test "when org has only one contact set, display it's information", %{
+      page: page,
+      org: org
+    } do
       insert_contact(org.id, "CONTACT_TYPE_MAIN", "Joe")
 
       page
       |> click(@contacts_tab)
       |> assert_contact_name_is_present("Joe")
     end
 
-    test "fill out financial contact info", %{page: page} do
+    browser_test "fill out financial contact info", %{page: page} do
       page
       |> click(@contacts_tab)
       |> submit_form()