Skip to main content

Overview

Conditionals let you run steps only when a condition is true. Use Start Condition to define the rule, add the steps that should run when it’s true, then End Condition to close the block. Conditionals overview with Start Condition summary and End Condition boundary

At a glance

  • Three condition types: Page Element, Expression, or AI
  • Operations: Visibility checks for elements; equality/inequality for expressions; natural language evaluation for AI
  • Scoped execution: Only steps within the block run when the condition is true
  • Automatic pairing: Adding Start Condition auto-adds End Condition

How it works

Start Condition form with Element vs Expression and Expected Value field Start Condition defines a test like “element is visible” or “variable equals value”. The block that follows runs only when that test passes. End Condition marks where the conditional scope ends.
Start Condition (define rule)
├── Step 1 (runs only if true)
├── Step 2 (runs only if true)
└── End Condition

Generated code (conceptual)

// Element condition
const cond1 = await page.locator('.error-banner').isVisible();
if (cond1) {
  // Steps execute here
}

// Expression condition
const cond2 = testVars['userRole'] === 'admin';
if (cond2) {
  // Steps execute here
}

// AI condition
const cond3 = await evaluateAICondition(
  'The submit button is enabled',
  screenshot,
  pageHTML
);
if (cond3) {
  // Steps execute here
}

Configure in the UI

Subject

  • Element: Pick or enter a locator. Operations include: “Is Visible”, “Is Not Visible”, “Has Text”, “Does Not Have Text”.
  • Expression: Enter a {{ ... }} expression (e.g., {{vars.userRole}}, {{vars.count}}). Compare using “Equals”, “Not Equals”, or evaluate truthiness.
  • AI: Write a natural language condition that describes what should be true on the page. AI analyzes the current page state (screenshot + HTML) and returns true or false.

Expected value

  • Shown only when required by the selected operation
  • For Element and Expression: enter the comparison value directly (e.g., admin, Pending)
  • For AI: enter your condition in plain English (e.g., “The submit button is enabled”)

Expression tips

  • Use {{ ... }} syntax; reference variables via vars, e.g., {{vars.count}}, {{vars.userRole}}
  • Normalize types before comparing: {{String(vars.count)}}, {{(vars.flag) ? 'yes' : 'no'}}
  • Truthiness checks: omit expected value and evaluate the expression directly when appropriate

AI condition tips

Write conditions that describe what you can see on the page:
  • Good: “The submit button is enabled”, “The error message is displayed in red”, “There are more than 5 items in the shopping cart”
  • Avoid: Vague terms like “the page looks ready” or internal states like “the API call succeeded”
AI conditions work by:
  1. Capturing a screenshot of the current page
  2. Extracting the page’s HTML structure
  3. Sending both to AI with your condition prompt
  4. Returning true or false based on the evaluation
You can use variables in AI conditions: The user {{vars.username}} is shown in the header. The variables will be replaced with their actual values before evaluation.

Examples

Element visibility

Show a retry flow only when an error banner appears:
  • Check if: Element → .error-banner
  • Operation: Is Visible
Inside the block:
  1. Click “Retry”
  2. Refill fields
  3. Submit

Expression value

Run admin-only steps:
  • Check if: Expression → {{vars.userRole}}
  • Operation: Equals
  • Expected value: admin
Inside the block:
  1. Open Admin Panel
  2. Verify dashboard
  3. Manage users

AI condition

Check complex UI states that are hard to express with selectors:
  • Check if: AI
  • Condition: The submit button is enabled and the form has no validation errors
Inside the block:
  1. Click Submit
  2. Wait for success message
  3. Verify redirect
AI conditions are useful when:
  • The state involves multiple elements or visual properties
  • You need to check dynamic content that changes frequently
  • Traditional selectors would be brittle or overly complex
More AI condition examples:
  • The shopping cart shows a total price above $100
  • The notification banner displays a success message
  • All required form fields are filled out
  • The product image is displayed and not broken
  • The table contains at least 10 rows of data

Best practices

  • Clear rules: Keep conditions specific and meaningful
  • Stable selectors: Prefer data-testid for element conditions
  • Consistent outputs: Ensure expressions return the expected type/format (e.g., string vs number), and match case when comparing
  • Minimal scope: Keep conditional blocks focused and short
  • Avoid deep nesting: Prefer simple, readable logic
  • AI prompts: Write clear, specific conditions that describe observable page states. Avoid ambiguous terms or internal implementation details
  • Cost awareness: AI conditions use 1 credit per evaluation. Use element or expression conditions when they’re sufficient

Troubleshooting

  • Always false: Selector/value mismatch; verify expected value and timing
  • Always true: Re-check logic or use the opposite operation to validate
  • Missing End Condition: Ensure every Start has a matching End
  • AI condition errors: Check that you have sufficient credits. Review the condition prompt for clarity and specificity. AI evaluates based on the current screenshot and HTML, so ensure the page is in the expected state before the condition runs

Performance considerations

  • Prefer simple expressions and stable selectors; avoid expensive DOM queries inside conditions
  • Keep conditional blocks short to minimize skipped work when false
  • If a condition is costly to compute, consider evaluating once and reusing its result
  • AI conditions take longer to evaluate than element or expression conditions (due to screenshot capture and AI processing). Use them when the added flexibility justifies the time cost
  • AI conditions consume 1 credit per evaluation. Consider using element or expression conditions for high-frequency test runs to optimize credit usage