Setup Playwright

Learn how to set up Playwright for testing applications using Kinde authentication. This guide covers installation, configuration, and basic setup for end-to-end testing.

What you need

A test user and optionally a running test application.
Node.js version 20 or higher.

Installation for new projects

Install Playwright with the following command:
Terminal window
```
npm init playwright@latest
```
Pick the following options:
- Do you want to use TypeScript or JavaScript?: TypeScript
- Where to put your end-to-end tests?: tests
- Add a GitHub Actions workflow?: true
- Install Playwright browsers?: true
This will create the basic Playwright folder structure and configuration files.
Install dotenv for environment variable management:
Terminal window
```
npm install dotenv --save-dev
```

Configuration

Environment variables

Create a new .env file:
Terminal window
```
touch .env
```

Add the following to the .env file using values from your test user and Kinde application:

TEST_APP_URL=https://your-app-url.com
TEST_USER_EMAIL=your-test-email
TEST_USER_PASSWORD=your-test-password
KINDE_ISSUER_URL=https://your-subdomain.kinde.com
KINDE_CLIENT_ID=your-kinde-client-id
KINDE_CLIENT_SECRET=your-kinde-client-secret

Add the .env file to your .gitignore file:
Terminal window
```
echo ".env" >> .gitignore
```

Playwright configuration

Update your playwright.config.ts file with the following basic configuration:

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

dotenv.config({ path: path.resolve(__dirname, '.env') });

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',

  use: {
    baseURL: process.env.TEST_APP_URL,
    trace: 'on-first-retry',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});

Project structure

After setup, your project should have the following structure:

your-project/
├── playwright.config.ts
├── .env                         # Environment variables (gitignored)
├── .gitignore
├── tests/
│   └── example.spec.ts          # Example test file
└── package.json

Basic test example

Create your first test file to verify the setup:

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

test('can visit the application', async ({ page }) => {
  await page.goto(process.env.TEST_APP_URL!);
  await expect(page).toHaveURL(new RegExp(new URL(process.env.TEST_APP_URL!).hostname));
});

Running tests

Interactive mode (recommended for development)

Open Playwright in interactive mode:

npx playwright test --ui

This opens the Playwright Test UI where you can:

Select a browser
See tests run in real-time
Debug tests interactively

Headless mode (for CI/CD)

Run tests in headless mode:

npx playwright test

Troubleshooting

Playwright not found

If you get a “command not found” error, make sure Playwright is installed:

npm init playwright@latest

Browsers not installed

Install Playwright browsers:

npx playwright install

Environment variables not loading

Make sure .env exists and contains valid environment variables. You can also use environment variables directly:

TEST_APP_URL=https://your-app.com npx playwright test

Cross-origin errors

When testing with Kinde, you’ll need to handle redirects properly. See the Test authentication flows guide for examples.

For additional troubleshooting or configuration guidance, refer to the official Playwright documentation.

Next steps

Now that Playwright is set up, you can proceed with:

Test authentication flows - Learn how to test sign-up, sign-in, and sign-out flows
Test passwordless flows - Test passwordless authentication with email OTP
Test authenticated features - Test authenticated features using saved session state
Test backend APIs - Test backend APIs with refresh tokens

Join the community

Get support from the Kinde team and expert users in the Kinde community

Join via Slack or Discord
Contact support

Chat to support through the Kinde help widget, or send a question via email

Send an email