Wrap app in Playwright end to end tests

[adamjarling]

What does this do?

This swaps out DC's integration test framework from Cypress to Playwright, as part of a larger idea to adopt Playwright across our team's apps and platforms. These consolidated tests could be stored in the [RDC Test Runner][https://github.com/nulib/rdc-test-runner] repository.

• Removes Cypress and its artifacts
• Sets up comprehensive tests for
  • General layout
  • Search page
  • Work page
• Sets up Github Actions workflow
• Establishes a pattern for Playwright Test Fixtures

Integration tests and fixtures are located in the root /test directory.

How to run the tests for the first time

Delete your package-lock.json file and the /node_modules folder (to avoid any lingering Cypress artifacts)

# Install new dependencies
npm install

Test fixtures can be accessed by pointing the app to a Test Environment API.

NEXT_PUBLIC_DCAPI_ENDPOINT="https://dc-test-api.rdc-staging.library.northwestern.edu/api/v2"

# Start local server (automatically points NEXT_PUBLIC_DCAPI_ENDPOINT to the test data API)
npm run dev:test-env

# 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

Note the first time you run Playwright tests it may prompt you to download test browsers. Go ahead and accept when prompted.

To run more visual tests, try experimenting with:

# Run in an interactive test browser to visually see tests run
npm playwright test --ui

# Run all tests in headed mode
npm playwright test --headed

For more info, view the docs: Playwright.

Run in VSCode

Experiment with the preferred workflow of generating and running tests directly within VSCode.

Prerequisites

• Install the Playwright VSCode extension

Environments

This PR allows integration tests to be ran in different environments (local laptop dev, AWS dev, and within Github Actions). Default environment is local laptop dev, but you can easily adjust this by updating the BASE_URL in a local .env.local file as noted above.

Github Actions

Tests are configured to work with Github Actions and the workflow code lives here:

.github/workflows/playwright.yml

Test Fixtures

Test fixtures are a Playwright concept allowing Tests to be set up and customized in a flexible way, to test exactly what you want. In default tests, you're given the page object to assert upon:

test("renders something", async ({
    page,
  }) => { ...tests here }

Fixtures are Typescript classes which contain some pre-configured UI or state within the page. You can make as many as you want, and pass them into your tests like:

test("renders something", async ({
    page,
    openGraphPage
  }) => { ...tests here }

The idea is to not have to create kitchen-sink beforeEach() setup for a large suite of assertions. Check out some initial patterns in the following files.

/tests/fixtures/open-graph.ts
/tests/fixtures/search-page.ts

[mathewjordan]

🚀 This is really great and should really help us in testing some of our more interactive screens. Just the note on the timeout, but otherwise lets roll.