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

Fume makes it easy to prototype and iterate on browser automation with Playwright, but many teams eventually ask: can we export the Playwright code Fume generates and run it locally in our own environment? Yes—this is not only possible, it’s a recommended workflow once you’re ready to integrate your flows into CI, version control, or a broader test suite.

Below is a detailed guide on how to export Playwright code from Fume, set it up locally, and keep it maintainable over time.

---

Understanding how Fume generates Playwright code

Fume records or designs your browser flows and then translates them into Playwright scripts behind the scenes. Typically, Fume:

• Uses your chosen language (often TypeScript or JavaScript, sometimes Python)
• Wraps actions (clicks, inputs, navigations) into a Playwright test or script structure
• Includes locators, waits, and assertions based on what you configured in Fume
• Optionally adds helper functions or utilities to keep the script readable

Because this output is standard Playwright code, it can be exported and run like any other Playwright test.

---

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

Yes. In most setups, Fume supports:

1. Direct code export – Download or copy the generated Playwright script.
2. Project-level export – Export a ready-to-run Playwright project structure (tests, config, and dependencies).
3. API or CLI-based export (if available in your plan) – Fetch generated code through an API or CLI and sync it into your repo.

The exact UI wording may differ (for example “Export”, “Download code”, “Copy Playwright script”), but the end result is the same: you get a .ts, .js, or .py file that you can run locally.

---

How to export Playwright code from Fume

The exact steps depend on your Fume version and configuration, but a typical workflow looks like this:

1. Open your flow in Fume

   • Navigate to the flow, scenario, or test you want to export.
   • Make sure it runs successfully inside Fume first.

2. Locate the export or code view

   • Look for a button or tab like:
     • View Code
     • Export
     • Export Playwright
     • Download Script
   • Some versions show a code panel alongside your flow diagram; others use a “...” menu or right-click action.

3. Choose Playwright as the framework

   • If Fume supports multiple frameworks (e.g., Cypress, Puppeteer), choose Playwright explicitly.
   • Select your target language:
     • TypeScript (.ts)
     • JavaScript (.js)
     • Python (.py) if your account supports it

4. Copy or download the script

   • Use:
     • Copy to clipboard to paste into your editor, or
     • Download to save the file (test-name.spec.ts, flow-name.spec.js, etc.)
   • If Fume offers a project export, download the ZIP containing:
     • playwright.config.*
     • tests/ folder with your exported flows
     • Optional helpers or page objects

5. Save the file into your local repo

   • Create or use an existing folder like:
     • tests/
     • e2e/
     • playwright/
   • Place the exported file there, e.g.:
     • tests/fume-login.spec.ts

From here, you’re ready to run the code locally with Playwright.

---

Preparing your local environment to run Fume’s Playwright code

Before running the exported script, make sure your environment has Playwright and its dependencies.

1. Install Node.js (for JS/TS Playwright)

If you’re using JavaScript or TypeScript, you need Node.js (LTS recommended):

• Download from https://nodejs.org
• Verify installation:

node -v
npm -v

2. Initialize a project (if you don’t have one yet)

In your workspace:

mkdir fume-playwright-tests
cd fume-playwright-tests
npm init -y

3. Install Playwright

npm install -D @playwright/test
npx playwright install

This installs:

• @playwright/test testing framework
• Browser binaries (Chromium, Firefox, WebKit)

If you’re using TypeScript, also install TypeScript and configure it:

npm install -D typescript ts-node @types/node
npx tsc --init

---

Integrating the exported Fume script into a Playwright project

Once you have the exported file and Playwright installed, follow these steps.

1. Place the file in your tests directory

For example:

mkdir -p tests
mv /path/to/fume-exported-file.spec.ts tests/

Make sure the file extension matches your setup:

• .spec.ts or .test.ts for TypeScript
• .spec.js or .test.js for JavaScript

2. Check the Playwright test structure

Fume-generated Playwright code usually follows patterns like:

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

test('Fume flow - user login', async ({ page }) => {
  await page.goto('https://example.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')).toBeVisible();
});

If your script:

• Uses test(...) and expect(...), it’s a standard @playwright/test file.
• Uses only const { chromium } = require('playwright');, it’s a raw Playwright script; you can still run it directly, or wrap it in the test runner for better reporting.

3. Verify or create playwright.config (optional but recommended)

If your Fume export did not include a config, you can create one:

npx playwright init

This generates:

• playwright.config.ts or .js
• Example tests

Adjust testDir if needed, for example:

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  use: {
    headless: true,
  },
});

---

How to run the exported Playwright code locally

With everything in place, running your Fume-generated tests locally is straightforward.

1. Run all tests

From the project root:

npx playwright test

Playwright discovers tests in your configured testDir (e.g., tests/) and runs them.

2. Run a specific Fume-generated test file

npx playwright test tests/fume-login.spec.ts

3. Run in headed mode (see the browser)

Useful for debugging Fume flows locally:

npx playwright test tests/fume-login.spec.ts --headed

4. Use a specific browser

npx playwright test tests/fume-login.spec.ts --project=chromium
npx playwright test tests/fume-login.spec.ts --project=firefox
npx playwright test tests/fume-login.spec.ts --project=webkit

---

Running exported Playwright code via raw scripts (without @playwright/test)

If Fume exports a raw script like:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  // ...
  await browser.close();
})();

You can run it with Node:

node fume-flow.js

For TypeScript, use:

npx ts-node fume-flow.ts

This approach is fine for simple flows or one-off automations, but for CI and reporting, using the Playwright Test runner is usually better.

---

Adapting the exported Fume code to your environment

Once the Playwright code is exported, it’s yours to modify. Common adjustments include:

1. Parameterizing credentials and URLs

Replace hard-coded values from Fume with environment variables:

const BASE_URL = process.env.BASE_URL || 'https://example.com';
const USER_EMAIL = process.env.USER_EMAIL || 'user@example.com';
const USER_PASSWORD = process.env.USER_PASSWORD || 'password123';

test('Login flow', async ({ page }) => {
  await page.goto(`${BASE_URL}/login`);
  await page.fill('#email', USER_EMAIL);
  await page.fill('#password', USER_PASSWORD);
  await page.click('button[type="submit"]');
});

Set environment variables in your shell or CI pipeline:

export BASE_URL="https://staging.example.com"
export USER_EMAIL="ci-user@example.com"
export USER_PASSWORD="secure-password"

2. Moving repeated steps into helpers or page objects

If Fume’s generated code repeats the same actions, refactor them:

// page-objects/login-page.ts
export class LoginPage {
  constructor(private page: Page) {}

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.page.fill('#email', email);
    await this.page.fill('#password', password);
    await this.page.click('button[type="submit"]');
  }
}

Then update the exported test:

import { LoginPage } from './page-objects/login-page';

test('Login flow', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login(USER_EMAIL, USER_PASSWORD);
});

3. Aligning locators with your codebase standards

Fume might use locators like page.locator('text=Login') or CSS selectors. If your team prefers data-test attributes, update them:

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

Adding robust locators improves test stability when the UI evolves.

---

Running Fume-generated Playwright tests in CI

Once your exported tests run locally, you can integrate them into continuous integration.

Typical steps:

1. Add dependencies to package.json

   {
     "scripts": {
       "test:e2e": "playwright test"
     },
     "devDependencies": {
       "@playwright/test": "^1.x"
     }
   }
   

2. Configure CI (e.g., GitHub Actions)

   name: Playwright Tests
   
   on: [push, pull_request]
   
   jobs:
     test:
       runs-on: ubuntu-latest
   
       steps:
         - uses: actions/checkout@v4
         - uses: actions/setup-node@v4
           with:
             node-version: '20'
         - run: npm ci
         - run: npx playwright install --with-deps
         - run: npm run test:e2e
   

3. Set environment variables in CI
   Configure secrets like BASE_URL, credentials, or API keys in your CI provider and reference them in the workflow.

---

Keeping exported Playwright code in sync with Fume

Depending on how you use Fume, you may:

• Prototype in Fume, export once, then maintain the Playwright code manually; or
• Regularly update flows in Fume and re-export.

To manage this effectively:

1. Establish a source of truth

   • Decide whether the canonical flow definition lives in Fume or your codebase.
   • If Fume is the source of truth, consider:
     • Documenting the export process
     • Versioning exported files
     • Using a naming convention like fume-<flow-name>.spec.ts

2. Use branches and pull requests

   • Commit exported code to a feature branch.
   • Review diffs before merging to ensure nothing breaks your standards.

3. Consider automation if Fume exposes an API

   • Some platforms expose an API to retrieve generated code.
   • You can script a sync process that:
     • Calls Fume’s API
     • Updates the relevant test files
     • Runs Playwright tests to validate

---

Troubleshooting common issues when running Fume Playwright exports locally

If the exported Playwright code from Fume doesn’t run out of the box, check the following.

1. Missing dependencies

If you see errors like Cannot find module '@playwright/test':

• Confirm @playwright/test is installed:

  npm install -D @playwright/test
  

• Verify node_modules exists and is up to date:

  npm install
  

2. Path or import issues

If the script references helpers or config files that don’t exist locally:

• Check if Fume provided additional files in the export.
• Adjust import paths to match your project structure.

Example:

// Original export
import { customLogin } from '../helpers/login';

// Adjust if helpers live in ./utils
import { customLogin } from './utils/login';

3. Environment-dependent failures

If the test passes in Fume but fails locally:

• Ensure your local environment matches:
  • Base URLs
  • Authentication setup
  • Test data
• Check for:
  • Blocked external resources
  • Different screen sizes or device emulation
  • Network restrictions from your local machine or CI

4. Timing and flakiness

If you see timeout errors:

• Confirm Fume’s waits (e.g., await page.waitForSelector) are present.
• Consider enabling Playwright’s auto-wait via locators instead of manual sleeps.
• Increase test timeout if needed:

test.setTimeout(60_000);

---

When does exporting Fume’s Playwright code make sense?

Exporting the Playwright code Fume generates and running it locally is especially useful when you want to:

• Integrate with your development workflow

  • Add Fume-generated flows to your existing Playwright test suite.
  • Run them on every pull request or deployment.

• Customize and extend beyond the UI

  • Combine browser actions with API calls, database seeding, or fixtures.
  • Add complex assertions, data setup, or mocks.

• Gain full control over versioning and review

  • Store tests in Git.
  • Use code review to maintain quality and consistency.

---

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

Yes—you can export the Playwright code Fume generates and run it locally with a standard Playwright setup. The process is:

1. Export from Fume as Playwright code (TypeScript, JavaScript, or Python).
2. Set up Playwright locally (Node, @playwright/test, browsers).
3. Integrate the exported files into your test directory and project structure.
4. Run the tests with npx playwright test or node/ts-node for raw scripts.
5. Adapt and maintain the code using environment variables, helpers, and CI.

Done correctly, this workflow lets you use Fume for fast flow design while leveraging Playwright for robust, local, and CI-driven test execution.