Enhancing Microsoft Playwright Tests Automation With The Power of AI
In the fast-paced world of software development,End-to-end (E2E) testing plays a critical role in the rapidly evolving software development landscape. It verifies that applications function correctly under real-world conditions. Conventional E2E testing methods often require complex coding and are sensitive to minor application changes. ZeroStep is an innovative tool that integrates AI (Artificial Intelligence) technology with Playwright tests to address these challenges.
ZeroStep streamlines the testing process, making it more efficient and robust against UI modifications. It utilizes GPT3.5 and GPT4 to enable testers to create automated tests using simple text instructions. This approach eliminates the need for CSS selectors or XPath locators, resulting in faster testing and improved resilience to changes.
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 usingnpm init playwright@latest
Install ZeroStep
Run the below command to install ZeroStepnpm 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 example1.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(‘[email protected]’);
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(‘[email protected]’);
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 [email protected]’, { 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:
- Imports:
import { test, expect } from '@playwright/test': Imports test functions from Playwright’s testing framework.import { ai } from '@zerostep/playwright': Imports a custom functionaifrom ZeroSteps library, presumably for performing AI-driven automation tasks.
2. Test Steps:
await page.goto('...'): Navigates the browser page to the specified URLawait ai('Enter E-Mail Address...', { page, test }): Uses theaifunction 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: Prone to occasional flakiness and inconsistent test results, especially compared to traditional automation methods using 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: Automated tools like ZeroStep may struggle with dynamic user interfaces that frequently change or contain elements with variable attributes.
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.
