Andras/BoundlessFlowCampus2K

Fork 0

[Webpage design] Acceptance testing for responsive design #15

New issue

Closed

opened 2026-03-27 15:45:21 +00:00 by Andras · 5 comments

Andras commented

2026-03-27 15:45:21 +00:00

Owner

We need to make sure we have tools for testing (and verification and validation) of the webpage's responsive features.

Automated testing (and the necessary tooling) is preferred.

This is possibly a high-level issue and should be divided into sub-issues.

We need to make sure we have tools for testing (and verification and validation) of the webpage's responsive features. Automated testing (and the necessary tooling) is preferred. This is possibly a high-level issue and should be divided into sub-issues.

Andras added the

testing

label

2026-03-27 15:45:21 +00:00

Andras commented

2026-03-27 15:46:40 +00:00

Author

Owner

Parent issue: Webpage design #13
Related issue: [#14]([Webpage design] Establish documentation for responsive design #14)

Parent issue: [Webpage design #13](https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/13) Related issue: [https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/14]([Webpage design] Establish documentation for responsive design #14)

Andras added the

design

frontEnd

labels

2026-03-27 15:48:26 +00:00

a24timsv added the

team leaders

label

2026-03-31 10:48:28 +00:00

a24sakma added the

unassigned

label

2026-05-11 09:43:01 +00:00

e24aleli was assigned by a24julot

2026-05-11 09:44:10 +00:00

e24aleli commented

2026-05-11 10:48:35 +00:00

Collaborator

Research for issue #15

There are a wide variety of tools one can use for acceptance testing. However, the one that seems to be the best choice for us is "Playwright". It's opensource and developed by microsoft.

Pros

It's free, and since it's by microsoft a playwright extension is available in VS Code for easy setup (CLI option is also available).
Works natively on webkit so easier to test how the site looks on iPhone/Mac.

Method

The most robust way for testing would be a hybrid approach. For example automated tests for checking all pages on different screen sizes and manual testing for "look and feel". This is where playwright comes in, it can be used as a validation tool to prove that the responsive requirements gets met on our selected viewports.

Playwright uses something called "Computed Style Assertions". Which means that when running the test it will check the CSS so that it is more "mathematically" correct.

Possible workflow

Set viewport, so that playwright emulates a specific device.
It then checks if the layout follows our rules.
Lastly, a coder can manually confirm that its good.

Let me know if I left something out or misunderstood.

# Research for issue #15 - - - - There are a wide variety of tools one can use for acceptance testing. However, the one that seems to be the best choice for us is "[Playwright](https://playwright.dev)". It's opensource and developed by microsoft. ## Pros It's free, and since it's by microsoft a [playwright extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) is available in VS Code for easy setup (CLI option is also available). Works natively on webkit so easier to test how the site looks on iPhone/Mac. ## Method The most robust way for testing would be a hybrid approach. For example automated tests for checking all pages on different screen sizes and manual testing for "look and feel". This is where playwright comes in, it can be used as a validation tool to prove that the responsive requirements gets met on our selected viewports. Playwright uses something called "Computed Style Assertions". Which means that when running the test it will check the CSS so that it is more "mathematically" correct. ## Possible workflow Set viewport, so that playwright emulates a specific device. It then checks if the layout follows **our** rules. Lastly, a coder can manually confirm that its good. - - - - - Let me know if I left something out or misunderstood.

e24aleli added the

needs review

label

2026-05-11 10:48:56 +00:00

a24sakma commented

2026-05-11 11:35:31 +00:00

Collaborator

@e24aleli do you mind to check if there is a way to do the tests without using extension and what are to pros and cons with this.

because we think extension installation and documentation is manual step and it is easy to lose it when we are not the ones who work on this.

@e24aleli do you mind to check if there is a way to do the tests without using extension and what are to pros and cons with this. because we think extension installation and documentation is manual step and it is easy to lose it when we are not the ones who work on this.

a24sakma added

reviewed

and removed

needs review

labels

2026-05-11 11:35:45 +00:00

e24aleli commented

2026-05-11 12:34:39 +00:00

Collaborator

@a24sakma The extension is optional and not required you can use NPM in the terminal aswell.

Pros

Extension

Main pro is ease of use, it provides a gui,button on the sidebar, you can see more "In-real time" the process.

CLI

Guaranteed, everyone has the engine with npm install
Works on Mac/linux/windows
More autonomous possibility such as automating project to check itself on push to git.
Can be used with docker

Cons

Extension

Only on VS code as far I know
Manual setup.

CLI

Lack of interface
Slight learning curve

Summary

I believe the CLI is the better choice even though it might be a little more complex (The only con really). But it offers more freedom, eliminates manual setup, and compatible on more platforms

@a24sakma The extension is optional and not required you can use NPM in the terminal aswell. - - - - ### Pros **Extension** - Main pro is ease of use, it provides a gui,button on the sidebar, you can see more "In-real time" the process. **CLI** - Guaranteed, everyone has the engine with npm install - Works on Mac/linux/windows - More autonomous possibility such as automating project to check itself on push to git. - Can be used with docker - - - - - ### Cons **Extension** - Only on VS code as far I know Manual setup. **CLI** - Lack of interface - Slight learning curve - - - ## Summary I believe the CLI is the better choice even though it might be a little more complex (The only con really). But it offers more freedom, eliminates manual setup, and compatible on more platforms

👍 1

a24sakma commented

2026-05-11 12:55:15 +00:00

Collaborator

@e24aleli it sounds good. That is what I thought as well. I can create an issue for implementation through the cod base.

a24sakma removed the

unassigned

label

2026-05-11 12:55:26 +00:00

a24sakma referenced this issue

2026-05-11 13:02:38 +00:00

Creat test in the frontend for responsivnes #893