Stably
Code. Ship. Test.
Documentation ยท
Homepage
# Stably Playwright Test
This package extends Playwright to add new AI functionality.
To get started quickly, please see [AI-assisted setup guide](https://docs.stably.ai/getting-started/sdk-setup-guide). Otherwise continue to read below.
## Installation
We assume you already have Playwright installed. If so you can run:
```shell
npm install @stablyai/playwright-test
```
## SDK
### Setup
Make sure you also get your [api-key](https://auth.stably.ai/account/api_keys) to use the AI features.
Either set the `STABLY_API_KEY` environment variable or programtically call `setApiKey` from `"@stablyai/playwright-test"`
### Usage
1. Replace "@playwright/test" with "@stablyai/playwright-test"
1. Ex: imports should look like: import { test, expect } from "@stablyai/playwright-test";
2. Simply run tests with `npx playwright test` as you would normally using Playwright
### New Methods
The SDK adds new methods with AI visual assertions, full agent mode, and text extraction. See our [docs](https://docs.stably.ai/stably-sdk/ai-assertions) for more information.
It also includes Google auth bootstrap for test contexts:
```typescript
import { test } from "@stablyai/playwright-test";
test("authenticated flow", async ({ context, page }) => {
await context.authWithGoogle({
email: "qa@example.com",
password: process.env.GOOGLE_TEST_PASSWORD!,
otpSecret: process.env.GOOGLE_TEST_OTP_SECRET!,
});
// Need help obtaining the Google OTP secret?
// https://docs.stably.ai/stably2/auth/google-otp-secret-helper
await page.goto("https://myaccount.google.com");
});
```
## Stably Playwright Reporter
The [Stably Playwright Reporter](https://docs.stably.ai/reports-analytics#reports-and-analytics) also comes bundled with this package. Most users will find value in using this reporter for recording test results and having AI diagnostics.
### Setup
First, ensure you have your `STABLY_API_KEY` (secret). If you don't have it, you can get it [here](https://auth.stably.ai/account/api_keys).
Second, ensure that you have your Stably project ID (not a secret). You can get this from your web-app dashboard under settings
In your `playwright.config.ts/js` file add:
```typescript
import { defineConfig } from '@playwright/test';
import { stablyReporter } from '@stablyai/playwright-test';
export default defineConfig({
..., // your other config options go here
reporter: [
..., // (optional) other reporters go here
stablyReporter({ apiKey: process.env.STABLY_API_KEY, projectId: 'abc123' }), // ๐ Stably Reporter
]
})
```