Products

Test Step - UI

UI steps are the building blocks of browser automation in AutoBP — each step performs a single action or assertion on a Workday page.

Getting Started

The Step Editor is where you create and configure individual UI automation steps. Each step represents a single action or assertion — like filling a form field, clicking a button, or verifying a value appears on screen.

You can open the Step Editor from any test case or BP workflow by clicking on an existing step row, or by adding a new step via the "+" button inside a case card.

Step Editor with code and sidebar
The Step Editor showing AI tab, code editor, and left sidebar.
1

Open a Suite and select a Test Case to expand its details.

2

In the Step List, click an existing step to edit it, or click the "+" button to create a new step.

3

The Step Editor opens as a new tab within the suite page with a left sidebar and a main editing area.

4

If you are editing a global suite-level hook (Setup / Teardown), the editor opens as a modal overlay instead.

Practical Tips

  • Each step should focus on one meaningful action — this makes debugging and reuse much easier.
  • Step names support Gherkin-style patterns like "When I search for {query}" — this makes your test cases readable and self-documenting.

Step Anatomy

Every step in AutoBP has three core components that define its behavior. Understanding these will help you build reliable automation quickly.

**Step Name**: A human-readable title that describes what the step does. You can embed parameters using `{paramName}` or `<paramName>` syntax — these are automatically detected and exposed as columns in the test data table.

**Gherkin Pattern**: A natural language description of the step action using Given / When / Then style. Parameters in the pattern are highlighted and auto-extracted.

**Action Code**: The actual automation logic — written in TypeScript using Playwright APIs and AutoBP's built-in `Workday` helper library. The code editor provides full intellisense, auto-completion for all `Workday.*` actions, and real-time syntax checking.

1

Enter a descriptive step name — it becomes the label shown in the test case card.

2

Optionally add a Gherkin pattern like "When I login as {username}" — parameters in curly braces are automatically detected.

3

Write or generate the action code that performs the automation logic.

4

Parameters detected from the name, pattern, and code are automatically collected into the parameter table for test data binding.

Practical Tips

  • Use Gherkin patterns consistently so your test cases read like executable specifications.
  • The parameter table auto-updates as you type — parameters extracted from `{param}`, `<param>`, and `params.xxx` references in code are shown instantly.

Code Editor Mode

The Code Editor provides a full-featured Monaco editor (the same engine powering VS Code) with TypeScript syntax highlighting, auto-completion, and error checking.

AutoBP injects custom type declarations for `Workday.*` helper functions and Playwright's `page.*` APIs — so you get intelligent autocomplete as you type.

New lines automatically insert `await Workday` to speed up coding. Pressing Backspace on an empty `await Workday` line clears it entirely.

When you open a new step, the editor shows the following example code as a starting reference:

// Available Actions:
// await Workday.runTask(taskName) - Start a Workday task
// await Workday.getText('Label', 'Panel') - Extract text value
// await Workday.fillAuto('Label', 'Value') - Smart fill for any field
// await Workday.clickButton('label') - Click specific button
// await Workday.log(message) - Log to task output

// Example: Extract and Re-use Data
// 1. Shared Global Storage (Persists across all steps in the suite)
vars['manager'] = await Workday.getText('Manager'); 

// 2. Local Step Variable (Only works inside this current step)
let tempId = await Workday.getText('Employee ID');

// 3. Conditional Logic
if (vars['manager'] === 'Hayden Stevens') {
    await Workday.log('Found targeted manager');
}

Workday.log('Operation complete');

This example shows four key patterns: **data extraction** (`getText`), **global variables** (`vars['key']`) for sharing data between steps, **local variables** (`let`) for step-scoped data, and **conditional branching** based on extracted values. You can clear this and start fresh, or build on top of it.

1

Click the "AI" tab (sparkle icon) in the left sidebar and switch to the code editor view.

2

Type `await Workday.` to see available helper functions with autocomplete suggestions.

3

Use standard Playwright APIs like `page.click()`, `page.fill()`, `page.waitForSelector()` for custom interactions.

4

Reference test data parameters using `params.parameterName` to inject row-specific values.

5

The editor highlights syntax errors in real-time — hover over red squiggles for error details.

Practical Tips

  • Use `Workday` helpers for common Workday operations — they handle selectors, waits, and error recovery automatically.
  • For complex custom logic, use raw Playwright APIs — you have full access to `page`, `browser`, and `context` objects.

Visual (Codeless) Mode

The Visual Mode lets you build steps by composing pre-built action blocks without writing any code. Switch to this mode by clicking the "Vision" (bot icon) tab in the left sidebar rail.

A library of 12+ standard Workday actions is available — including Login, Run Task, Search, Fill Field, Click Element, Wait, Assert Text, Navigate, and more. Each action has a configurable form with fields for selectors, values, and parameters.

1

Click the "Vision" tab (bot icon) in the left sidebar rail to switch to visual mode.

2

Browse the action library and click an action block (e.g., "Fill Field") to add it to the sequence.

3

Configure each action's parameters — selectors, input values, and bind test data variables directly in the form fields.

4

Arrange multiple actions in sequence by adding more blocks. The main editor shows a visual timeline of your actions.

5

Click "Customize" on any visual sequence to convert it to editable code for fine-tuning.

Practical Tips

  • Visual Mode is ideal for standard Workday interactions like login, form fills, and navigation.
  • You can toggle between the visual sequence view and a read-only code view to see what your visual blocks generate.

AI-Powered Step Authoring

AutoBP offers three AI modes to help you build steps faster using natural language. Access them from the "AI" tab in the left sidebar.

**AI Prompt**: Enter a natural language description of what you want the step to do (e.g., "Click the HR Partner role, select Jane Smith, and submit the compensation change"). The AI generates a complete step with code and parameter bindings.

**AI Refine**: Improve an existing step by providing feedback. Describe what needs to change — "Make the selector more robust", "Add error handling", "Wait for the loading spinner to disappear" — and the AI refines the code accordingly.

**AI Agent Mode**: An autonomous browser agent that navigates the actual Workday page, inspects the DOM, handles multi-step forms, recovers from errors, and generates production-ready step code end-to-end.

1

Enter your instruction in the AI prompt textarea — be specific about what action to perform and on which page elements.

2

Optionally paste or upload a screenshot of the target page to provide visual context for more accurate generation.

3

Click "Prompt" (sparkle icon) for a fresh generation, "Refine" (star icon) to improve existing code, or "Agent" (bot icon) to launch the autonomous browser agent.

4

Review the generated code in the editor — the AI result appears instantly in the main code panel.

5

Click "Save" in the sidebar footer to persist the step. Your prompt history (last 10) is saved for quick reuse.

Practical Tips

  • Include exact button labels, field names, and page titles in your prompts for the most accurate results.
  • Use screenshots when describing visual layout or complex page interactions — the AI analyzes the image via OCR.
  • Always review AI-generated code before execution, especially when targeting production environments.

Recording Steps from Browser Interactions

Recording Mode lets you generate steps automatically by performing actions in a real browser. The recorder tracks every click, input, navigation, and selection — then converts them into reliable automation code with robust selectors.

This is especially useful for complex workflows where describing every interaction in text would be tedious or error-prone.

1

Click the "Record" tab (video icon) in the left sidebar rail to open the recorder panel.

2

Enter the starting URL and click "Record" — a browser window opens connected to the recorder hub.

3

Perform your target workflow manually in the browser window. The recorder captures each action in real-time.

4

Click "Stop" when finished — the recorded interactions are converted into `await Workday.xxx()` code and appended to the editor.

5

Review the generated code, make adjustments (replace hard-coded values with parameters), then save.

Practical Tips

  • Keep recording sessions focused on a single workflow — avoid navigating to unrelated pages.
  • After recording, replace hard-coded text values (like employee names) with test data parameters for reusability.
  • Always verify recorded selectors on dynamic Workday elements — some generated selectors may need manual tuning.

Using the Step Library

The Step Library stores reusable step definitions that can be shared across suites and test cases. Switch to the "Library" tab (list icon) in the left sidebar to browse, search, and reuse existing steps.

Library steps are fully defined with name, pattern, code, and parameter bindings. You can USE an existing step as-is, CLONE it to create a customizable copy, or EDIT it if you have the necessary permissions.

1

Click the "Library" tab (list icon) in the left sidebar to browse available step definitions.

2

Use the search bar to filter steps by name or keyword.

3

Click "USE" to insert the step directly into your current case without modification.

4

Click "CLONE" to create a copy that you can customize — useful when a library step is close but needs adjustments.

5

System steps (marked with "SYS" badge) are read-only and provided by the platform.

Practical Tips

  • Build a library of common step patterns that your team can reuse across projects.
  • When you clone a library step, the original remains unchanged — safe for experimentation.

Testing & Validating Steps

Before integrating a step into a full test suite, validate it with a small dataset to confirm it works correctly. AutoBP provides both local and server-side execution for testing.

1

Bind a minimal row of test data with the required parameter values.

2

Run the step locally using the "Run Locally" (laptop icon) button in the test data row — this executes on your machine with full debug visibility.

3

Check the execution logs and any screenshots captured during the run.

4

Verify assertions and output values match expectations.

5

Save the step only after confirming the result is reliable and understandable.

Practical Tips

  • Test with edge cases — try empty values, special characters, and long strings to ensure robustness.
  • Local execution gives you real-time console logs and screenshots for faster debugging.

Best Practices

Following these guidelines will help you build maintainable, reliable automation steps that work well across environments and test cases.

Practical Tips

  • One step should do one thing — a single action or assertion. This makes debugging and reuse much easier.
  • Use test data parameters (`{{paramName}}` or `params.paramName`) instead of hard-coding values like employee names or dates.
  • Give steps descriptive names that convey business intent (e.g., "Validate Employee Promotion Approval" rather than "Step 3").
  • Keep generated code clean and readable — remove unused variables and add meaningful comments where the intent is not obvious.
  • Build a reusable step library for common patterns to accelerate creation of new test cases.