Web UI Testing

End-to-end browser automation using real Playwright tests with selectors captured from your live application.

What this module tests

The Web UI module generates Playwright-based end-to-end tests that simulate real user interactions in a Chromium browser. Tests cover:

• Page navigation and URL routing
• Form input, validation, and submission
• Button clicks, modal interactions, and multi-step flows
• Dynamic content loaded via JavaScript (SPAs and React/Vue/Angular apps)
• Redirect and authentication flows
• Error state handling (404 pages, form validation errors, server errors)

How AppExplorer captures selectors

Before scripts are generated, AppExplorer crawls the live application and builds a selector map for each page. For each interactive element it discovers, it records multiple selector candidates ranked by stability:

1. data-testid attributes (highest stability)
2. ARIA roles and accessible names
3. Element text content
4. CSS class-based selectors (lower stability — subject to style changes)
5. XPath as a fallback

ScriptGen uses the highest-stability selector available for each element. When UI changes cause locator failures, LocatorHealer automatically re-discovers and proposes updated selectors.

KB scenario format for Web UI

# Web UI scenario example
domain: checkout
base_urls:
  - /cart
  - /checkout
  - /order-confirmation

scenarios:
  - id: CHK-001
    title: "User completes checkout with valid payment"
    module: web_ui
    tags: [smoke, regression]
    priority: high
    steps:
      - Navigate to /cart with at least one item in cart
      - Click the "Proceed to Checkout" button
      - Fill in shipping address form fields
      - Click "Continue to Payment"
      - Enter valid test card details in the payment form
      - Click "Place Order"
    expected: >
      Redirected to /order-confirmation page.
      Order confirmation number is displayed.
      "Thank you for your order" heading is visible.

  - id: CHK-002
    title: "Empty cart shows message and disabled checkout button"
    steps:
      - Navigate to /cart with an empty cart
    expected: >
      "Your cart is empty" message is visible.
      "Proceed to Checkout" button is either absent or disabled.

Browser and viewport configuration

By default, Web UI tests run in Chromium at a desktop viewport (1280×800). You can configure additional viewports per test plan to run mobile and tablet tests:

• Desktop: 1280×800 (default)
• Tablet: 768×1024
• Mobile: 375×812

Configure viewports in Project Settings → Test Execution → Viewport Profiles.

Handling authentication in UI tests

Most UI flows require a logged-in user. Configure test credentials in Project Settings → Environments → Credentials. Web UI tests use a shared authenticated session established at the start of the test suite — login is performed once and the session is reused across tests in the same run.

Generated script structure

Generated Web UI scripts use Playwright with pytest-playwright. Each test function uses a page fixture that provides an authenticated Chromium browser context.

# Example generated test structure (illustrative)
def test_chk_001_complete_checkout(page, base_url, test_credentials):
    page.goto(f"{base_url}/cart")
    page.get_by_role("button", name="Proceed to Checkout").click()
    page.get_by_label("First name").fill(test_credentials["first_name"])
    page.get_by_label("Last name").fill(test_credentials["last_name"])
    # ... shipping fields ...
    page.get_by_role("button", name="Continue to Payment").click()
    page.get_by_label("Card number").fill("4111111111111111")
    page.get_by_role("button", name="Place Order").click()
    page.wait_for_url("**/order-confirmation**")
    assert page.get_by_role("heading", name="Thank you for your order").is_visible()