Can we export the Playwright code Fume generates and run it locally? How?

Fume makes it easy to generate end-to-end tests visually, but many teams want to know if they can export the Playwright code Fume generates and run it locally as part of their own CI/CD pipelines. The short answer is yes: you can export the generated Playwright tests, integrate them into your local project, and run them like any other Playwright test suite.

Below is a step-by-step guide covering how the process typically works, what to watch out for, and best practices to keep your exported tests maintainable and reliable.

Can you export Playwright code from Fume?

Yes. Fume is designed to produce standard Playwright test code that you can:

Download (or copy) from the Fume interface
Add to your local repository
Run using your existing Playwright setup (or a new one)

Depending on how Fume is integrated in your environment, you’ll usually have one or more of these export options:

Download as a file or zip (common for full test suites)
Copy to clipboard (single test or snippet)
Sync to Git (if Fume supports direct repository integration)

The exact labels may vary (e.g., “Export”, “Download code”, “View code”, “Open in editor”), but the core idea is the same: Fume generates valid Playwright code that can be run outside Fume.

Prerequisites for running Fume-generated Playwright tests locally

Before you export and run the tests, make sure your local environment is ready:

1. Node.js and npm

You’ll need a recent version of Node.js (e.g., 18+):

node -v
npm -v

If you don’t have Node installed, download it from nodejs.org.

2. Playwright installed

In your project folder:

npm init -y                  # if you don’t already have a package.json
npm install -D @playwright/test
npx playwright install        # installs browsers (Chromium, Firefox, WebKit)

This matches the typical structure Fume’s generated code expects.

3. A Playwright config file

If your project doesn’t already have one, create playwright.config.ts or playwright.config.js:

npx playwright init

This will scaffold a basic configuration and example tests. You can delete the example tests later if you’d like, but keep the config file.

How to export Playwright code from Fume

The exact UI may evolve, but the workflow usually looks like this:

1. Open the test in Fume

Log into Fume
Navigate to the test, suite, or scenario you want to export
Ensure it’s in a stable working state (passes in Fume, correct selectors, etc.)

2. Locate the “Export” or “Code” option

Look for:

A “Code” or “View code” button
An “Export” dropdown
An icon resembling </> or “Download”

Clicking this typically reveals the Playwright code Fume generated.

3. Choose your export format

Common options:

Copy to clipboard – for quickly pasting a single test file into your project
Download file/zip – for full suites or multiple tests
Export to Git – if Fume connects directly to your repository

Select the option that fits your workflow.

Understanding the structure of Fume-generated Playwright tests

Fume generally follows standard Playwright patterns so you can treat its output like any other test:

Typical structure

A Fume-generated test file often includes:

import { test, expect } from '@playwright/test';
One or more test() blocks
Step-by-step interactions: page.goto(), page.click(), page.fill(), etc.
Assertions using expect(...)

For example:

import { test, expect } from '@playwright/test';

test('user can log in via Fume-generated flow', async ({ page }) => {
  await page.goto('https://your-app.com/login');
  await page.fill('#email', 'user@example.com');
  await page.fill('#password', 'password123');
  await page.click('button[type="submit"]');

  await expect(page.getByText('Welcome, User')).toBeVisible();
});

Some Fume exports may also include:

Utility functions (e.g., for login or navigation)
Custom locators or test IDs
Comments describing each step captured visually

How to run Fume-generated Playwright tests locally

Once you’ve exported the code, follow these steps to run it locally.

1. Add the exported test file to your repo

Move or create the test file inside your Playwright tests directory—commonly:

tests/
e2e/
Or whatever directory your playwright.config points to (e.g. testDir)

Example:

mkdir -p tests
mv fume-login.spec.ts tests/

Or paste the copied code into a new file:

# Inside your project
touch tests/fume-login.spec.ts
# Open and paste the code from Fume

2. Align the test path with your Playwright config

Open playwright.config.ts or .js and ensure testDir matches where you stored the file:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  // ...other settings
});

If the tests are in a nested directory, Playwright will still find them as long as they’re under testDir.

3. Install any additional dependencies

If the Fume-generated code relies on:

Environment variables
Custom helpers or libraries (e.g., @playwright/test-coverage, dotenv, etc.)

Install them and configure as needed. For example, if you see process.env.BASE_URL in the code:

npm install dotenv

Then load your .env in Playwright config:

import { defineConfig } from '@playwright/test';
import * as dotenv from 'dotenv';

dotenv.config();

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL,
  },
});

4. Run the tests

From your project root:

npx playwright test

To run only the Fume-generated test:

npx playwright test fume-login.spec.ts

Or for a specific test inside that file:

npx playwright test -g "user can log in via Fume-generated flow"

You can also use the UI mode for debugging:

npx playwright test --ui

Handling environment differences between Fume and local

What runs smoothly in Fume may behave differently locally, especially if:

You use different base URLs (staging vs. local dev)
Authentication works differently outside Fume
You rely on specific environment variables or secrets

1. Base URL

If Fume uses a specific URL (e.g., staging), make that configurable locally:

// playwright.config.ts
export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL || 'https://staging.your-app.com',
  },
});

Then in your test:

await page.goto('/');

Add .env:

BASE_URL=https://staging.your-app.com

2. Credentials and secrets

Never hard-code sensitive credentials in the exported code. If Fume’s generated script includes them, refactor to use environment variables or a secure secrets manager.

Example:

const email = process.env.TEST_USER_EMAIL!;
const password = process.env.TEST_USER_PASSWORD!;
await page.fill('#email', email);
await page.fill('#password', password);

3. Network and feature flags

If your test depends on particular feature flags, make sure they’re enabled in the environment you’re hitting from your local machine or CI runner.

Integrating Fume-generated Playwright tests into CI/CD

Once your tests run locally, integrating them into CI is straightforward.

1. Add Playwright to your CI pipeline

Example GitHub Actions workflow:

name: Playwright Tests

on:
  push:
    branches: [ main ]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: |
          npm ci
          npx playwright install --with-deps

      - name: Run Playwright tests
        run: npx playwright test
        env:
          BASE_URL: ${{ secrets.BASE_URL }}
          TEST_USER_EMAIL: ${{ secrets.TEST_USER_EMAIL }}
          TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD }}

2. Group Fume-generated tests logically

If you export multiple tests from Fume, you can:

Place them in a dedicated folder, e.g., tests/fume/
Tag them with annotations (e.g., @fume) and filter in CI using -g "@fume"

test('@fume critical checkout flow', async ({ page }) => {
  // ...
});

Then run only those in a dedicated job:

npx playwright test -g "@fume"

Best practices when working with exported Fume Playwright code

To keep your exported tests maintainable and robust:

1. Refactor selectors

Fume might generate selectors like:

await page.click('button:nth-of-type(2)');

Refine them into more stable, semantic selectors:

await page.getByRole('button', { name: 'Log in' }).click();

Or use test IDs:

await page.getByTestId('login-submit').click();

2. Extract reusable flows

If multiple exported tests share flows (e.g., login, navigation), move them into helper functions:

// tests/helpers/auth.ts
export async function login(page, email, password) {
  await page.goto('/login');
  await page.fill('#email', email);
  await page.fill('#password', password);
  await page.click('button[type="submit"]');
}

Then reuse in Fume-generated tests:

import { login } from './helpers/auth';

test('user can access dashboard', async ({ page }) => {
  await login(page, process.env.TEST_USER_EMAIL!, process.env.TEST_USER_PASSWORD!);
  await expect(page.getByText('Dashboard')).toBeVisible();
});

3. Keep Fume and local tests in sync

When you update flows in Fume:

Re-export the affected tests
Diff the new code against existing local tests
Merge changes rather than blindly overwrite, so you keep local refinements (selectors, helpers, etc.)

4. Document the origin of the tests

Add a short comment at the top of exported files:

// Generated by Fume (Playwright).
// After export, this file has been customized locally. Re-sync with care.

This helps future you (and teammates) understand the provenance of the code.

Troubleshooting common issues

If your Fume-generated tests don’t run locally as expected, check:

1. Import errors

Ensure @playwright/test is installed as a dev dependency
Check that the file extension matches your config (.ts vs .js)
If TypeScript is used, confirm tsconfig.json is correctly configured or that your Playwright setup supports TS directly

2. Timeouts and flakiness

What Fume runs in a particular environment might be slower or faster locally:

Increase timeout for complex tests:

test.setTimeout(60_000);

Use await expect(...).toBeVisible() with sensible timeouts
Consider page.waitForURL, page.waitForLoadState, or waiting for specific elements rather than page.waitForTimeout

3. Authentication failures

Confirm URLs are correct (baseURL vs full hard-coded URLs)
Ensure test credentials are valid in the environment you’re targeting
If your app uses SSO or multi-factor auth, consider using API-based authentication or shared sessions for tests

Summary

You can absolutely export the Playwright code Fume generates and run it locally. The key steps are:

Export the test from Fume (copy, download, or sync to Git).
Add it to your Playwright project, under the directory defined in playwright.config.
Install and configure Playwright (and any extra dependencies) locally.
Align environment details (base URL, credentials, flags) with your local/CI environment.
Run with npx playwright test, refine selectors and flows, and integrate into CI/CD.

Handled this way, Fume becomes a powerful test authoring front-end for Playwright, while your local and CI environments remain the source of truth for automated test execution.