2.1 No-Code UI Step Builder & Composable Canvas

How to visually compose cross-browser Playwright web tests with drag-and-drop steps, visual assertions, and zero coding.

From Click-Path to Click-Path, Minus the Code

Writing web automation by hand means writing TypeScript, wiring async/await around page navigation and network timing, and keeping a browser driver toolchain healthy before a single assertion ever runs – a real skill investment that quietly concentrates test authorship in a small automation team, while the manual QA analysts and product owners who actually know the flow being tested are left filing tickets instead of building coverage themselves. The Step Builder canvas removes that barrier without removing the engine underneath it: a case is a linear sequence of action blocks – LAUNCH a URL, CLICK an element, TYPE a value, run an ASSERTION – that reads almost exactly like the manual script it replaces, and every block still compiles down to real Playwright execution, not a simplified imitation of it.

Example: a storefront suite

This suite has five cases against the public Sauce Demo shop (saucedemo.com). An AI assistant wrote them through the CertiQA MCP server, and CertiQA validated each one before it was saved. Each case is one behaviour: login, a locked-out login, the cart badge, sorting and checkout.

Running the suite produces a run report. It shows the release gate, the result of every case and how long each took.

What a Step Actually Is

Every step on the canvas is three things: an action, a target locator, and – for TYPE/ENTER_VALUE and ASSERTION steps – a value or an expected condition. Underneath, a step compiles into the same Universal IR (Intermediate Representation) every other authoring path in CertiQA produces, whether it was typed by hand, imported from a legacy script, recorded by the Chrome extension, or generated by CertiMind. That shared representation is why a step you drag onto the canvas gets CertiHeal’s self-healing cascade for free the moment it runs – there is no separate “make this step resilient” configuration to remember.

Category	Representative Actions	What It’s For
Navigation	LAUNCH	Open the suite’s target URL (or a relative path) as the first step of a case.
Interaction	CLICK, TYPE / ENTER_VALUE	Drive the page – click a button or link, type a value into a field.
Verification	ASSERTION (e.g. VISIBLE, TEXT)	Confirm the page actually reached the state you expect before the case moves on.
Control Flow	Conditional IF (VARIABLE_EQUALS, ELEMENT_EXISTS, STEP_STATUS)	Run a step only when a condition holds – e.g. skip a promo-banner dismissal step when no banner is present.

Composing a Case Step by Step

• 1. Open “Test Suites” and choose “+ New Suite” -> “Web UI Suite” – a suite is the container a case’s runs, schedules, and reports all roll up under.
• 2. Open a Test Case to land on the Step Builder Canvas – a new case starts with nothing but a name, waiting on its first LAUNCH step.
• 3. Click “+ Add Step” and pick an action from the picker; the fields that appear (Selector, Value, Verification) change to match what that specific action needs.
• 4. Click “Run Case” to execute the sequence against a real browser and watch each step highlight as it completes – catching a wrong locator here is far cheaper than catching it for the first time in CI.

Step Shortcuts

With a step row focused on the canvas, these Alt shortcuts act on that step without opening its action menu:

Shortcut	What It Does
Alt+C	Clone the step
Alt+D	Delete the step (asks to confirm)
Alt+A / Alt+B	Insert a new step above / below
Alt+U / Alt+J	Move the step up / down
Alt+S	Toggle skip (turn the step off or on without deleting it)
Alt+I	Open the IF condition for the step
Alt+T	Open the temporal (date) settings for the step

Keeping a Canvas Maintainable as It Grows

• Assert after every meaningful state change, not only at the end of the case – a failure on step 3 of 12 tells you exactly what broke; one assertion at the very end only tells you something did.
• When the same short sequence – an OAuth login, a checkout – shows up in more than a couple of cases, pull it into a CertiBlock (see 4.1 CertiBlocks™ Sub-Routines) instead of copying the steps; a later UI change then needs one edit, not one edit per case.

• ✨ CertiHeal™ Self-Healing — What happens automatically the moment one of these steps’ locators stops resolving after a UI change.