Add Playwright integration tests

.eslintrc.json

@@ -6,13 +6,12 @@
     "prettier"
   ],
   "overrides": [
-    // Only uses Testing Library lint rules in test files
+    // Overrides for Playwright tests
     {
-      "files": [
-        "**/__tests__/**/*.[jt]s?(x)",
-        "**/?(*.)+(spec|test).[jt]s?(x)"
-      ],
-      "extends": ["plugin:testing-library/react"]
+      "files": ["tests/**/*.[jt]s?(x)"],
+      "rules": {
+        "testing-library/prefer-screen-queries": "off"
+      }
     }
   ],
   "rules": {

.github/workflows/playwright.yml

@@ -0,0 +1,43 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, deploy-staging, 4284-playwright-setup]
+  pull_request:
+    branches: [main, deploy-staging]
+jobs:
+  test:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci --force
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Build app
+        run: npm run build
+        env:
+          NEXT_PUBLIC_DCAPI_ENDPOINT: ${{ secrets.NEXT_PUBLIC_DCAPI_ENDPOINT }}
+
+      - name: Start app
+        run: npm run start &
+
+      - name: Wait for server
+        run: npx wait-on http://localhost:3000
+
+      - name: Run Playwright tests
+        run: npx playwright test
+        env:
+          BASE_URL: ${{ secrets.BASE_URL }}
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -46,3 +46,9 @@ yarn-error.log*
 
 # vscode
 /.vscode/*
+
+# playwright
+/test-results/
+/playwright-report/*
+/blob-report/
+/playwright/.cache/

README.md

@@ -16,7 +16,6 @@ Digital Collections v2 (DCv2) is a UI application for discovering and interactin
 
 The following dependencies should be "pinned" or held behind `@latest` versions
 
-- `next`: We've experienced issues with the AWS Amplify build process when using `@latest` versions of NextJS. To be safe, in general we should pin NextJS to >= 1 minor versions behind `next@latest`.
 - `@elastic/elasticsearch`: To match the version of `OpenSearch` our app uses.
 - `swiper`
 - `@honeybadger-io/js`
@@ -138,17 +137,34 @@ A pre-commit hook will ensure code is linted before committed.
 
 ### End to end tests
 
-Test fixtures can be accessed by pointing the app to a [Test Environment API](https://github.com/nulib/dc-test-environment). Setting the `NEXT_PUBLIC_DCAPI_ENDPOINT` `env` variable value to https://dc-test-api.rdc-staging.library.northwestern.edu/api/v2 will run DC v2 against test data. The following commands start your server and the test suite.
+Test fixtures can be accessed by pointing the app to a [Test Environment API](https://github.com/nulib/dc-test-environment).
 
 ```bash
-# Start local server
+NEXT_PUBLIC_DCAPI_ENDPOINT="https://dc-test-api.rdc-staging.library.northwestern.edu/api/v2"
+```
+
+```bash
+# Start local server (automatically points NEXT_PUBLIC_DCAPI_ENDPOINT to the test data API)
 npm run dev:test-env
 
-# Start Cypress test runner
-npm run cypress:open
+# If in AWS Dev Environment, set a BASE_URL environment variable in a .env.local file
+BASE_URL="[YOUR_DEV_ID].dev.rdc.library.northwestern.edu"
+
+# Start Playwright tests in headless mode
+npm run test:playwright
+```
+
+To run more visual tests, try experimenting with:
+
+```bash
+# Run in an interactive test browser to visually see tests run
+npx playwright test --ui
+
+# Run all tests in headed mode
+npx playwright test --headed
 ```
 
-E2E tests use [Cypress](https://docs.cypress.io/), and are linted with [Cypress ESLint Plugin](https://github.com/cypress-io/eslint-plugin-cypress).
+For more info, view the docs: [Playwright](https://playwright.dev/).
 
 ### Unit tests
 

components/Facets/Filter/Clear.tsx

@@ -20,7 +20,6 @@ const FilterClear: React.FC<FilterClearProps> = ({ isModal = false }) => {
   } = router;
 
   const handleClear = () => {
-    console.log("Clear click");
     isModal
       ? filterDispatch({
           type: "updateUserFacets",

components/Footer/Footer.tsx

@@ -7,7 +7,7 @@ import SiteContentMessage from "./SiteContentMessage/SiteContentMessage";
 export default function Footer() {
   return (
     <FooterStyled>
-      <Container>
+      <Container data-testid="footer">
         <NUFooter isCopyright />
       </Container>
       <SiteContentMessage />

components/Header/Super.tsx

@@ -5,6 +5,7 @@ import {
   Super,
   User,
 } from "@/components/Header/Header.styled";
+
 import Container from "../Shared/Container";
 import { DCAPI_ENDPOINT } from "@/lib/constants/endpoints";
 import Link from "next/link";

components/Nav/Nav.tsx

@@ -6,7 +6,7 @@ interface NavProps {
 }
 
 const Nav: React.FC<NavProps> = ({ children }) => {
-  return <NavStyled>{children}</NavStyled>;
+  return <NavStyled data-testid="super-nav">{children}</NavStyled>;
 };
 
 export default Nav;

components/Shared/Container.tsx

@@ -7,6 +7,7 @@ interface ContainerProps {
   containerType?: "default" | "wide";
   isFlex?: boolean;
   maxWidth?: number;
+  [key: string]: unknown;
 }
 
 const Container: React.FC<ContainerProps> = ({
@@ -15,6 +16,7 @@ const Container: React.FC<ContainerProps> = ({
   containerType = "default",
   isFlex = false,
   maxWidth,
+  ...restProps
 }) => {
   const manualWidth = maxWidth ? { maxWidth: maxWidth } : {};
 
@@ -24,6 +26,7 @@ const Container: React.FC<ContainerProps> = ({
       containerType={containerType}
       css={{ ...manualWidth }}
       isFlex={isFlex}
+      {...restProps}
     >
       {children}
     </ContainerStyled>

components/Shared/SVG/Northwestern.tsx

@@ -13,6 +13,7 @@ const NorthwesternWordmark: React.FC = () => (
   <svg
     version="1.1"
     id="nortwestern-wordmark"
+    data-testid="northwestern-logo"
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     x="0px"