(updated ) by

Setup playwright for dev and production e2e testing

Playwright can help run your tests in browsers and setup tests to run in the browser.

Getting started

Because Playwright uses browsers, it needs to install them. At this point you could skip to installing and using the docker version which installs the browsers for you on an Ubuntu based container.

Incorporating containers

Docker

Production config

This is an example from the docs which I set the base URL for production. Change the baseURL based on the environment you want to test on.

// playwright.config.ts
import { PlaywrightTestConfig, devices } from "@playwright/test";

const config: PlaywrightTestConfig = {
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: "on-first-retry",
    baseURL: "https://create.ecogarden.design",
  },
  projects: [
    {
      name: "chromium",
      use: { ...devices["Desktop Chrome"] },
    },
    {
      name: "firefox",
      use: { ...devices["Desktop Firefox"] },
    },
    {
      name: "webkit",
      use: { ...devices["Desktop Safari"] },
    },
  ],
};
export default config;

Dev config

This adds a webserver running the dev server. Notice we change the baseURL to the local development environment.

// playwright.dev.config.ts
import config from "./playwright.config";

const devConfig = {
  ...config,

  webServer: {
    command: "yarn run dev",
    port: 5000,
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
  },
};

if (devConfig.use) {
  // eslint-disable-next-line fp/no-mutation
  devConfig.use.baseURL = "http://localhost:5000";
}

export default devConfig;

Then run your tests:

yarn run playwright test e2e

And run tests for your dev environment:

yarn run playwright test --config=playwright.dev.config.ts e2e