TecNimbus

Let’s build better software—and a more balanced life—together.

Subscribe
,

AI-Powered Browser Testing with Playwright and ZeroStep

·

by

Don

Test automation is evolving rapidly with the help of AI. Traditionally, QA engineers spend a significant amount of time writing and maintaining automated test scripts, especially when dealing with fragile selectors and UI changes.

With the emergence of AI-powered tools, we can now automate browser interactions using natural language instructions instead of manually writing detailed test steps.

In this article, we explore how ZeroStep, an AI extension for Playwright, enables a new approach to test automation. By using simple prompts like “Click the login button” or “Fill the email field with a valid address”, ZeroStep interprets the page and performs the required actions automatically.

This approach reduces the effort required to create and maintain UI tests while allowing engineers to focus more on testing user behavior and business flows rather than implementation details.

What is ZeroStep?

ZeroStep is an AI-powered extension for Playwright that allows you to automate browser interactions using natural language prompts instead of traditional selectors.

In a typical Playwright test, engineers write automation steps using CSS or XPath selectors to locate elements on the page. These selectors can often break when the UI changes, which leads to additional maintenance effort.

ZeroStep simplifies this process by introducing an ai() function that interprets plain English instructions and converts them into Playwright actions. For example, instead of identifying an element by a selector, you can instruct the AI to perform an action directly.

Traditional Playwright example:

await page.locator('#login-button').click();

With ZeroStep:

await ai("Click the login button");

The AI analyzes the page structure and determines the most appropriate element to interact with. This approach makes tests easier to write, more readable, and potentially more resilient to UI changes.

ZeroStep does not replace Playwright; instead, it enhances Playwright by allowing engineers to combine traditional automation with AI-driven steps when needed.

Integrating Playwright with ZeroStep

In this section, we will walk through a simple example of integrating Playwright with ZeroStep and running an AI-driven test.

✅ 1. Generate a ZeroStep Token

First, visit the ZeroStep website and generate an API token.

Go to:
https://zerostep.com/

After signing in, generate your API token, which will be used by ZeroStep to process AI prompts during test execution.

✅ 2. Create a Sample Playwright Project

If you don’t already have a Playwright project, you can create one using the following command:

npm init playwright@latest

Follow the prompts to complete the setup. This will create a basic Playwright project with example tests and configuration.

✅ 3. Install the ZeroStep Dependency
npm install @zerostep/playwright

This package enables Playwright tests to execute AI-driven steps using natural language prompts.

✅ 4. Configure ZeroStep

Next, create a file named: zerostep.config.json

Place it in the root directory of your project and add your generated token.

Example configuration:

{
  "TOKEN": "your-zerostep-token-here"
}

This token allows your Playwright tests to communicate with the ZeroStep AI service.

✅ 5. Add a Sample ZeroStep Test

Create a Playwright test file and add the following example script.

import { test, expect } from '@playwright/test'
import { ai } from '@zerostep/playwright'

test.describe('Calendly', () => {
  test('book the next available timeslot', async ({ page }) => {
    await page.goto('https://calendly.com/zerostep-test/test-calendly')

    await page.waitForTimeout(5000); 
    await ai('Verify that a calendar is displayed', { page, test })
    await ai('Dismiss the privacy modal', { page, test })
    await ai('Click on the first day in the month with times available', { page, test })
    await ai('Click on the first available time in the sidebar', { page, test })
    await ai('Click the Next button', { page, test })
    await ai('Fill out the form with realistic values', { page, test })
    await ai('Submit the form', { page, test })

    const element = await page.getByText('You are scheduled')
    expect(element).toBeDefined()
  })
})

Instead of using selectors, the test describes actions using natural language prompts.

✅ 6. Run the Test

Finally, run the Playwright test:

npx playwright test

During execution, ZeroStep will interpret the AI prompts and perform the corresponding browser actions.

🧭 Conclusion
  • ZeroStep introduces a new approach to test automation by allowing engineers to interact with web applications using natural language prompts instead of traditional selectors.
  • When combined with Playwright, it enables teams to quickly create AI-assisted UI tests with minimal setup.
  • In this tutorial, we covered the key steps to get started:
    • Generate a ZeroStep API token
    • Create a Playwright project
    • Install the ZeroStep dependency
    • Configure the zerostep.config.json file
    • Write and execute a simple AI-driven test
  • This approach can help reduce the effort required to write and maintain UI tests, especially during early experimentation or rapid prototyping.
  • However, AI-driven testing should still be used alongside traditional automation practices to ensure stability, accuracy, and maintainability.
  • As AI capabilities continue to evolve, tools like ZeroStep may help testers focus more on user behavior and test scenarios rather than implementation details.