Skip to main content

Creating UI Tests in the UI

The platform offers three ways to create UI tests: the Super Wizard (guided), the Advanced Editor (manual), and direct YAML editing.

The wizard walks you through 4 steps to create a working UI test without writing code.

Step 1: What to Test​

  1. Navigate to UI Tests in the sidebar
  2. Click New Test
  3. Enter a test name and optional description
  4. Provide the target:
    • Manual mode — paste the target URL directly
    • Project mode — select Project, Environment, and Target from dropdowns
  5. Choose a template to start from:
    • Login Flow — pre-builds login steps (navigate, type username/password, click submit)
    • Shopping Cart — add-to-cart and checkout flow
    • Page Navigation — multi-page navigation with validations
    • Custom — start with an empty step list
  6. If the target has credentials configured, the Credential Selector appears — pick a credential tag or use the default

Step 2: Discover Page​

The wizard crawls the target site to find interactive elements.

Option A: Auto-crawl

  1. Set crawl depth (1–5 pages deep) and max pages (5–50)
  2. The wizard pre-selects the engine for you — a green Recommended chip appears next to whichever of Playwright / HtmlUnit fits the target's tech stack (see Engine recommendation below). Click the other toggle if you want to override.
  3. If the site requires login, fill in the auth hint fields (username/password selectors)
  4. Click Discover Pages
  5. Results show an accordion per page with elements grouped by type (Buttons, Inputs, Links, Forms)
  6. Star elements you want to use in your test by clicking the checkbox
  7. Use Star All Interactive to bulk-select all buttons and inputs
  8. Use the Search Elements dialog to filter across all pages

Option B: Visual Element Picker

  1. Click Pick Elements Visually
  2. A browser session opens showing the live page
  3. Click on any element in the screenshot
  4. The right panel shows the element's CSS selector, tag, text, and attributes
  5. Click Add as... to create a step for that element (e.g., Click, Type, Validate)

Tip: You can skip this step entirely and build steps manually in Step 3.

Step 3: Build Steps​

Construct the test steps using your starred elements and the action palette.

Left sidebar:

  • Available Elements — starred elements from Step 2, grouped by page
  • Pick from Page — launch the Visual Picker to add more elements
  • Add Login Steps — auto-generates a login sequence using the environment's credentials

Main area:

  • Click an action from the Action Palette (organized by category: Navigation, Interaction, Wait, Validation, Advanced)
  • Each step appears as a card with fields for the action's parameters
  • Drag to reorder steps
  • Use up/down arrows to move steps
  • Duplicate or delete steps from the menu

Available actions: NAVIGATE_TO, CLICK, SEND_KEYS, CLEAR, VALIDATE_TEXT, WAIT_FOR_ELEMENT, TAKE_SCREENSHOT, and more. See Actions Reference for the full list.

Step 4: Review & Run​

  1. Review the test summary: name, target, step count, estimated duration
  2. Expand YAML Preview to see the generated YAML
  3. Set metadata: tags, group name, feature
  4. Select browsers: Chrome, Firefox, Edge (multi-select for matrix runs)
  5. Click Save or Save & Run

Engine recommendation​

When you enter Step 2 (Discover), the wizard asks the backend which crawler engine fits the target's tech stack and pre-selects the answer. A green Recommended chip appears next to the toggle that won; the toggles are still clickable if you want to override.

Selection logic (in priority order):

  1. Linked application tech — if the target's appTag matches an application on the project whose application_tech is a known SPA framework (REACT, ANGULAR, VUE, NEXT, SVELTE, VITE), the recommender returns Playwright, HIGH confidence. Zero-cost lookup, no network call.
  2. One-shot HTTP probe — the backend fetches the target URL once and scans the response:
Signal in responseRecommendationConfidence
__NEXT_DATA__ script, ng-version= attribute, data-reactroot, window.__NUXT__PlaywrightHIGH
<meta name="generator" content="WordPress / Hugo / Jekyll / DocusaurusHtmlUnitHIGH
X-Powered-By: PHP/… or X-Powered-By: WordPressHtmlUnitHIGH
Empty mount div (<div id="root"></div>, id="app", id="__next")PlaywrightMEDIUM
Substantial HTML (>2 KB, forms + many links, no SPA markers)HtmlUnitMEDIUM
Anything elsePlaywrightLOW (no chip shown — it's the safe default already)

Why this design: wrong "HtmlUnit" misses elements on SPAs (bad); wrong "Playwright" is just slower on static sites (acceptable). The recommender biases toward Playwright when any signal is ambiguous. LOW-confidence results are not surfaced as a chip — they would only add noise.

API: GET /api/crawl/recommend-engine?targetId=X or GET /api/crawl/recommend-engine?url=Y. Response shape: { engine, confidence, reason }. See Crawl API.

Advanced Editor​

For power users who want full control:

  1. From the UI Tests list, click Edit on any test (or create a new one)
  2. Choose a view mode:
    • Visual — step builder with action palette and step cards
    • Split — side-by-side visual builder and YAML editor
    • YAML — full-screen code editor (CodeMirror with YAML syntax highlighting)
  3. Changes in visual mode automatically sync to YAML and vice versa
  4. Use Crawl & Discover to find page elements at any time
  5. Use Templates to insert pre-built step sequences (login, checkout, etc.)
  6. Click Save

Running a UI Test​

  1. Click the Run button (play icon) on any test in the list
  2. Choose a run mode:
    • Rerun Last — same target and settings as the previous run
    • From Project — select environment and target from the project
    • Manual URL — enter a target URL directly
  3. Select browser(s) — Chrome, Firefox, Edge (each runs as a separate job). The browser list applies to the WebDriver engine; if the test's driver is PLAYWRIGHT, the matrix is Chromium / Firefox / WebKit instead. A test's driver is set when the test is created and isn't switched per run.
  4. Select credentials from the environment (or use default)
  5. Enter an optional run tag for filtering results later
  6. Click Run

Cross-engine (run the same test on WebDriver and Playwright together) is at the suite level, not the single-test level. To get that matrix, group the test into a suite and pass drivers: ["WEBDRIVER", "PLAYWRIGHT"] on the suite run — see Suites. The cross-engine compatibility score (Patent #8) only computes when both engines run the same logical test.

Results show on the UI Test Results page with:

  • Per-step pass/fail status
  • Screenshots (captured on failure)
  • Execution timing per step

Test Suites​

Group multiple tests for batch execution:

Creating a Suite​

  1. Navigate to UI Tests → Suites tab
  2. Click New Suite
  3. Enter suite name, description, and select a project
  4. Click Add Tests — search and select tests from the project
  5. For each test, optionally assign a specific target (overrides the default)
  6. Toggle Reuse Browser to keep the same browser session across tests
  7. Reorder tests with up/down arrows
  8. Enable/disable individual tests without removing them
  9. Click Save

Executing a Suite​

  1. Click Run on any suite
  2. Select the environment
  3. Review the test-to-target mapping (the dialog shows which targets each test will run against)
  4. Select credentials (optional)
  5. Click Execute Suite
  6. Results show per-test pass/fail with drill-down to individual step results

Visual Element Picker​

The Visual Element Picker lets you select page elements by clicking on a live screenshot — no CSS selector knowledge needed.

  1. Available from the Wizard (Step 2) or the Advanced Editor
  2. Opens a dialog with the page screenshot on the left and element details on the right
  3. Click anywhere on the page to select an element
  4. The right panel shows: tag, ID, CSS selector, XPath, text content
  5. Choose an action: Click, Type, Validate Text, etc.
  6. The step is added to your test automatically
  7. Use the navigation bar at the top to browse to different pages
  8. Click Refresh to update the screenshot after navigation