Low-Code Test Builder

The Low-Code Builder lets you create automated tests by arranging visual building blocks -- no programming skills required. You can also record interactions directly from your browser and turn them into reusable automated tests. AI assists throughout the process by detecting elements, suggesting assertions, and keeping your tests working even when your app's UI changes.

The Test Builder Interface

The Low-Code Builder has three main panels:

Action Library (Left Panel)

A categorized list of all the actions you can use in your automated tests:

• Browser Actions -- Navigate to URL, click element, type text, select dropdown, check/uncheck, hover, scroll
• API Actions -- Send HTTP requests (GET, POST, PUT, DELETE), validate responses
• Assertions -- Verify element is visible, verify text content, verify element value, verify page title, verify URL
• Waits -- Wait for element, wait for page load, wait for network idle, fixed delay
• Control Flow -- If/Else conditions, loops, try/catch for error handling
• Data -- Read from CSV, use variables, generate random data

Canvas (Center Panel)

The workspace where you build your test flow. Actions appear as connected blocks that execute from top to bottom. You can:

• Drag and drop actions from the library onto the canvas
• Reorder blocks by dragging them up or down
• Connect conditional blocks to create branching logic
• Delete blocks by selecting them and pressing Delete

Properties Panel (Right Panel)

When you select an action block on the canvas, the properties panel shows its configurable settings. For example, a "Click Element" action has:

• Selector -- Which element to click (CSS selector, XPath, or text content)
• Wait for -- Condition to wait for before clicking (element visible, element clickable)
• Timeout -- How long to wait before failing (default: 10 seconds)
• Description -- Optional note describing what this step does

Building Your First Automated Test

Here is a step-by-step example of creating a login test:

1. Open a test case in ProvaLab.io.
2. Click the Automate button, then select Low-Code Builder.
3. The builder interface opens.

Step 1: Navigate to the Login Page

1. Drag a Navigate to URL action from the library onto the canvas.
2. In the properties panel, set:
   • URL: https://your-app.com/login
   • Wait for: Page load complete

Step 2: Enter the Email

1. Drag a Type Text action onto the canvas below the navigate step.
2. Configure:
   • Selector: input[name="email"]
   • Text: [email protected]
   • Clear first: Yes

Step 3: Enter the Password

1. Drag another Type Text action onto the canvas.
2. Configure:
   • Selector: input[name="password"]
   • Text: TestPassword123!
   • Clear first: Yes

Step 4: Click the Login Button

1. Drag a Click Element action onto the canvas.
2. Configure:
   • Selector: #login-button
   • Wait for: Element is clickable

Step 5: Verify Successful Login

1. Drag an Assert Element Visible action onto the canvas.
2. Configure:
   • Selector: .dashboard-welcome
   • Timeout: 10 seconds
   • Error message: "Dashboard did not load after login"

Your test flow is complete. Click Save Automation to save it.

Recording Tests with the Browser Extension

Instead of building tests manually, you can record your interactions with your application and let ProvaLab.io create the automation steps for you.

Installing the Extension

1. In ProvaLab.io, go to Settings and select Extensions.
2. Click Download Browser Extension for your browser (Chrome or Edge).
3. Follow the browser's prompts to install the extension.
4. Once installed, you will see a ProvaLab.io icon in your browser toolbar.

Recording a Test

1. Click the ProvaLab.io extension icon in your browser toolbar to open the recording panel.
2. Click the Start Recording button.
3. Navigate to your application and interact with it normally:
   • Click buttons and links
   • Type into form fields
   • Select dropdown options
   • Submit forms
4. The recording panel shows each captured step in real time, including a step count and duration.
5. When you are finished, click Stop Recording.
6. The recorded steps appear as a list that you can review.

Reviewing and Refining Recorded Steps

After recording, you can:

• Remove unnecessary steps -- Delete clicks on irrelevant elements or accidental interactions.
• Edit selectors -- If the recorder captured a fragile selector, update it to something more reliable.
• Add assertions -- The recorder captures actions but may not capture what you are verifying. Add assertion steps to validate results.
• Add waits -- Insert explicit waits before steps that depend on dynamic content loading.
• Reorder steps -- Drag steps to rearrange them if needed.

Saving the Recording as an Automation

1. After reviewing, click Save to ProvaLab.io.
2. Choose the test case to link the automation to.
3. The recorded steps are converted into Low-Code Builder blocks.
4. You can open them in the builder at any time to make further edits.

tip

Record the "happy path" first, then open the results in the Low-Code Builder to add assertions, error handling, and edge-case branches. This gives you the fastest path from manual testing to automation.

Running Automated Tests

Run from the Builder

1. Open your automation in the Low-Code Builder.
2. Click the Run button (play icon) in the toolbar.
3. A browser window opens and you can watch the test execute in real time.
4. Each step shows a pass/fail indicator as it completes.
5. If a step fails, execution pauses and highlights the failing step with error details.

Run as Part of a Test Run

Once an automation is saved and linked to a test case, it runs automatically during test execution:

1. Create a test run that includes the automated test case.
2. Start the test run.
3. Automated test cases execute without manual intervention.
4. Results are recorded just like manual test results -- with pass/fail status, screenshots, and timing.

Run on Cloud Infrastructure

You can execute Low-Code automations on ProvaLab.io cloud browsers and devices:

1. When creating a test run, select the target environment (browser type, device, OS).
2. Automated tests run on the selected cloud infrastructure.
3. Results include screenshots, video recordings, and logs from the cloud session.

AI-Powered Features

Smart Element Detection

When you use the Selector Helper or record interactions, AI analyzes your application's UI to generate the most reliable selectors. It prefers stable attributes like data-testid, aria-label, and unique IDs over fragile positional selectors.

Self-Healing Locators

When your application's UI changes (e.g., a button's class name changes or an element moves on the page), self-healing locators automatically try alternative strategies to find the element:

1. The original selector fails.
2. AI searches for the element using backup attributes (text content, nearby labels, element type, position).
3. If a match is found, the test continues and the selector is updated for future runs.
4. You receive a notification about the healed selector so you can review the change.

This means minor UI changes do not immediately break your automated tests.

AI-Suggested Assertions

After recording a sequence of actions, AI can suggest assertions you should add:

• Page title checks after navigation
• Element visibility checks after form submissions
• Text content checks for confirmation messages
• URL checks after redirects

Generating Code from Low-Code Tests

If you want to export your visual test as actual code:

1. Open the automation in the Low-Code Builder.
2. Click Generate Code in the toolbar.
3. Select your framework and language:
   • Frameworks: Selenium, Playwright, Cypress, Puppeteer
   • Languages: Python, JavaScript, Java, C#
4. Click Generate.
5. Copy the generated code or download it as a file.

This is useful when you want to integrate your tests into an existing code-based test suite or CI/CD pipeline.

tip

Start with the Low-Code Builder to quickly prototype and validate your test flow. Once it works, generate code in your preferred framework to add it to your version-controlled test suite.