Initial E2E test setup with Playwright (#419)

* Playwright setup and basic homepage test

* Run scripts

* Move git ignore entries to root

* Disable Testing Library linting on Playwright test files

* Allow dev dependency imports for e2e test files

* Typecheck fixes

* Target FE unit tests for Testing Library lint plugin (replaces disable mechanism)

* Clean out comments

.eslintrc.js

@@ -2,7 +2,6 @@ module.exports = {
   extends: [
     "eslint-config-mitodl",
     "eslint-config-mitodl/jest",
-    "plugin:testing-library/react",
     "plugin:import/typescript",
     "plugin:mdx/recommended",
     "prettier",
@@ -49,6 +48,7 @@ module.exports = {
           "**/*.stories.ts",
           "**/*.stories.tsx",
           "**/*.mdx",
+          "e2e_testing/**/*.ts",
         ],
       },
     ],
@@ -83,6 +83,11 @@ module.exports = {
         ...restrictedImports(),
       },
     },
+    {
+      files: ["./frontends/**/*.test.{ts,tsx}"],
+      plugins: ["testing-library"],
+      extends: ["plugin:testing-library/react"],
+    },
   ],
 }
 

.gitignore

@@ -129,3 +129,9 @@ github-pages/public
 
 # Storybook
 storybook-static/
+
+/e2e_testing/test-results/
+/e2e_testing/playwright-report/
+/e2e_testing/blob-report/
+/e2e_testing/playwright/.cache/
+!/e2e_testing/.env

e2e_testing/.env

@@ -0,0 +1 @@
+BASE_URL=https://mit-open-rc.odl.mit.edu/

e2e_testing/README.md

@@ -0,0 +1 @@
+# e2e_testing

e2e_testing/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "e2e_testing",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "test": "playwright test",
+    "start": "playwright test --ui"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.41.0",
+    "@types/node": "^20.11.5",
+    "dotenv": "^16.3.1"
+  }
+}

e2e_testing/playwright.config.ts

@@ -0,0 +1,69 @@
+import { defineConfig, devices } from "@playwright/test"
+import "dotenv/config"
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./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: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* 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: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+})

e2e_testing/tests/001_home.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from "@playwright/test"
+
+const { BASE_URL } = process.env
+
+test("Home page loads and main elements are visible", async ({ page }) => {
+  await page.goto(BASE_URL!)
+
+  await expect(
+    page.getByRole("link", { name: "MIT Open" }),
+    "Header link is visible",
+  ).toBeVisible()
+
+  await expect(
+    page.getByRole("heading", { name: "Learn from MIT" }),
+    "Main heading is visible",
+  ).toBeVisible()
+
+  await expect(
+    page.getByPlaceholder("What do you want to learn?"),
+    "Main search input is visible",
+  ).toBeVisible()
+
+  await expect(
+    page.getByRole("heading", { name: "Upcoming Courses" }),
+    "Upcoming courses header visible",
+  ).toBeVisible()
+})

e2e_testing/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "skipLibCheck": true
+  }
+}

package.json

@@ -2,7 +2,8 @@
   "name": "root",
   "private": true,
   "workspaces": [
-    "frontends/*"
+    "frontends/*",
+    "e2e_testing"
   ],
   "scripts": {
     "foreach": "yarn workspaces foreach -pvi --exclude=root run",