Enhancing Microsoft Playwright Tests Automation With The Power of AI Using ZeroStep

What covered in this blog

- [ ] About ZeroStep.
- [ ] Why Use ZeroStep.
- [ ] Conventional Approach for writing the script.
- [ ] Script generated by ZeroStep.
- [ ] Limitation with ZeroStep.

My New Book On Playwright

Web Automation Testing Using Playwright: End-to-end, API, accessibility, and visual testing using…

ZeroStep currently has some limitations, but there is optimism for its future development. The maintainers are anticipated to implement continuous improvements, potentially transforming ZeroStep into a more advanced and sophisticated tool.

Why Use ZeroStep?

ZeroStep offers several compelling reasons to choose it for your end-to-end (E2E) testing needs:

The Conventional Approach

1.Selectors are tightly coupled to the application’s markup:

• Traditional E2E tests rely on CSS selectors, XPath, or Ids, which are fragile and prone to breaking with even minor changes to the application’s UI.

2. Slow implementation:

• Every action must be precisely translated to code, making E2E tests much slower to implement than unit and integration tests.

3.Difficulty with complex scenarios:

• Complex scenarios are difficult to automate and frequently break, requiring significant maintenance.

4.Delayed testing:

• E2E tests can only be written after the functionality it’s testing is feature-complete, delaying the testing process.

Testing with ZeroStep

1.No selectors are used, ever:

• ZeroStep’s AI assistant determines what actions to take at runtime, eliminating the need for CSS selectors, XPath, or Ids.

2. Quick test creation:

• Build tests quickly by expressing actions and assertions as plain text instructions. This approach allows for rapid test creation without extensive coding.

3. Easy automation:

• If you can express what you want tested, you can automate it. ZeroStep’s plain-text instructions make it easy to automate even complex scenarios.

4. Test-Driven Development (TDD) for E2E:

• Since tests aren’t coupled to the implementation details of the application, you can take a TDD approach to writing E2E tests. This means you can write your tests before the functionality is fully implemented, promoting better design and faster feedback.

Features and Benefits of ZeroStep

1.Simplified Testing Process: ZeroStep simplifies the testing process by allowing testers to write tests using plain-text instructions, which are then translated into automated tests by leveraging the power of GPT-3.5 and GPT-4. This eliminates the need for writing complex code, CSS selectors, or XPath locators.

2. Enhanced Efficiency: By automating the creation of tests from natural language instructions, ZeroStep significantly speeds up the testing process. Testers can focus on writing high-level test scenarios without getting bogged down in the technical details of test implementation.

3.Greater Resilience: Traditional E2E tests can easily break with minor changes in the application’s UI. ZeroStep’s AI-driven approach creates more resilient tests that are less susceptible to such changes, reducing the maintenance burden on QA teams.

4.AI-Powered Test Generation: The AI engine behind ZeroStep generates robust test cases based on user-provided scenarios, ensuring comprehensive test coverage. The tool adapts to changes in the application, automatically updating test cases as needed.

5.Natural Language Interface: Using GPT-3.5 and GPT-4, ZeroStep understands and processes plain-text instructions, making it accessible for non-technical team members to contribute to the testing process. This democratizes testing and fosters better collaboration between QA, developers, and other stakeholders.

6.Integration with Playwright: ZeroStep enhances the capabilities of Playwright, a popular framework for E2E testing, by adding AI-driven features. This integration ensures that users can continue to leverage Playwright’s powerful features while benefiting from ZeroStep’s AI enhancements.

How ZeroStep works ?

ZeroStep integrates seamlessly with Playwright, leveraging its capabilities to enhance end-to-end (E2E) testing with artificial intelligence.

Here’s how it works:

• Integration: It works in conjunction with Playwright, a well-known browser automation library.
• AI Function: ZeroStep provides an ai() function that allows testers to use AI capabilities in their tests.
• Natural Language Instructions: Testers can write test scripts using plain text or natural language commands.
• Dynamic Interaction: The AI interprets these instructions / scripts and determines how to interact with the application interface at runtime.
• Complex Tasks: It can handle sophisticated actions like booking appointments or verifying search results without detailed step-by-step coding.
• Adaptive Behavior: The AI assistant figures out how to perform the requested actions based on the current state of the application.
• Abstraction: This approach abstracts away the need for specific selectors or detailed navigation instructions, making tests more robust and easier to maintain.

Set-up and Installation

Install Playwright

Install Playwright using below command in VS code or the IDE you are using

npm init playwright@latest

Install ZeroStep

Run the below command to install ZeroStep

npm i @zerostep/playwright -D

Generate API Key

Login into ZeroStep https://app.zerostep.com with Create your free account Or Sing-in with Google Or Sign in with Github and Copy the Key see below screen.

Create ZeroStep config file

Create zerostep.config.json file in the root folder and paste the above key

{
  "TOKEN": "0step:xxxxx-b9x89-xxxx-8xxfaa-xxxxxxx"
}

Automate Test Case Using ZeroStep

Use case

Let’s take the below example

1.Login to the site https://ecommerce-playground.lambdatest.io/index.php?route=account/login
2.Enter valid user name and password
3.Clcik on Login Button
4.Edit the account
5.Fill the data in the fields and click on continue button

Conventional Approach

if we use the conventional approach we have to write the below code for the above scenario.

import { test, expect } from '@playwright/test';

test('Login and Edit the data', async ({ page }) => {
  await page.goto('https://ecommerce-playground.lambdatest.io/index.php?route=account/login');
  await page.getByPlaceholder('E-Mail Address').click()
  await page.getByPlaceholder('E-Mail Address').fill('xxxxxx@yopmail.com');
  await page.getByPlaceholder('E-Mail Address').press('Tab');
  await page.getByPlaceholder('Password').fill('xxxxx');
  await page.getByRole('button', { name: 'Login' }).click();
  await page.waitForURL('https://ecommerce-playground.lambdatest.io/index.php?route=account/account')
  await page.getByRole('link', { name: 'Edit Account' }).click();
  await page.getByPlaceholder('First Name').click()
  await page.getByPlaceholder('First Name').fill('John');
  await page.getByPlaceholder('First Name').press('Tab');
  await page.getByPlaceholder('Last Name').fill('Peter');
  await page.getByPlaceholder('Last Name').press('Tab');
  await page.getByPlaceholder('E-Mail').press('Tab');
  await page.getByText('E-Mail').click();
  await page.getByPlaceholder('E-Mail').fill('xxxxxxx@yopmail.com');
  await page.getByPlaceholder('Telephone').fill('xxxxxxxxxx');
  await page.getByRole('button', { name: 'Continue' }).click();
});

Testing with ZeroStep

Testing with Zerostep very easy ,build tests quickly by expressing actions and assertions as plain text instructions.No selectors are used ever. ZeroStep’s AI assistant determines what actions to take at runtime.

Below the code to Login,Click on Edit account and fill the data in all fields.

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

test.describe('Playwright with ZeroSteps', () => {
  test('Login and Edit the data', async ({ page }) => {
    await page.goto('https://ecommerce-playground.lambdatest.io/index.php?route=account/login')
    await ai('Enter E-Mail Address as playershealth@yopmail.com', { page, test })
    await ai('Enter Password as Test@1234', { page, test })
    await ai('Click on the login button', { page, test })
    await page.waitForURL('https://ecommerce-playground.lambdatest.io/index.php?route=account/account')
    await ai('Click on the Edit Account link', { page, test })
    await page.waitForURL('https://ecommerce-playground.lambdatest.io/index.php?route=account/edit')
    await ai('Fill out the form with realistic values', { page, test })
    await ai('Click on the continue button', { page, test })
  })
})

ai(): This function is provided by ZeroStep and acts as an interface between your Playwright test and ZeroStep's AI capabilities.

Execute the above code

In below screenshot you can see above script run and user able to update the account information. ZeroStep’s ai() function used to simplify Playwright tests by expressing actions in plain text instructions.

Here’s a brief explanation of what each part does:

1. Imports:

• import { test, expect } from '@playwright/test': Imports test functions from Playwright's testing framework.
• import { ai } from '@zerostep/playwright': Imports a custom function ai from ZeroSteps library, presumably for performing AI-driven automation tasks.

2. Test Steps:

• await page.goto('...'): Navigates the browser page to the specified URL
• await ai('Enter E-Mail Address...', { page, test }): Uses the ai function to simulate entering an email address.
• await ai('Enter Password...', { page, test }): Simulates entering a password.
• await ai('Click on the login button', { page, test }): Simulates clicking on a login button.
• await page.waitForURL('...'): Waits for the page URL to change, indicating successful navigation.
• await ai('Click on the Edit Account link', { page, test }): Simulates clicking on an 'Edit Account' link.
• await page.waitForURL('...'): Waits for another URL change.
• await ai('Fill out the form...', { page, test }): Simulates filling out a form.
• await ai('Click on the continue button', { page, test }): Simulates clicking on a 'continue' button.

Limitation of Using ZeroStep

Indeed ZeroStep offers several advantages in terms of automation efficiency and natural language processing capabilities, it also comes with notable disadvantages that organizations should consider:

Flakiness and Reliability Issues: ZeroStep may experience occasional flakiness and inconsistent test results, especially when compared to traditional automation methods that use explicit element locators

Security and Privacy Concerns: Transmitting page context and potentially sensitive information through AI queries raises security and privacy considerations, requiring careful handling and oversight

Complexity in Handling Dynamic UI: ZeroStep may struggle with dynamic user interfaces that frequently change **[This part yet to be tested]

About Pricing

ZeroStep offers straightforward pricing plans:

• Free Tier: $0/month, including 500 ai() function calls per month and unlimited users.
• Team Plan: $20/month, offering 2,000 ai() function calls per month and unlimited users.

For more details, visit the pricing page

Is There a Free Trial?

Yes, ZeroStep provides a generous free tier with 500 ai() function calls per month. This enables users to harness the capabilities of AI-enhanced testing without incurring any initial costs.

Summary

ZeroStep currently has some limitations, but there’s hope for its future development. The tool’s maintainers are expected to make continuous enhancements, potentially transforming ZeroStep into a more advanced and refined solution.

My Book On Playwright 2025

I’m thrilled to introduce “Web Automation Testing Using Playwright: End-to-end, API, accessibility, and visual testing using Playwright.”

This book is your comprehensive guide to mastering Playwright, covering:
✅ End-to-end testing
✅ API testing
✅ Accessibility testing
✅ Visual testing

Whether you’re a beginner or a seasoned QA professional, this book is designed to help you elevate your automation skills.

📍 India: https://tinyurl.com/2s3vn4wz
🌍 International: https://tinyurl.com/mr2tnwkr

I would love your feedback, and if you find it valuable, please share it with your network. Together, let’s make automation testing more accessible and powerful!

References:

https://zerostep.com/