Take the Zero(th) Step Towards AI with Playwright

Photo by Jeremy Perkins on Unsplash

💻 Tedious manual entry of form data? 🔧 Test scripts breaking due to minor UI changes? 🎯 Struggling to maintain selectors and with complex javascript coding?

If these sound familiar, it’s time to take the zero(th) step towards AI with Playwright.

In the world of test automation, the demand for efficiency has never been higher. Writing and maintaining test scripts can be time-consuming, yet comprehensive tests are crucial for product quality. Enter Step Zero AI in Playwright — a revolutionary approach to automation that simplifies the process by generating tests without manual scripting. In this article, we’ll explore what Step Zero AI automation means, how Playwright incorporates it with ai() from @zerostep/playwright, and how it addresses common challenges faced in traditional test automation workflows.

What is Step Zero AI Automation?

Step Zero AI automation uses artificial intelligence to automatically generate test steps based on user actions or natural language instructions. This innovation allows testers to skip the initial scripting phase (“Step Zero”) and go straight into testing, as AI interprets high-level actions and translates them into executable steps.

The result? Faster, more accessible test automation with less coding required from the start.

How Playwright Integrates Step Zero AI

ZeroStep’s ai() function unlocks the power of GPT3.5 and GPT4 to make Playwright tests simpler and more resilient to change.

• Intent-Based Test Generation: ai() interprets natural language inputs and automatically translates them into actionable test code.
• Plain English Commands: Testers can describe actions in simple English, such as “Log in” or “Submit the form,” without writing complex JavaScript, allowing them to focus on business scenarios rather than technical details.
• Simplified Syntax: By reducing tests to high-level commands, ai() significantly cuts down on the need for detailed scripting, making tests easier to maintain and execute.

Challenges of Traditional Playwright Automation and How ai() Addresses Them

While Playwright is a powerful tool, traditional automation with it has few area of improvements. Here’s how Step Zero AI in Playwright overcomes these challenges.

Complexity in Writing Detailed Scripts

Traditional Playwright automation requires detailed scripts for user workflows, which can be time-consuming and complex, especially for testers who has less coding experience.

Example (Traditional Playwright Code)

For instance, logging in and navigating to a user profile requires specifying each action individually:

const { test, expect } = require('@playwright/test');

test('Login and go to user profile', async ({ page }) => {
  await page.goto('https://example.com');
  await page.click('#loginButton');
  await page.fill('#username', 'testUser');
  await page.fill('#password', 'securePassword');
  await page.click('#submitLogin');
  await page.click('#profileMenu');
  await page.click('#userProfile');
  await expect(page).toHaveURL('https://example.com/user/testUser');
});

Solution Using ai()

With ai() from @zerostep/playwright, you can replace the detailed steps with natural language instructions:

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

test('Login and navigate to user profile', async ({ page }) => {
  await page.goto('https://example.com');
  await ai('Log in with username testUser and password securePassword', { page, test });
  await ai('Navigate to the user profile', { page, test });
});

Benefit: This approach allows testers to describe actions in plain English, making testing accessible even for non-technical users and significantly speeding up test creation.

Maintenance Overhead with UI Changes

Traditional Playwright scripts are sensitive to UI changes — if an element ID changes, tests may break, leading to high maintenance overhead.

Example (Traditional Playwright Code)

If the ID changes to #nextButtonId, you need to update this line in your tests.

await page.click('#nextButtonId');

Solution Using ai()

With ai(), tests are generated based on intent rather than specific selectors, allowing the AI to adapt to minor UI structure changes without requiring updates:

await ai('Click the next button to proceed to the next step', { page, test });

Benefit: By focusing on actions (e.g., “click the button”) rather than specific element IDs, ai() reduces the need for frequent updates due to minor UI changes.

Requirement for Detailed Knowledge of Selectors

In traditional automation, testers need to target specific elements using CSS selectors, XPath, or other identifiers, which can be a barrier for non-technical users.

Example (Traditional Playwright Code)

await page.click('#searchButton');
await page.fill('input[name="query"]', 'Playwright AI');
await page.click('button[type="submit"]');

Solution Using ai()

With ai(), natural language replaces specific selectors, making it easier for testers without extensive technical knowledge:

await ai('Click on the search button', { page, test });
await ai('Enter "Playwright AI" in the search bar', { page, test });
await ai('Submit the search', { page, test });

Benefit: By removing the need for exact selectors, ai() enables broader participation in test automation without the technical overhead.

Tedious Manual Entry of Form Data

In traditional Playwright, every input field in a form must be filled out individually with values, which is tedious and error-prone.

await page.fill('#name', 'John Doe');
await page.fill('#email', 'johndoe@example.com');
await page.fill('#phone', '123-456-7890');

Solution Using ai()

With ai(), you can specify the intent to fill the form with realistic values, and the AI will handle the details:

await ai('Fill out the form with realistic values', { page, test });

Benefit: By generating form data automatically, ai() saves time and ensures realistic values are filled without manual intervention.

Limited Reusability of Code

Traditional Playwright scripts require duplicated code or complex parameterization for reusability across different scenarios.

async function login(page, username, password) {
  await page.goto('https://example.com/login');
  await page.fill('#username', username);
  await page.fill('#password', password);
  await page.click('#loginButton');
}

Solution Using ai()

With ai(), common actions like "log in" can be stated directly in natural language and reused easily:

await ai('Log in with a valid user', { page, test });

Benefit: This high-level command can be reused, minimizing duplicate code and enhancing reusability.

Getting Started with ai() in Playwright

Here’s how to set up and start using Step Zero AI in Playwright:

Install @zerostep/playwright: Ensure you have the package to access ai().

npm i @zerostep/playwright -D

Import and Use ai() in Your Script:

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

test('Sample test using ai()', async ({ page }) => {
  await page.goto('https://example.com');
  await ai('Log in with username testUser and password securePassword', { page, test });
  await ai('Navigate to the user profile', { page, test });
});

Run the Test: Run your Playwright test as usual.

npx playwright test

Conclusion

Traditional Playwright automation is powerful but often requires deep technical skills and frequent updates. With Step Zero AI, ai() transforms test automation, making it intuitive and adaptable. By enabling testers to use simple English commands without coding knowledge, ai() allows them to focus on testing business scenarios instead of the technicalities of writing scripts.

With Step Zero AI, testing shifts from a purely technical task to a streamlined process. This article offers a glimpse into the potential of Step Zero AI with Playwright, showcasing how it simplifies and enhances test automation by letting AI handle repetitive tasks and script maintenance. In the next article, we’ll dive deeper into ZeroStep AI, exploring its application in real-time scenarios and demonstrating how it can further streamline and optimize testing processes.

Try ai() today and experience how it’s shaping the future of test automation!