Merge branch 'chore/e2e-testing'

README.md

@@ -24,9 +24,29 @@ Clone the repository, install dependencies and run the development server locall
 
 Preview the application locally on http://localhost:3000/
 
+#### End-to-end testing
+
+Before the first run, ensure the browsers Playwright needs are installed:
+
+    node_modules/.bin/playwright install
+
+Then add the plan identifiers you want to test to your `.env` file:
+
+    TEST_PLAN_IDENTIFIERS=abcd,efgh,ijlk
+
+Now you should be able to run the test suite. You might want to start the
+either the development or production server first. If you don't, the
+test suite will start one for you (the dev server will be started if the
+`TEST_DEVSERVER` env variable is set). You should be able to run the test
+suite like this:
+
+    node_modules/.bin/playwright test
+
 #### Building the custom version of plotly.js
 
-Clone the plotly.js GitHub repository and run the following commands:
+If you need to add new plot types, or update to the upstream version of plotly.js,
+clone the [plotly.js GitHub repository](https://github.com/plotly/plotly.js) and
+run the following commands:
 
     npm install
     npx change-package-name @kausal/plotly-custom
@@ -38,7 +58,7 @@ Clone the plotly.js GitHub repository and run the following commands:
 
 ## Building and deploying in production
 
-To run the app in production:
+To run the app in production mode:
 
     yarn install
     yarn build

playwright.config.ts

@@ -0,0 +1,73 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e-tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    actionTimeout: 2000,
+    screenshot: 'on',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: process.env.TEST_DEVSERVER ? 'yarn dev' : 'yarn start',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});