Zerostep

https://github.com/zerostep-ai/zerostep
Admin
Supercharge your Playwright tests with AI
Tokens:1,767
Snippets:17
Trust Score:4.6
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Zerostep Playwright Dependency in Examples (Shell)

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Details the shell commands required to install the zerostep/playwright dependency within the examples directory. This step is necessary after building the local package to use it in the demo.

```shell
cd ../../examples/playwright-demo
npm install
```

--------------------------------

### Install Zerostep Playwright Dependency

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Install the zerostep playwright package as a development dependency using npm. This command ensures the package is available for use in your project's testing environment.

```sh
npm i @zerostep/playwright -D
```

--------------------------------

### Build Zerostep Playwright Package (Shell)

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Provides the shell commands necessary to build the local version of the zerostep/playwright package. This involves navigating to the package directory, installing dependencies, and running the build script.

```shell
cd packages/playwright
npm install
npm run build
```

--------------------------------

### Zerostep Playwright Fixture Setup

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Implement the Zerostep Playwright fixture to simplify `ai()` function calls within your tests. By extending the base Playwright test object, you can access the `ai` function directly without needing to pass `page` and `test` arguments repeatedly.

```typescript
// my-test.ts
import { test as base } from '@playwright/test'
import { aiFixture, type AiFixture } from '@zerostep/playwright'

export const test = base.extend<AiFixture>({
  ...aiFixture(base),
})
```

```typescript
// my-spec.ts
import { test } from './my-test.ts'

test('I can foo', async ({ ai }) => {
  await ai('click bar')
})
```

--------------------------------

### Basic Zerostep AI Function Usage in Playwright

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Integrate the `ai` function from the @zerostep/playwright package into your Playwright tests. This example demonstrates how to use `ai` to interact with web elements and perform actions based on natural language prompts. Ensure to pass the `page` and `test` objects to the `aiArgs`.

```typescript
import { test } from '@playwright/test'
import { ai } from '@zerostep/playwright'

test('zerostep example', async ({ page }) => {
  await page.goto('https://zerostep.com/')

  // An object with page and test must be passed into every call
  const aiArgs = { page, test }
  const headerText = await ai('Get the header text', aiArgs)
  await page.goto('https://google.com/')
  await ai(`Type "${headerText}" in the search box`, aiArgs)
  await ai('Press enter', aiArgs)
})
```

--------------------------------

### Run npm release script (Shell)

Source: https://github.com/zerostep-ai/zerostep/blob/main/packages/playwright/RELEASING.md

Executes the 'release' script defined in the package.json file, typically responsible for building the project and publishing it to the npm registry. This command automates the deployment process.

```shell
npm run release
```

--------------------------------

### Create and push Git tag for release (Shell)

Source: https://github.com/zerostep-ai/zerostep/blob/main/packages/playwright/RELEASING.md

Creates an annotated git tag for a new release version and pushes it to the remote repository. This is a crucial step for version control and release tracking.

```shell
git tag -a v[x.y.z] -m "Release x.y.z"
git push origin v[x.y.z]
```

--------------------------------

### Run Playwright Demo Tests (Shell)

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Shows the shell commands to execute the Playwright demo tests. These commands can be used to run tests in the default mode or with the UI mode enabled.

```shell
$ npm run test # or npm run test-ui
```

--------------------------------

### Push main branch to origin (Shell)

Source: https://github.com/zerostep-ai/zerostep/blob/main/packages/playwright/RELEASING.md

Pushes the local 'main' branch, including any new commits or tags, to the remote 'origin' repository. This makes the latest changes available to collaborators and CI/CD pipelines.

```shell
git push origin main
```

--------------------------------

### Configure Zerostep Token

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Configure your zerostep authentication token. This can be done by setting the ZEROSTEP_TOKEN environment variable or by creating a `zerostep.config.json` file in your project's root directory. The token is essential for authenticating with the zerostep service.

```sh
export ZEROSTEP_TOKEN="<your token here>"
```

```json
{
  "TOKEN": "<your token here>"
}
```

--------------------------------

### Perform an Action using AI and Handle Errors (TypeScript)

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Demonstrates how to use the `ai` function to perform a simulated user action like clicking a link. It includes a try-catch block to handle potential errors during the action execution. Actions return undefined on success and throw an error on failure.

```typescript
try {
  await ai('Click the link', { page, test })
} catch (e) {
  console.error('Failed to click the link')
}
```

--------------------------------

### Query Data using AI (TypeScript)

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Shows how to use the `ai` function to retrieve specific data from a web page, such as the text of the first link. The query action returns the requested data as a string. It assumes the existence of `page` and `test` objects.

```typescript
const linkText = await ai('Get the text of the first link', { page, test })
console.log('The link text is', linkText)
```

--------------------------------

### Update main branch with Git (Shell)

Source: https://github.com/zerostep-ai/zerostep/blob/main/packages/playwright/RELEASING.md

Fetches the latest changes from the remote 'main' branch and updates the local 'main' branch. This ensures the local repository is synchronized before further operations.

```shell
git checkout main && git pull
```

--------------------------------

### Zerostep AI Function Signature

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Understand the basic signature of the `ai` function. It accepts a prompt (string or array of strings) and an arguments object containing `page` and `test` Playwright objects. This function powers AI-driven interactions within your tests.

```typescript
ai('<your prompt>', { page, test })
```

--------------------------------

### Perform an Assertion using AI (TypeScript)

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Illustrates how to use the `ai` function to make an assertion about the content of a web page, such as checking if there are exactly three links. Assertion prompts return a boolean value (true or false).

```typescript
const thereAreThreeLinks = await ai('Are there 3 links on the page?', { page, test })
console.log(`"There are 3 links" is a ${thereAreThreeLinks} statement`)
```

--------------------------------

### Zerostep AI Function with Multiple Prompts

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Utilize the `ai` function to execute multiple prompts concurrently. Prompts are processed in chunks, with a default chunk size of 10. This feature allows for more efficient execution of sequential AI-driven steps.

```typescript
ai(['<prompt 1>', '<prompt 2>', '<prompt 3>'])

```

--------------------------------

### Zerostep AI Function with Additional Options

Source: https://github.com/zerostep-ai/zerostep/blob/main/README.md

Customize the behavior of the `ai` function using the optional `options` object. This object allows for advanced configurations such as enabling debugging, specifying the AI model, controlling scrolling behavior, adjusting parallelism for array prompts, and immediate failure on error.

```typescript
const options = {
  debug?: boolean,                      // If true, debugging information is returned from the ai() call.
  type?: 'action' | 'assert' | 'query', // Forces the ai step to be interpreted as the specified type.
  model?: 'GPT_3.5',                    // The ai model to use, only GPT_3.5 is supported
  disableScroll?: boolean,              // If true, the ai will not scroll out of view elements into view.
  parallelism?: number,                 // The number of prompts that will be run in a chunk, applies when passing an array of prompts to ai(). Defaults to 10.
  failImmediately?: boolean             // If true and an array of prompts was provided, the function will throw immediately if any prompt throws. Defaults to false.
}

ai('<your prompt>', { page, test }, options)
```
Tokens:
Raw