testdriverai 6.0.30-canary.ff65ed2.0 → 6.0.31-canary.b5e0ecb.0

package/docs/getting-started/playwright.mdx

@@ -1,8 +1,8 @@
 ---
-title: Get Started with TestDriver & Playwright
-sidebarTitle: Playwright
-tag: NEW
-description: In this guide, you'll setup your TestDriver account, create a new Playwright project, and leverage TestDriver's AI to convert tests to natural language.
+title: "Get Started with TestDriver & Playwright"
+sidebarTitle: "Playwright"
+tag: "NEW"
+description: "In this guide, you'll setup your TestDriver account, create a new Playwright project, and leverage TestDriver's AI to convert tests to natural language."
 icon: "masks-theater"
 ---
 
@@ -15,21 +15,25 @@ icon: "masks-theater"
 - [Perform actions](#performing-actions-with-testdriver-act) with a prompt
 - Test with an [automated agent](#agentic-tests-with-test-agent)
 
-We'll be incrementally converting Playwright's example test from imperactive code:
+We'll be incrementally converting Playwright's example test from the sample code:
 
-```typescript icon="square-js" title="tests/example.spec.ts"
+```typescript tests/example.spec.ts icon=square-js
 // Before
-test("get started link", async ({ page, testdriver }) => {
+test("get started link", async ({ page }) => {
   await page.goto("https://playwright.dev/");
-  await testdriver(page).act("Click the 'Get started' link");
-  await expect(page).toMatchPrompt("'Installation' heading is visible");
+  await page.getByRole("link", { name: "Get started" }).click();
+  await expect(
+    page.getByRole("heading", { name: "Installation" }),
+  ).toBeVisible();
 });
 ```
 
-To using natural language:
+To using natural language with TestDriver:
 
-```typescript icon="square-js" title="tests/example.spec.ts"
+```typescript tests/example.spec.ts icon=square-js
 // After
+import { test } from "@testdriver.ai/playwright";
+
 test.describe("get started link", () => {
   test.beforeEach(async ({ page }) => page.goto("https://playwright.dev/"));
   test.agent(`
@@ -43,21 +47,12 @@ test.describe("get started link", () => {
 
 <Steps>
   <Step title="Create a TestDriver Account">
-    You will need a [TestDriver Pro](https://app.testdriver.ai/team) account ($20/month) to get an API key.
-
-    <Card
-      title="Sign Up for TestDriver"
-      icon="user-plus"
-      href="https://app.testdriver.ai/team"
-      arrow
-      horizontal
-    />
-
+    You will need a [TestDriver Pro](https://app.testdriver.ai/team) account (\$20/month) to get an API key.
+    <Card title="Sign Up for TestDriver" icon="user-plus" horizontal href="https://app.testdriver.ai/team" />
   </Step>
   <Step title="Set up your environment">
-      
     Copy your API key from [the TestDriver dashboard](https://app.testdriver.ai/team), and set it as an environment variable.
-    
+
     <Tabs>
       <Tab title="macOS / Linux">
         ```bash Export an environment variable on macOS or Linux systems
@@ -65,11 +60,12 @@ test.describe("get started link", () => {
         ```
       </Tab>
       <Tab title="Windows">
-      ```powershell Export an environment variable in PowerShell
-      setx TD_API_KEY "your_api_key_here"
-      ```
+        ```powershell Export an environment variable in PowerShell
+        setx TD_API_KEY "your_api_key_here"
+        ```
       </Tab>
     </Tabs>
+
   </Step>
 </Steps>
 
@@ -77,14 +73,12 @@ test.describe("get started link", () => {
 
 <Steps>
   <Step title="Initialize Playwright">
-
     <Info>
       This is a condensed version of [Playwright's Installation Instructions](https://playwright.dev/docs/intro).
 
       **If you're new to Playwright, you should follow their guide first.**
     </Info>
-
-    In an new folder or existing run:
+    In a new folder or an existing, run:
 
     <Tabs>
       <Tab title="npm">
@@ -103,7 +97,6 @@ test.describe("get started link", () => {
         ```
       </Tab>
     </Tabs>
-
     Select the following options when prompted:
 
     ```console
@@ -143,9 +136,7 @@ test.describe("get started link", () => {
 ## Setup `@testdriver.ai/playwright`
 
 <Steps>
-
   <Step title="Install TestDriver">
-
     `@testdriver.ai/playwright` as a backwards-compatible wrapper around `@playwright/test`:
 
     <Tabs>
@@ -167,9 +158,7 @@ test.describe("get started link", () => {
     </Tabs>
 
   </Step>
-
   <Step title="Run Playwright">
-
     Before we start using TestDriver in our tests, run Playwright in [UI Mode](https://playwright.dev/docs/test-ui-mode):
 
     <Tabs>
@@ -189,22 +178,19 @@ test.describe("get started link", () => {
         ```
       </Tab>
     </Tabs>
-
     ![Playwright UI Mode](https://playwright.dev/assets/ideal-img/ui-mode.4e54d6b.3598.png)
 
     Clicking the ▶️ button should successfully run the tests in the UI,
     just as they did before with `playwright test` in the CLI.
 
   </Step>
-
   <Step title="Import TestDriver">
-
     For the sake of simplicity, we'll be working with one test file for now.
 
     Open `tests/example.spec.ts` in your editor & rename the `@playwright/test`
     import to `@testdriver.ai/playwright`:
 
-    ```typescript icon="square-js" title="tests/example.spec.ts"
+    ```typescript tests/example.spec.ts icon=square-js
     import { test, expect } from '@playwright/test'; // [!code --]
     import { test, expect } from '@testdriver.ai/playwright'; // [!code ++]
     ```
@@ -216,7 +202,6 @@ test.describe("get started link", () => {
     </Tip>
 
   </Step>
-
 </Steps>
 
 ## Usage
@@ -231,7 +216,7 @@ or even having an [agent](#agentic-tests-with-test-agent) test for you!
 
 Replace `toBeVisible` with `toMatchPrompt` to assert that the element is visible on the screen:
 
-```typescript icon="square-js" title="tests/example.spec.ts"
+```typescript tests/example.spec.ts icon=square-js
 // [!code --:2]
 // Expects page to have a heading with the name of Installation.
 await expect(page.getByRole("heading", { name: "Installation" })).toBeVisible();
@@ -255,7 +240,7 @@ TestDriver can replace `data-testid`s, `getByRole`, and CSS selectors with natur
 
 First, update your test to get access to the `testdriver` fixture:
 
-```typescript icon="square-js" title="tests/example.spec.ts"
+```typescript tests/example.spec.ts icon=square-js
 // [!code --]
 test('get started link', async ({ page, }) => {
 // [!code ++]
@@ -264,7 +249,7 @@ test('get started link', async ({ page, testdriver }) => {
 
 Then, replace `getByRole` with `testdriver.locate`:
 
-```typescript icon="square-js" title="tests/example.spec.ts"
+```typescript tests/example.spec.ts icon=square-js
 test('get started link', async ({ page, testdriver }) => {
   await page.goto('https://playwright.dev/');
 
@@ -283,7 +268,7 @@ Now, our test uses natural language to both describe & locate the element.
 <Tip>
   In the example above, you can still use Playwright to assert that the element is indeed a link for accessibility:
 
-```typescript icon="square-js" title="tests/example.spec.ts"
+```typescript tests/example.spec.ts icon=square-js
 const link = await testdriver(page).locate("Get started link");
 // [!code ++]
 expect(link).toHaveRole("link");
@@ -298,7 +283,7 @@ This way you can write user-centric tests _and_ validate the implementation.
 
 We can combine `locate` and `click` from the previous example into one line with `testdriver.act`:
 
-```typescript icon="square-js" title="tests/example.spec.ts"
+```typescript tests/example.spec.ts icon=square-js
 test("get started link", async ({ page, testdriver }) => {
   await page.goto("https://playwright.dev/");
 
@@ -318,7 +303,7 @@ Now the test uses the page the way a user would!
 
 TestDriver can automatically perform the entire test for you with an AI agent:
 
-```typescript icon="square-js" title="tests/example.spec.ts"
+```typescript tests/example.spec.ts icon=square-js
 // [!code --:6]
 test("get started link", async ({ page, testdriver }) => {
   await page.goto("https://playwright.dev/");
@@ -340,9 +325,7 @@ Instead of writing the test implementation, we've used [`test.describe`](https:/
 but replaced the `test` itself with `test.agent`.
 
 <Tip>
-  Use
-  [`test.beforEach`](https://playwright.dev/docs/api/class-test#test-after-each)
-  to prepare the page for the agent (e.g.
+  Use `test.beforeEach` to prepare the page for the agent (e.g.
   [`page.goto`](https://playwright.dev/docs/api/class-page#page-goto), calling
   an API to create a user). Use
   [`test.afterEach`](https://playwright.dev/docs/api/class-test#test-after-each)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testdriverai",
-  "version": "6.0.30-canary.ff65ed2.0",
+  "version": "6.0.31-canary.b5e0ecb.0",
   "description": "Next generation autonomous AI agent for end-to-end testing of web & desktop",
   "main": "index.js",
   "bin": {