How to add playwright to existing nextjs app.

The best way to currently have playwright running with your nextjs app when you are starting is to follow the documentation from nextjs.

Playwright in Nextjs: Testing | Next.js (nextjs.org)

But for those that want to add it in the existing nextjs project you will find it that when you run the e2e:test

browserType.launch: Executable doesn't exist at ../

Running npx playwright install could solve the problem but haven’t solved it on my case using this procedure.

I think a better way of adding playwright to your project is through the main documentation of playwright.

1. I’m using pnpm and run this inside the project directory.

pnpm dlx create-playwright

2. I personally use these settings on my project as to separate unit tests and e2e tests

3. Copy the playwright.config.ts from the nextjs examples:

playwright-with-nextjs-examples

3. Change some configs

For me I changed the testDir as I created my own custom folder, if you did not it will just be "e2e" .

const config: PlaywrightTestConfig = {
  timeout: 30 * 1000,
  retries: 2,
  // * I changed this
  testDir: path.join(__dirname, "tests/e2e"),
  outputDir: "tests/e2e/test-results/",
  webServer: {
    command: "pnpm run dev",
    url: baseURL,
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI
  }
}

I also changed npm run dev to pnpm run dev as I was using pnpm . You might want to change it to yarn if you are using yarn in your project.

Run your e2e script and then you’re done!