Run Playwright tests using AI.
auto-playwright
dependency:npm install auto-playwright -D
.env
file:export OPENAI_API_KEY='sk-..."
auto
function:import { test, expect } from "@playwright/test";
import { auto } from "auto-playwright";
test("auto Playwright example", async ({ page }) => {
await page.goto("/");
// `auto` can query data
// In this case, the result is plain-text contents of the header
const headerText = await auto("get the header text", { page, test });
// `auto` can perform actions
// In this case, auto will find and fill in the search text input
await auto(`Type "${headerText}" in the search box`, { page, test });
// `auto` can assert the state of the website
// In this case, the result is a boolean outcome
const searchInputHasHeaderText = await auto(`Is the contents of the search box equal to "${headerText}"?`, { page, test });
expect(searchInputHasHeaderText).toBe(true);
});
Include the StepOptions type with the values needed for connecting to Azure OpenAI.
import { test, expect } from "@playwright/test";
import { auto } from "auto-playwright";
import { StepOptions } from "../src/types";
const apiKey = "apikey";
const resource = "azure-resource-name";
const model = "model-deployment-name";
const options: StepOptions = {
model: model,
openaiApiKey: apiKey,
openaiBaseUrl: `https://${resource}.openai.azure.com/openai/deployments/${model}`,
openaiDefaultQuery: { 'api-version': "2023-07-01-preview" },
openaiDefaultHeaders: { 'api-key': apiKey }
};
test("auto Playwright example", async ({ page }) => {
await page.goto("/");
// `auto` can query data
// In this case, the result is plain-text contents of the header
const headerText = await auto("get the header text", { page, test }, options);
// `auto` can perform actions
// In this case, auto will find and fill in the search text input
await auto(`Type "${headerText}" in the search box`, { page, test }, options);
// `auto` can assert the state of the website
// In this case, the result is a boolean outcome
const searchInputHasHeaderText = await auto(`Is the contents of the search box equal to "${headerText}"?`, { page, test }, options);
expect(searchInputHasHeaderText).toBe(true);
});
At minimum, the auto
function requires a plain text prompt and an argument that contains your page
and test
(optional) objects.
auto("<your prompt>", { page, test });
Running without the test
parameter:
import { chromium } from "playwright";
import { auto } from "auto-playwright";
(async () => {
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext();
const page = await context.newPage();
// Navigate to a website
await page.goto("https://www.example.com");
// `auto` can query data
// In this case, the result is plain-text contents of the header
const res = await auto("get the header text", { page });
// use res.query to get a query result.
console.log(res);
await page.close();
})();
You may pass a debug
attribute as the third parameter to the auto
function. This will print the prompt and the commands executed by OpenAI.
await auto("get the header text", { page, test }, { debug: true });
You may also set environment variable AUTO_PLAYWRIGHT_DEBUG=true
, which will enable debugging for all auto
calls.
export AUTO_PLAYWRIGHT_DEBUG=true
Every browser that Playwright supports.
There are additional options you can pass as a third argument:
const options = {
// If true, debugging information is printed in the console.
debug: boolean,
// The OpenAI model (https://platform.openai.com/docs/models/overview)
model: "gpt-4-1106-preview",
// The OpenAI API key
openaiApiKey: 'sk-...',
};
auto("<your prompt>", { page, test }, options);
Depending on the type
of action (inferred by the auto
function), there are different behaviors and return types.
An action (e.g. "click") is some simulated user interaction with the page, e.g. a click on a link. Actions will return `undefined`` if they were successful and will throw an error if they failed, e.g.
try {
await auto("click the link", { page, test });
} catch (e) {
console.error("failed to click the link");
}
A query will return requested data from the page as a string, e.g.
const linkText = await auto("Get the text of the first link", { page, test });
console.log("The link text is", linkText);
An assertion is a question that will return true
or false
, e.g.
const thereAreThreeLinks = await auto("Are there 3 links on the page?", {
page,
test,
});
console.log(`"There are 3 links" is a ${thereAreThreeLinks} statement`);
Aspect | Conventional Approach | Testing with Auto Playwright |
---|---|---|
Coupling with Markup | Strongly linked to the application's markup. | Eliminates the use of selectors; actions are determined by the AI assistant at runtime. |
Speed of Implementation | Slower implementation due to the need for precise code translation for each action. | Rapid test creation using simple, plain text instructions for actions and assertions. |
Handling Complex Scenarios | Automating complex scenarios is challenging and prone to frequent failures. | Facilitates testing of complex scenarios by focusing on the intended test outcomes. |
Test Writing Timing | Can only write tests after the complete development of the functionality. | Enables a Test-Driven Development (TDD) approach, allowing test writing concurrent with or before functionality development. |
locator.blur
locator.boundingBox
locator.check
locator.clear
locator.click
locator.count
locator.fill
locator.getAttribute
locator.innerHTML
locator.innerText
locator.inputValue
locator.isChecked
locator.isEditable
locator.isEnabled
locator.isVisible
locator.textContent
locator.uncheck
page.goto
Adding new actions is easy: just update the functions
in src/completeTask.ts
.
This library is free. However, there are costs associated with using OpenAI. You can find more information about pricing here: https://openai.com/pricing/.
Learn in depth subjects about end-to-end testing.
Ask ChatGPT Playwright questions.
All-in-one toolbox for QA engineers.
Handpicked QA and Automation opportunities.
Ask AI answered questions about Playwright.
Archive of Discord Forum posts about Playwright.
Tutorials, conference talks, and release videos.
GUI for generating Playwright locators.
Definitions of common end-to-end testing terms.
Use ⌘ + k + "Tools" to quickly access all tools.
The auto
function uses sanitize-html to sanitize the HTML of the page before sending it to OpenAI. This is done to reduce cost and improve the quality of the generated text.
This project draws its inspiration from ZeroStep. ZeroStep offers a similar API but with a more robust implementation through its proprietary backend. Auto Playwright was created with the aim of exploring the underlying technology of ZeroStep and establishing a basis for an open-source version of their software. For production environments, I suggest opting for ZeroStep.
Here's a side-by-side comparison of Auto Playwright and ZeroStep:
Criteria | Auto Playwright | ZeroStep |
---|---|---|
Uses OpenAI API | Yes | No[^3] |
Uses plain-text prompts | Yes | No |
Uses functions SDK |
Yes | No |
Uses HTML sanitization | Yes | No |
Uses Playwright API | Yes | No[^4] |
Uses screenshots | No | Yes |
Uses queue | No | Yes |
Uses WebSockets | No | Yes |
Snapshots | HTML | DOM |
Implements parallelism | No | Yes |
Allows scrolling | No | Yes |
Provides fixtures | No | Yes |
License | MIT | MIT |
[^3]: Uses ZeroStep proprietary API. [^4]: Uses some Playwright API, but predominantly relies on Chrome DevTools Protocol (CDP).