browserctl 0.5.0 → 0.7.0

data/examples/test_automation_practices/advanced/broken_images.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/advanced/broken_images" do
+  desc "Broken images page: verify one image loads successfully and two are broken (naturalWidth == 0)"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_advanced_broken_images.png")
+
+  step "open broken images page" do
+    open_page(:main, url: "#{base_url}/#/broken-images")
+    page(:main).wait("[data-test='image-container-0']", timeout: 10)
+    sleep 1
+  end
+
+  step "check which images loaded and which are broken" do
+    widths = page(:main).evaluate(
+      "[0,1,2].map(i => document.querySelector(`[data-test=\"image-${i}\"]`)?.naturalWidth ?? -1)"
+    )
+    loaded  = widths.count(&:positive?)
+    broken  = widths.count(&:zero?)
+    assert loaded == 1, "expected exactly 1 valid image, got #{loaded} (widths: #{widths.inspect})"
+    assert broken == 2, "expected exactly 2 broken images, got #{broken} (widths: #{widths.inspect})"
+    page(:main).screenshot(path: screenshot_path)
+  end
+end

data/examples/test_automation_practices/advanced/file_download.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/advanced/file_download" do
+  desc "File download page: trigger each download, verify button enters disabled state, verify no error shown"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_advanced_file_download.png")
+
+  step "open file download page" do
+    open_page(:main, url: "#{base_url}/#/file-download")
+    page(:main).wait("[data-test='download-card-0']", timeout: 10)
+  end
+
+  step "click TXT download — button becomes disabled during download" do
+    page(:main).click("[data-test='download-button-0']")
+    page(:main).wait("[data-test='download-button-0'][disabled]", timeout: 5)
+    disabled = page(:main).evaluate(
+      "document.querySelector('[data-test=\"download-button-0\"]')?.disabled"
+    )
+    assert disabled, "expected download-button-0 to be disabled while downloading"
+    page(:main).wait("[data-test='download-button-0']:not([disabled])", timeout: 10)
+    no_error = page(:main).evaluate("!document.querySelector('[data-test=\"error-message\"]')")
+    assert no_error, "expected no error-message after TXT download"
+  end
+
+  step "click CSV download — completes without error" do
+    page(:main).click("[data-test='download-button-1']")
+    page(:main).wait("[data-test='download-button-1']:not([disabled])", timeout: 10)
+    no_error = page(:main).evaluate("!document.querySelector('[data-test=\"error-message\"]')")
+    assert no_error, "expected no error-message after CSV download"
+  end
+
+  step "click PDF download — completes without error" do
+    page(:main).click("[data-test='download-button-2']")
+    page(:main).wait("[data-test='download-button-2']:not([disabled])", timeout: 10)
+    no_error = page(:main).evaluate("!document.querySelector('[data-test=\"error-message\"]')")
+    assert no_error, "expected no error-message after PDF download"
+    page(:main).screenshot(path: screenshot_path)
+  end
+end

data/examples/test_automation_practices/advanced/iframes.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/advanced/iframes" do
+  desc "Iframes page: click inside sandboxed iframes, verify postMessage received in parent"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_advanced_iframes.png")
+
+  step "open iframes page" do
+    open_page(:main, url: "#{base_url}/#/iframes")
+    page(:main).wait("[data-test='iframe-container']", timeout: 10)
+    sleep 0.5
+  end
+
+  step "click button inside iframe1 — message appears in parent" do
+    page(:main).evaluate(
+      "document.querySelector('[data-test=\"iframe-iframe1\"]').contentDocument.querySelector('button').click()"
+    )
+    page(:main).wait("[data-test='iframe-message-0']", timeout: 5)
+    msg = page(:main).evaluate(
+      "document.querySelector('[data-test=\"iframe-message-0\"]')?.textContent?.trim()"
+    )
+    assert msg&.length&.positive?, "expected a message after clicking iframe1 button, got: #{msg.inspect}"
+    page(:main).screenshot(path: screenshot_path)
+  end
+
+  step "click button inside iframe2 — second message appears" do
+    page(:main).evaluate(
+      "document.querySelector('[data-test=\"iframe-iframe2\"]').contentDocument.querySelector('button').click()"
+    )
+    page(:main).wait("[data-test='iframe-message-1']", timeout: 5)
+    count = page(:main).evaluate(
+      "document.querySelectorAll('[data-test^=\"iframe-message-\"]').length"
+    )
+    assert count >= 2, "expected at least 2 messages after both iframe clicks, got: #{count}"
+  end
+end

data/examples/test_automation_practices/advanced/shadow_dom.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/advanced/shadow_dom" do
+  desc "Shadow DOM page: query inside shadow root, click shadow-button, accept its alert"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_advanced_shadow_dom.png")
+
+  step "open shadow DOM page" do
+    open_page(:main, url: "#{base_url}/#/shadow-dom")
+    page(:main).wait("[data-test='shadow-host']", timeout: 10)
+  end
+
+  step "verify shadow content is accessible via shadowRoot" do
+    text = page(:main).evaluate(
+      "document.querySelector('[data-test=\"shadow-host\"]').shadowRoot" \
+      "?.querySelector('[data-test=\"shadow-content\"]')?.textContent?.trim()"
+    )
+    assert text&.length&.positive?, "expected shadow-content text via shadowRoot, got: #{text.inspect}"
+    page(:main).screenshot(path: screenshot_path)
+  end
+
+  step "click shadow-button — accept the alert — page stays responsive" do
+    page(:main).dialog_accept
+    page(:main).evaluate(
+      "document.querySelector('[data-test=\"shadow-host\"]').shadowRoot" \
+      ".querySelector('[data-test=\"shadow-button\"]').click()"
+    )
+    sleep 0.3
+    still_present = page(:main).evaluate(
+      "!!document.querySelector('[data-test=\"shadow-host\"]')"
+    )
+    assert still_present, "expected shadow-host to remain in DOM after alert was accepted"
+  end
+end

data/examples/test_automation_practices/auth/login.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/auth/login" do
+  desc "Auth page: fill credentials, verify success message, logout"
+
+  param :username,        default: "admin"
+  param :password,        default: "admin", secret: true
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_auth_login.png")
+
+  step "open auth page" do
+    open_page(:main, url: "#{base_url}/#/auth")
+  end
+
+  step "fill and submit credentials" do
+    page(:main).fill("[data-test='username-input']", username)
+    page(:main).fill("[data-test='password-input']", password)
+    page(:main).click("[data-test='login-button']")
+  end
+
+  step "verify successful login" do
+    page(:main).wait("[data-test='auth-success']", timeout: 10)
+    msg = page(:main).evaluate("document.querySelector('[data-test=\"auth-success\"]')?.innerText?.trim()")
+    assert msg&.length&.positive?, "expected a success message, got: #{msg.inspect}"
+    page(:main).screenshot(path: screenshot_path)
+  end
+
+  step "logout and verify form reappears" do
+    page(:main).click("[data-test='logout-button']")
+    page(:main).wait("[data-test='login-button']", timeout: 5)
+    visible = page(:main).evaluate("!!document.querySelector('[data-test=\"login-button\"]')")
+    assert visible, "expected login form to reappear after logout"
+  end
+end

data/examples/test_automation_practices/auth/login_negative.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/auth/login_negative" do
+  desc "Auth page: invalid credentials show an error message"
+
+  param :base_url, default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path,
+        default: File.expand_path(".browserctl/screenshots/tap_auth_login_negative.png")
+
+  step "open auth page" do
+    open_page(:main, url: "#{base_url}/#/auth")
+  end
+
+  step "submit wrong credentials" do
+    page(:main).fill("[data-test='username-input']", "wronguser")
+    page(:main).fill("[data-test='password-input']", "wrongpass")
+    page(:main).click("[data-test='login-button']")
+  end
+
+  step "verify error is shown and success is absent" do
+    page(:main).wait("[data-test='auth-error']", timeout: 10)
+    error = page(:main).evaluate("document.querySelector('[data-test=\"auth-error\"]')?.innerText?.trim()")
+    assert error&.length&.positive?, "expected an error message, got: #{error.inspect}"
+    no_success = page(:main).evaluate("!document.querySelector('[data-test=\"auth-success\"]')")
+    assert no_success, "expected no success element when credentials are invalid"
+    page(:main).screenshot(path: screenshot_path)
+  end
+end

data/examples/test_automation_practices/dialogs/alerts.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/dialogs/alerts" do
+  desc "Alerts page: pre-register accept/dismiss handlers before triggering each JS dialog type"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_dialogs_alerts.png")
+
+  step "open alerts page" do
+    open_page(:main, url: "#{base_url}/#/alerts")
+  end
+
+  step "accept an alert — result-container shows confirmation" do
+    page(:main).dialog_accept
+    page(:main).click("[data-test='alert-button']")
+    page(:main).wait("[data-test='result-container']", timeout: 5)
+    result = page(:main).evaluate("document.querySelector('[data-test=\"result-container\"]')?.textContent?.trim()")
+    assert result == "Last action: Alert shown", "expected alert result, got: #{result.inspect}"
+  end
+
+  step "accept a confirm — result-container shows true" do
+    page(:main).dialog_accept
+    page(:main).click("[data-test='confirm-button']")
+    page(:main).wait("[data-test='result-container']", timeout: 5)
+    result = page(:main).evaluate("document.querySelector('[data-test=\"result-container\"]')?.textContent?.trim()")
+    assert result == "Last action: Confirm dialog: true", "expected confirm true result, got: #{result.inspect}"
+  end
+
+  step "dismiss a confirm — result-container shows false" do
+    page(:main).dialog_dismiss
+    page(:main).click("[data-test='confirm-button']")
+    page(:main).wait("[data-test='result-container']", timeout: 5)
+    result = page(:main).evaluate("document.querySelector('[data-test=\"result-container\"]')?.textContent?.trim()")
+    assert result == "Last action: Confirm dialog: false", "expected confirm false result, got: #{result.inspect}"
+  end
+
+  step "accept a prompt with text — result-container shows entered text" do
+    page(:main).dialog_accept(text: "browserctl")
+    page(:main).click("[data-test='prompt-button']")
+    page(:main).wait("[data-test='result-container']", timeout: 5)
+    result = page(:main).evaluate("document.querySelector('[data-test=\"result-container\"]')?.textContent?.trim()")
+    assert result&.include?("browserctl"), "expected prompt text in result, got: #{result.inspect}"
+    page(:main).screenshot(path: screenshot_path)
+  end
+end

data/examples/test_automation_practices/dialogs/notifications.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+# Individual notification items have data-test="notification-{id}".
+# The wrapper has data-test="notification-container" — excluded from counts below.
+NOTIFICATION_ITEMS_JS = <<~JS
+  document.querySelectorAll('[data-test^="notification-"]:not([data-test="notification-container"])').length
+JS
+
+Browserctl.workflow "test_automation_practices/dialogs/notifications" do
+  desc "Notifications: trigger success, error, and info toasts — verify count increases on each trigger"
+
+  param :base_url, default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path,
+        default: File.expand_path(".browserctl/screenshots/tap_dialogs_notifications.png")
+
+  step "open notifications page and record baseline" do
+    open_page(:main, url: "#{base_url}/#/notifications")
+    page(:main).wait("[data-test='notification-container']", timeout: 5)
+    # Let any delayed on-load notifications finish appearing before we snapshot the baseline
+    sleep 1
+    store(:baseline, page(:main).evaluate(NOTIFICATION_ITEMS_JS))
+  end
+
+  step "trigger success notification and verify count increased by 1" do
+    base = fetch(:baseline)
+    page(:main).click("[data-test='add-success']")
+    page(:main).wait("[data-test^='notification-']:not([data-test='notification-container'])", timeout: 5)
+    count = page(:main).evaluate(NOTIFICATION_ITEMS_JS)
+    assert count == base + 1, "expected #{base + 1} notifications after success, got: #{count}"
+  end
+
+  step "dismiss one notification and verify count returns to baseline" do
+    base = fetch(:baseline)
+    page(:main).evaluate("document.querySelector('[data-test^=\"close-notification-\"]')?.click()")
+    deadline = Time.now + 5
+    remaining = nil
+    loop do
+      remaining = page(:main).evaluate(NOTIFICATION_ITEMS_JS)
+      break if remaining <= base || Time.now > deadline
+
+      sleep 0.2
+    end
+    assert remaining <= base, "expected count back to #{base} after dismiss, got: #{remaining}"
+    # Re-snapshot baseline in case on-load notifications auto-dismissed during this step
+    store(:baseline, remaining)
+  end
+
+  step "trigger error and info notifications and verify count increased by 2" do
+    base = fetch(:baseline)
+    page(:main).click("[data-test='add-error']")
+    page(:main).click("[data-test='add-info']")
+    page(:main).wait("[data-test^='notification-']:not([data-test='notification-container'])", timeout: 5)
+    count = page(:main).evaluate(NOTIFICATION_ITEMS_JS)
+    assert count == base + 2, "expected #{base + 2} notifications (error + info), got: #{count}"
+    page(:main).screenshot(path: screenshot_path)
+  end
+end

data/examples/test_automation_practices/dynamic/dynamic_elements.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/dynamic/dynamic_elements" do
+  desc "Dynamic elements: trigger reload, wait for items, toggle hidden content"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path,
+        default: File.expand_path(".browserctl/screenshots/tap_dynamic_dynamic_elements.png")
+
+  step "open dynamic elements page" do
+    open_page(:main, url: "#{base_url}/#/dynamic-elements")
+  end
+
+  step "assert no dynamic items exist before reload" do
+    absent = page(:main).evaluate("!document.querySelector('[data-test=\"dynamic-item-0\"]')")
+    assert absent, "expected no dynamic items before triggering reload"
+  end
+
+  step "click reload and wait for items" do
+    page(:main).click("[data-test='reload-button']")
+    # loading indicator appears first; wait for it to clear and items to render
+    page(:main).wait("[data-test='dynamic-item-0']", timeout: 15)
+  end
+
+  step "verify all three dynamic items are present" do
+    count = page(:main).evaluate(
+      "[0,1,2].filter(i => !!document.querySelector(`[data-test=\"dynamic-item-${i}\"]`)).length"
+    )
+    assert count == 3, "expected 3 dynamic items, got: #{count}"
+    page(:main).screenshot(path: screenshot_path)
+  end
+
+  step "toggle hidden content on" do
+    page(:main).click("[data-test='toggle-hidden-button']")
+    page(:main).wait("[data-test='hidden-content']", timeout: 5)
+    visible = page(:main).evaluate(
+      "!document.querySelector('[data-test=\"hidden-content\"]')?.classList.contains('hidden')"
+    )
+    assert visible, "expected hidden-content to become visible after toggle (hidden class should be absent)"
+  end
+end

data/examples/test_automation_practices/dynamic/tables.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/dynamic/tables" do
+  desc "Tables page: verify initial data, sort by column ascending and descending"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_dynamic_tables.png")
+
+  step "open tables page and verify initial rows" do
+    open_page(:main, url: "#{base_url}/#/tables")
+    page(:main).wait("[data-test='dynamic-table']", timeout: 10)
+    rows = page(:main).evaluate(
+      "Array.from(document.querySelectorAll('[data-test^=\"table-row-\"]')).map(r => r.dataset.test)"
+    )
+    assert rows.length == 3, "expected 3 rows, got: #{rows.length}"
+  end
+
+  step "sort by name ascending — alphabetical order" do
+    page(:main).click("[data-test='table-header-name']")
+    sleep 0.2
+    names = page(:main).evaluate(
+      "Array.from(document.querySelectorAll('[data-test^=\"table-cell-name-\"]')).map(el => el.textContent?.trim())"
+    )
+    sorted = names.sort
+    assert names == sorted, "expected names sorted ascending, got: #{names.inspect}"
+    page(:main).screenshot(path: screenshot_path)
+  end
+
+  step "sort by name descending — click header again" do
+    page(:main).click("[data-test='table-header-name']")
+    sleep 0.2
+    names = page(:main).evaluate(
+      "Array.from(document.querySelectorAll('[data-test^=\"table-cell-name-\"]')).map(el => el.textContent?.trim())"
+    )
+    sorted_desc = names.sort.reverse
+    assert names == sorted_desc, "expected names sorted descending, got: #{names.inspect}"
+  end
+
+  step "sort by status — Active/Inactive grouping" do
+    page(:main).click("[data-test='table-header-status']")
+    sleep 0.2
+    statuses = page(:main).evaluate(
+      "Array.from(document.querySelectorAll('[data-test^=\"table-cell-status-\"]')).map(el => el.textContent?.trim())"
+    )
+    assert statuses == statuses.sort, "expected statuses sorted ascending, got: #{statuses.inspect}"
+  end
+end

data/examples/test_automation_practices/forms/checkboxes.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/forms/checkboxes" do
+  desc "Checkboxes: toggle individual, check all, uncheck all — assert state each time"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_forms_checkboxes.png")
+
+  step "open checkboxes page" do
+    open_page(:main, url: "#{base_url}/#/checkboxes")
+  end
+
+  step "read initial state — checkbox 2 pre-checked" do
+    js = "[1,2,3].map(i => document.querySelector(`[data-test=\"checkbox-checkbox${i}\"]`)?.checked)"
+    states = page(:main).evaluate(js)
+    assert states == [false, true, false], "expected initial state [false, true, false], got: #{states.inspect}"
+  end
+
+  step "toggle checkbox 1 on" do
+    page(:main).click("[data-test='checkbox-checkbox1']")
+    checked = page(:main).evaluate("document.querySelector('[data-test=\"checkbox-checkbox1\"]').checked")
+    assert checked, "expected checkbox 1 to be checked after click"
+  end
+
+  step "check all and verify" do
+    page(:main).click("[data-test='check-all-button']")
+    js = "[1,2,3].map(i => document.querySelector(`[data-test=\"checkbox-checkbox${i}\"]`)?.checked)"
+    states = page(:main).evaluate(js)
+    assert states.all?, "expected all checkboxes checked, got: #{states.inspect}"
+    page(:main).screenshot(path: screenshot_path)
+  end
+
+  step "uncheck all and verify" do
+    page(:main).click("[data-test='uncheck-all-button']")
+    js = "[1,2,3].map(i => document.querySelector(`[data-test=\"checkbox-checkbox${i}\"]`)?.checked)"
+    states = page(:main).evaluate(js)
+    assert states.none?, "expected all checkboxes unchecked, got: #{states.inspect}"
+  end
+end

data/examples/test_automation_practices/forms/file_upload.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/forms/file_upload" do
+  desc "File upload page: attach a local file via the hidden file input, verify the file is selected"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path,
+        default: File.expand_path(".browserctl/screenshots/tap_forms_file_upload.png")
+
+  step "open file upload page" do
+    open_page(:main, url: "#{base_url}/#/file-upload")
+    page(:main).wait("[data-test='file-uploader']", timeout: 10)
+  end
+
+  step "upload a file and verify it is selected" do
+    Dir.mktmpdir do |dir|
+      path = File.join(dir, "browserctl_test.txt")
+      File.write(path, "browserctl v0.7 upload test")
+
+      page(:main).upload("[data-test='file-input']", path)
+      page(:main).wait("[data-test='uploaded-file-0']", timeout: 10)
+
+      filename = page(:main).evaluate(
+        "document.querySelector('[data-test=\"uploaded-file-0\"]')?.querySelector('span.truncate')?.textContent?.trim()"
+      )
+      assert filename == "browserctl_test.txt", "expected filename in list, got: #{filename.inspect}"
+    end
+    page(:main).screenshot(path: screenshot_path)
+  end
+end

data/examples/test_automation_practices/forms/forms.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/forms/forms" do
+  desc "Forms page: trigger inline validation errors, then submit a valid form"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_forms_forms.png")
+
+  step "open forms page" do
+    open_page(:main, url: "#{base_url}/#/forms")
+    page(:main).wait("[data-test='login-form']", timeout: 10)
+  end
+
+  step "submit empty form — all three fields show errors" do
+    page(:main).click("[data-test='submit-button']")
+    page(:main).wait("[data-test='username-error']", timeout: 5)
+    username_err = page(:main).evaluate("document.querySelector('[data-test=\"username-error\"]')?.textContent?.trim()")
+    email_err    = page(:main).evaluate("document.querySelector('[data-test=\"email-error\"]')?.textContent?.trim()")
+    password_err = page(:main).evaluate("document.querySelector('[data-test=\"password-error\"]')?.textContent?.trim()")
+    assert username_err&.length&.positive?, "expected username error, got: #{username_err.inspect}"
+    assert email_err&.length&.positive?,    "expected email error, got: #{email_err.inspect}"
+    assert password_err&.length&.positive?, "expected password error, got: #{password_err.inspect}"
+  end
+
+  step "fill invalid email — email error shown" do
+    page(:main).fill("[data-test='email-input']", "not-an-email")
+    page(:main).click("[data-test='submit-button']")
+    page(:main).wait("[data-test='email-error']", timeout: 5)
+    email_err = page(:main).evaluate("document.querySelector('[data-test=\"email-error\"]')?.textContent?.trim()")
+    assert email_err&.length&.positive?, "expected email format error, got: #{email_err.inspect}"
+  end
+
+  step "fill valid credentials and submit — no errors shown" do
+    page(:main).fill("[data-test='username-input']", "testuser")
+    page(:main).fill("[data-test='email-input']", "test@example.com")
+    page(:main).fill("[data-test='password-input']", "password123")
+    page(:main).click("[data-test='submit-button']")
+    sleep 0.5
+    username_err = page(:main).evaluate("!!document.querySelector('[data-test=\"username-error\"]')")
+    email_err    = page(:main).evaluate("!!document.querySelector('[data-test=\"email-error\"]')")
+    password_err = page(:main).evaluate("!!document.querySelector('[data-test=\"password-error\"]')")
+    assert !username_err, "expected no username error on valid submit"
+    assert !email_err,    "expected no email error on valid submit"
+    assert !password_err, "expected no password error on valid submit"
+    page(:main).screenshot(path: screenshot_path)
+  end
+end

data/examples/test_automation_practices/forms/slider.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+SET_SLIDER_JS = <<~JS
+  (function(val) {
+    const el = document.querySelector('[data-test="slider"]');
+    Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')
+          .set.call(el, val);
+    el.dispatchEvent(new Event('input', { bubbles: true }));
+    el.dispatchEvent(new Event('change', { bubbles: true }));
+  })(%<value>d)
+JS
+
+Browserctl.workflow "test_automation_practices/forms/slider" do
+  desc "Slider page: set slider to specific values via evaluate, verify displayed value updates"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_forms_slider.png")
+
+  step "open slider page" do
+    open_page(:main, url: "#{base_url}/#/slider")
+    page(:main).wait("[data-test='slider-container']", timeout: 10)
+  end
+
+  step "set slider to 75 and verify display" do
+    page(:main).evaluate(format(SET_SLIDER_JS, value: 75))
+    sleep 0.1
+    displayed = page(:main).evaluate(
+      "document.querySelector('[data-test=\"slider-value\"]')?.textContent?.trim()"
+    )
+    assert displayed&.include?("75"), "expected slider-value to show 75, got: #{displayed.inspect}"
+  end
+
+  step "set slider to minimum (0) and verify" do
+    page(:main).evaluate(format(SET_SLIDER_JS, value: 0))
+    sleep 0.1
+    displayed = page(:main).evaluate(
+      "document.querySelector('[data-test=\"slider-value\"]')?.textContent?.trim()"
+    )
+    assert displayed&.include?("0"), "expected slider-value to show 0, got: #{displayed.inspect}"
+  end
+
+  step "set slider to maximum (100) and screenshot" do
+    page(:main).evaluate(format(SET_SLIDER_JS, value: 100))
+    sleep 0.1
+    displayed = page(:main).evaluate(
+      "document.querySelector('[data-test=\"slider-value\"]')?.textContent?.trim()"
+    )
+    assert displayed&.include?("100"), "expected slider-value to show 100, got: #{displayed.inspect}"
+    page(:main).screenshot(path: screenshot_path)
+  end
+end

data/examples/test_automation_practices/interactions/context_menu.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+Browserctl.workflow "test_automation_practices/interactions/context_menu" do
+  desc "Context menu page: trigger via dispatched contextmenu event, click each action, dismiss"
+
+  param :base_url,        default: "https://moatazeldebsy.github.io/test-automation-practices"
+  param :screenshot_path, default: File.expand_path(".browserctl/screenshots/tap_interactions_context_menu.png")
+
+  step "open context menu page" do
+    open_page(:main, url: "#{base_url}/#/context-menu")
+    page(:main).wait("[data-test='context-menu-trigger']", timeout: 10)
+  end
+
+  step "trigger context menu via dispatched event — menu appears" do
+    page(:main).evaluate(<<~JS)
+      document.querySelector('[data-test="context-menu-trigger"]').dispatchEvent(
+        new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 200, clientY: 300 })
+      )
+    JS
+    page(:main).wait("[data-test='context-menu']", timeout: 5)
+    visible = page(:main).evaluate("!!document.querySelector('[data-test=\"context-menu\"]')")
+    assert visible, "expected context-menu to appear after right-click event"
+  end
+
+  step "all three menu items are present" do
+    has_edit       = page(:main).evaluate("!!document.querySelector('[data-test=\"context-menu-edit\"]')")
+    has_delete     = page(:main).evaluate("!!document.querySelector('[data-test=\"context-menu-delete\"]')")
+    has_properties = page(:main).evaluate("!!document.querySelector('[data-test=\"context-menu-properties\"]')")
+    assert has_edit,       "expected context-menu-edit to be present"
+    assert has_delete,     "expected context-menu-delete to be present"
+    assert has_properties, "expected context-menu-properties to be present"
+    page(:main).screenshot(path: screenshot_path)
+  end
+
+  step "click Edit — menu closes" do
+    page(:main).click("[data-test='context-menu-edit']")
+    sleep 0.2
+    gone = page(:main).evaluate("!document.querySelector('[data-test=\"context-menu\"]')")
+    assert gone, "expected context-menu to close after clicking Edit"
+  end
+
+  step "re-open and dismiss by clicking outside" do
+    page(:main).evaluate(<<~JS)
+      document.querySelector('[data-test="context-menu-trigger"]').dispatchEvent(
+        new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 200, clientY: 300 })
+      )
+    JS
+    page(:main).wait("[data-test='context-menu']", timeout: 5)
+    page(:main).evaluate("document.querySelector('[data-test=\"context-menu-area\"]').click()")
+    sleep 0.2
+    gone = page(:main).evaluate("!document.querySelector('[data-test=\"context-menu\"]')")
+    assert gone, "expected context-menu to close after clicking outside"
+  end
+end