👉 Follow the Playwright E2E tutorial: From Cowboy to Confidence →
This tutorial is geared towards learning how to create a realistic playwright setup for testing fully fledged software as a service applications, generating tests for realistic applications, and then running those tests with Endform.
To get started, you will need to:
- Clone the repository:
git clone https://github.com/endformdev/playwright-tutorial && cd playwright-tutorial - Make sure you have
pnpminstalled on your system - Install the dependencies:
pnpm install - Checkout the branch for the stage you want to start from, for example:
git checkout stage-0-baseline
We will be testing against a realistic dummy application. You can either:
- Run the tests against our pre-deployed application at https://endform-playwright-tutorial.vercel.app
- Run the application locally, for this option you will need to:
- Install dependencies:
pnpm install - Run the application right away:
pnpm dev - Optionally switch to local SQLite instead of the shared demo Durable Object:
pnpm db:setup - Optionally seed your local database:
pnpm db:seed - Check that it loads correctly at http://localhost:3000
- Install dependencies:
- Don't forget to connect your project with the Endform vercel integration
- You will need to rename
rename-me-to-.github-for-workflowsto.githubto get going with running your tests in GitHub Actions
- Install the Endform extension on your Netlify team, connect it to your Endform organization, then click Configure project on the new project
- The extension runs the tests against every Deploy Preview, so you don't need the GitHub Actions workflows
- If your Deploy Previews are password protected, add the password as a secret environment variable named
E2E_NETLIFY_PREVIEW_PASSWORD, scoped to Deploy Previews, and add it to the project'sSECRETS_SCAN_OMIT_KEYSso Netlify's secrets scan doesn't fail the build. The tests use it to get past Netlify's password page (seesetup-utils.tsandtests/test.ts). To do the same in your own tests, follow the guide in the Endform docs. - To also see the results as a check on your pull requests, install the Endform GitHub App on the repository
The SaaS is based on the Next.JS SaaS Starter Tempate.
This is a starter template for building a SaaS application using Next.js with support for authentication, dummy payment processing, and a dashboard for logged-in users. This version has been modified to be easier to deploy and test by using SQLite instead of Postgres and a dummy payment system instead of Stripe.
- Marketing landing page (
/) with animated Terminal element - Pricing page (
/pricing) with dummy payment processing - Dashboard pages with CRUD operations on users/teams
- Basic RBAC with Owner and Member roles
- Dummy subscription management (no real payments)
- Email/password authentication with JWTs stored to cookies
- Global middleware to protect logged-in routes
- Local middleware to protect Server Actions or validate Zod schemas
- Activity logging system for any user events
- SQLite database for easy local development and deployment
- Framework: Next.js
- Database: SQLite via a shared Cloudflare Durable Object proxy by default, with optional local file SQLite and Turso support
- ORM: Drizzle
- Payments: Dummy payment system (for demonstration only)
- UI Library: shadcn/ui
git clone https://github.com/endformdev/playwright-tutorial
cd playwright-tutorial
pnpm installBy default, the app works without any database or auth environment variables. If you do nothing, it connects to the shared demo SQLite database through an HTTP proxy backed by a Cloudflare Durable Object. That shared demo database is public and wiped on a schedule, so it is meant for quick starts and testing only.
Start the app immediately:
pnpm devIf you want your own local SQLite file instead, use the included setup script to create .env and run the database migrations:
pnpm db:setupYou can optionally seed that local database too:
pnpm db:seedThen, run the Next.js development server:
pnpm devOr for better performance:
pnpm build && pnpm startOpen http://localhost:3000 in your browser to see the app in action.
This version uses a dummy payment system for demonstration purposes:
- Card Numbers: Only 8-digit numbers are accepted (e.g.,
12345678) - Expiration: Any future date in MM/YY format (e.g.,
12/25) - CVV: Any 3-digit number (e.g.,
123) - Billing Address: Any valid address information
The dummy payment system will store payment information in the database but won't process any real payments. This prevents accidental real credit card usage during development and testing.
When you're ready to deploy your SaaS application to production, follow these steps:
- Push your code to a GitHub repository.
- Connect your repository to Vercel and deploy it.
- Follow the Vercel deployment process, which will guide you through setting up your project.
- Push your code to a GitHub repository.
- Import the repository on Netlify. Netlify detects Next.js and pnpm, so the default build settings work.
- Install the Endform extension to run the tests against each Deploy Preview.
In your Vercel or Netlify project settings (or during deployment), add the necessary environment variables:
BASE_URL: Set this to your production domain.DATABASE_URL: Leave unset to use the shared Durable Object proxy, set it to a local SQLite path, set it to your own proxy URL, or use a Turso connection string (libsql://your-database.turso.io)DATABASE_AUTH_TOKEN: Required if using TursoAUTH_SECRET: Optional in demo mode, but set this to a random string for any non-demo deployment.openssl rand -base64 32will generate one.