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.

In order to start a test you need to run following command in the terminal: npm run test:(TEST_NAME)

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 test:(TEST_NAME)

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

IMPORTANT

Do not forget to add the test to the package.json file in frontend. Not doing this will make the script not be found.

Make sure you add it under scripts for example:

	"scripts": {
		"test:responsive": "playwright test"
	}

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