Using Playwright for Automated Verification of Responsive Design

Since BoundlessFlowCampus2K is built as a framework that targets multiple devices, such as: smartphones, desktops and large displays. Static and manual testing is not enough to guarantee that the UI works.

Inside the frontend directory we use Playwright to test compiled and rendered outcome. Instead of searching for media queries, Playwright runs test on a vast collection of browser engines (Chromium, Gecko, WebKit). It also emulates physical devices with different viewports to make sure the components scale and reposition dynamically based on the user's role and screen.

When cloning the project and running the install scripts, playwright gets automatically installed.

(docker build -t frontend .) In other words you DO NOT need to install the package itself. You can easily test this by trying to run a test from the "tests" directory.

Playwright scans through the "test" directory for a file that with the matching test name and executes the tests instructed in the file. Feel free to create other tests in this directory aswell.

---

Prerequisites

Before running a test it is important to have done the following:

- Make sure the project dev server is up and running -

cd frontend

npm start

NOTE: If port 3000 is occupied and defaults to port 3001, ensure that the playwright.config.js is updated to match the active baseURL.

How to run a Playwright test

1. Execute the test

Open up a separate terminal window and run:

cd frontend npm run install-playwright npm run test:responsive

2. View Visual Test Reports

If any errors/warnings gets caught during the test, you can view a descriptive visual dashboard to trace the faults. Usually a link to a localhost gets available after a test is done, otherwise you can run.

npx playwright show-report

3. Extra: GUI Mode

It is possible to do everything in the terminal, but you can also run tests from a GUI and also view all components from the GUI.

This is done with: npx playwright test --ui

Future additions and updates

It is important to know where things should be placed and changed.

• Test files: Stored inside the frontend/tests/...
• Global configurations: if you need to add new device emulations, you must update the playwright.config.js file.