8000 GitHub - agamm/auto-playwright: Automating Playwright steps using ChatGPT.
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

agamm/auto-playwright

BranchesTags
 
 

Repository files navigation

Auto Playwright

Run Playwright tests using AI.

Setup

  1. Install auto-playwright dependency:
$ npm install auto-playwright -D
  1. This package relies on talking with OpenAI (https://openai.com/). You must export the API token:
$ export export OPENAI_API_KEY='sk-..."
  1. Import and use the 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);
});

Usage

At minimum, the auto function requires a plain text prompt and an argument that contains your page and test objects.

auto("<your prompt>", { page, test });

Debug

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

Supported Browsers

Every browser that Playwright supports.

Additional Options

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",
};

auto("<your prompt>", { page, test }, options);

Supported Actions & Return Values

Depending on the type of action (inferred by the auto function), there are different behaviors and return types.

Action

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");
}

Query

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);

Assert

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`);

Why use Auto Playwright?

Certainly! Here's a rephrased version of the provided content, presented in a markdown table:

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.

Supported Playwright Actions

  • 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.

Pricing