Andras/BoundlessFlowCampus2K

Fork 0

Creat test in the frontend for responsivnes #893

New issue

Closed

opened 2026-05-11 13:02:38 +00:00 by a24sakma · 7 comments

a24sakma commented

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

Collaborator

Background to the issue

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.

The research has been done in this issue #15 and what needs to be done is:

-you can use npm package that is updatedd lately and high useage basically an stable library. playwrite seems to be fine by checking the github https://github.com/microsoft/playwright

through the command npm running a script in the frontend that checks css files for the responsive designs.
it could be checking for media queries if we have or other rules that we have for responsiveness it makes sure the page is responsive without us needed to check manually by going to the page.

# Background to the issue 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. The research has been done in this issue https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/15 and what needs to be done is: -you can use npm package that is updatedd lately and high useage basically an stable library. playwrite seems to be fine by checking the github https://github.com/microsoft/playwright - through the command npm running a script in the frontend that checks css files for the responsive designs. - it could be checking for media queries if we have or other rules that we have for responsiveness it makes sure the page is responsive without us needed to check manually by going to the page.

a24sakma added the

frontEnd

test-creation

unassigned

labels

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

a22erigr removed the

unassigned

label

2026-05-11 13:58:11 +00:00

c24elipe was assigned by a22erigr

2026-05-11 13:58:16 +00:00

c24elipe was unassigned by a24sakma

2026-05-12 08:02:06 +00:00

e24aleli was assigned by a24sakma

2026-05-12 08:02:40 +00:00

b24johka commented

2026-05-12 10:54:01 +00:00

Collaborator

Are you sure this is an X-unit test? The Frontend is entirely in Javascript, X-unit is for C# (backend, logic etc..) but maybe i am missing something.

We've in earlier decisions disregarded end-to-end testing (playwright) of our frontend and declared manual testing as our go to approach for interactive testing. see https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/Testing-methodology
If this will be changed, don't forget to update our Testing-methodology wiki to align with reality.

Are you sure this is an X-unit test? The Frontend is entirely in Javascript, X-unit is for C# (backend, logic etc..) but maybe i am missing something. We've in earlier decisions disregarded end-to-end testing (playwright) of our frontend and declared manual testing as our go to approach for interactive testing. see https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/Testing-methodology If this will be changed, don't forget to update our Testing-methodology wiki to align with reality.

a24sakma commented

2026-05-12 11:02:45 +00:00

Author

Collaborator

According to wiki "The xUnit frameworks are often used for unit testing – testing an isolated unit of code – but can be used for any level of software testing including integration and system. "

X-unit test refers in this context to the framework.
"https://en.wikipedia.org/wiki/XUnit"
and yes we have decided to do automated tests not manual test. We will update the wiki after depending how it goes with the implementation.

I will rename the label to something more appropriate as it is misleading a little

According to wiki "The xUnit frameworks are often used for unit testing – testing an isolated unit of code – but can be used for any level of software testing including integration and system. " X-unit test refers in this context to the framework. "https://en.wikipedia.org/wiki/XUnit" and yes we have decided to do automated tests not manual test. We will update the wiki after depending how it goes with the implementation. I will rename the label to something more appropriate as it is misleading a little

👍 1

e24aleli added reference #893-Create-test-in-frontend-for-responsiveness

2026-05-15 12:06:26 +00:00

e24aleli commented

2026-05-15 12:52:54 +00:00

Collaborator

Solution

I installed the playwright package, using npm init playwright@latest.
Then ran the setup (we should add this to the installaation scripts).
In the newly created folder "tests" you can make your own tests in js i made a simple responsive check that gives the results in the screenshot.

After running the local host, open a new terminal and run npx run test:"name".

I have not encountered that you need to change anything in the config file yet except if you like me have it so the localhost opens up on another port. You need to write the exact port in the config.

Added tests to the scripts block in the package file.

Extra

We should create new issues if wwe want other tests or more complex tests.

# Solution I installed the playwright package, using npm init playwright@latest. Then ran the setup (we should add this to the installaation scripts). In the newly created folder "tests" you can make your own tests in js i made a simple responsive check that gives the results in the screenshot. After running the local host, open a new terminal and run npx run test:"name". I have not encountered that you need to change anything in the config file yet except if you like me have it so the localhost opens up on another port. You need to write the exact port in the config. Added tests to the scripts block in the package file. - - - ## Extra We should create new issues if wwe want other tests or more complex tests. ![bild](/attachments/ca95ad8e-bfb0-49b1-be97-fab73d82749c)

bild.png

45 KiB

e24aleli added the

needs review

label

2026-05-15 12:53:02 +00:00

a24sakma commented

2026-05-15 12:56:56 +00:00

Author

Collaborator

I will check it on Monday. We need to make sure the package gets installed when using the scripts building.