Skip to main content

Start from an empty Playwright project

Use this path when you want a new Playwright-based generator repository instead of converting an existing test suite.

The fastest starting point is the sample repository:

git clone https://github.com/sixpack-dev/sixpack-sample-typescript-playwright.git
cd sixpack-sample-typescript-playwright
npm install
npx playwright install chromium

The sample contains:

  • a small local demo application in src/app.ts
  • Playwright flows in tests/flows
  • direct Playwright tests in tests/customer-flows.spec.ts
  • Sixpack generator adapters in sixpack/generators.ts
  • a supplier entry point in sixpack/supplier.ts

Run the Playwright flow first​

Run the tests before connecting the supplier to Sixpack:

npm test

The sample starts the local demo app automatically. To watch the flow against a visible app, start the app in one terminal:

npm run dev

Then run the tests in another terminal:

npm test

Inspect and generate from the flow CLI​

Keep the app running and use the Playwright flow CLI:

npm run flow:list
npm run flow:inspect
npm run flow:generate

This verifies that the flow can run outside Playwright Test. That is important because a Sixpack supplier also runs the flow outside the test runner.

Connect the sample as Sixpack generators​

Create config/ files and a .env file from .env.example, then set:

  • SIXPACK_ORGANIZATION
  • SIXPACK_AUTH_TOKEN
  • SIXPACK_CLIENT_CERT_PATH
  • SIXPACK_CLIENT_KEY_PATH
  • SIXPACK_ENVIRONMENT
  • SIXPACK_URL

Validate the adapter contract:

npm run adapter:validate

Start the supplier:

npm run start:supplier

Adapt the sample to your system​

Keep the same project shape and replace the demo app-specific pieces:

  1. Point playwright.config.ts at your application.
  2. Replace the flows in tests/flows with journeys that create your data.
  3. Keep each flow input and output contract flat unless the consumer contract truly needs nesting.
  4. Adapt selected flows in sixpack/generators.ts.
  5. Add stock templates only after the generator contract is stable.
  6. Validate each important flow through direct Playwright tests, sixpack-playwright generate, and live supplier execution.

For a deeper explanation of reusable flows, runtime Playwright config, adapter validation, and supplier execution, read Convert an existing Playwright repo.