Export Playwright Code

Export your no-code tests as Playwright TypeScript code for use in your own test suite or CI/CD pipeline.

Stably no-code tests can be exported as standard Playwright TypeScript code, allowing you to transition from cloud-based no-code testing to self-hosted Playwright execution while preserving all test logic and AI capabilities through the Stably SDK.

Why export to Playwright code

Exporting no-code tests to Playwright code is useful when you:

• Want to run tests in your own CI/CD infrastructure instead of Stably’s cloud
• Need to customize test logic beyond what the no-code editor provides
• Prefer managing tests as code alongside your application codebase
• Want to integrate with existing Playwright test suites
• Need to use Playwright features not available in the no-code editor

Exported tests use the Stably SDK to maintain AI-powered capabilities like AI assertions, AI actions, and auto-heal. The SDK is 100% compatible with standard Playwright.

Prerequisites

• At least one saved test in the no-code editor
• Access to the test detail view in the Stably dashboard

Export a test

1. Navigate to the test

   Open the Stably dashboard and navigate to the test you want to export. Click on the test name to open the test detail view.

2. Switch to Code View

   In the test detail view, locate the view toggle in the top-right corner. Click Code view to switch from the visual editor to the generated Playwright code.

3. Copy the code

   The code view displays the complete Playwright TypeScript implementation of your test. Click the Copy button in the top-right corner of the code panel to copy the entire test to your clipboard.

Using the exported code

Once you’ve copied the test code, integrate it into your Playwright project:

1. Set up Stably SDK

If you haven’t already, install the Stably SDK in your project:

npm install @stably.ai/playwright-test

See the complete SDK Setup Guide for detailed installation instructions.

2. Create a test file

Create a new test file in your Playwright tests directory:

tests/exported-test.spec.ts

import { test, expect } from '@stably.ai/playwright-test';

// Paste your exported test code here
test('Your test name', async ({ page }) => {
  // Test steps from exported code
});

3. Export environment variables

If your test uses environment variables or test data, export them from the Stably dashboard:

1. Navigate to Test Data in the Stably dashboard
2. Copy the environment variables used by your test
3. Add them to your local .env file or CI/CD configuration

See the Test Data configuration guide for details on managing environment variables.

4. Run the test locally

Execute the exported test using standard Playwright commands:

npx playwright test tests/exported-test.spec.ts

The test runs with all the same AI capabilities it had in the no-code editor—AI assertions, AI actions, and auto-heal continue to work through the Stably SDK.

What gets exported

The code view generates clean, readable Playwright TypeScript that includes:

• Standard Playwright actions: page.goto(), page.click(), page.fill(), etc.
• Stably SDK AI features: test.aiAssert(), test.aiExecute() for AI-powered steps
• Variables: Converted to TypeScript variables with proper scoping
• Custom code blocks: Inline JavaScript preserved as-is
• Assertions: Both standard Playwright assertions and AI assertions
• Wait conditions: Explicit waits and navigation handling

Example exported test

import { test, expect } from '@stably.ai/playwright-test';

test('Login flow with AI validation', async ({ page, test }) => {
  // Navigate to login page
  await page.goto('https://app.example.com/login');
  
  // Fill login form
  await page.fill('[name="email"]', '[e-mail]');
  await page.fill('[name="password"]', 'securePassword123');
  
  // Submit form
  await page.click('button[type="submit"]');
  
  // AI assertion to validate dashboard loaded correctly
  await test.aiAssert(page, 
    'The dashboard displays user profile information and recent activity');
  
  // Standard assertion
  await expect(page).toHaveURL(/.*dashboard/);
});

Editing exported code

Exported code is fully editable standard Playwright TypeScript. You can:

• Refactor test logic and extract helper functions
• Add additional assertions or validation logic
• Parameterize test data using Playwright fixtures
• Combine multiple exported tests into test suites
• Add custom setup and teardown logic
• Integrate with existing Playwright configuration

Keep the Stably SDK import (@stably.ai/playwright-test) to maintain AI capabilities. If you remove the SDK, replace AI-powered steps with standard Playwright code.

Maintaining tests after export

Once you export a test to code, changes made in the no-code editor will not automatically sync to your code version. Consider these workflows:

Option 1: Develop in no-code, export when stable

Use the no-code editor for rapid test development and debugging, then export the final version to your codebase when the test is stable. This approach works well for:

• Prototyping new test scenarios quickly
• Teams with mixed technical backgrounds
• Tests that require frequent visual debugging

Option 2: Export early, maintain in code

Export tests to code early in development and maintain them as TypeScript from that point forward. This approach works well for:

• Teams comfortable with code-first workflows
• Tests requiring complex custom logic
• Integration with existing Playwright test infrastructure

Option 3: Hybrid approach

Maintain some tests in the no-code editor (for non-technical team members or rapid iteration) and others in code (for complex scenarios or integration with your codebase).

Comparison: No-code vs SDK

Feature	No-code Tests	Exported Playwright Code
Execution location	Stably cloud only	Your infrastructure or Stably cloud
AI capabilities	✅ Full support	✅ Full support via SDK
Visual editor	✅ Available	❌ Not available
Version control	Stably dashboard	Your Git repository
Customization	Limited to editor features	Full Playwright + TypeScript
CI/CD integration	GitHub Actions, API	Any CI/CD platform
Team collaboration	Dashboard-based	Code review workflows

Next steps

Stably SDK Guide

Learn about all SDK features and capabilities

SDK Setup

Complete installation and configuration instructions

Run Tests Locally

Execute SDK tests on your local machine

GitHub Actions

Set up CI/CD for SDK tests