Test Plan

Cypress Tests

• Login and register tests
• Test the admin panel features
• Error handling tests
• Test the settings and the background colour with it

Component Tests

• Update Admin Table and Blocks Table tests to test the CRUD functions when implemented
• Add the User Table test and test the CRUD functions and rendering
• Test the offline mode for sensors renders
• Test the last 24 hours button
• Test the login and logout features

Selenium Tests

• Test routes
• Test login and logout

Pros and Cons of Selenium as an Automation Testing tool | GeeksforGeeks

Cypress vs Selenium: Key Differences | BrowserStack

Selenium is especially useful for regression testing—making sure new code doesn't break existing features
It's also free to use and has a large community—lots of plugins, integrations (e.g., CI/CD tools), and help available

Manual Testing

• Perform manual testing to ensure all features function as expected
• Verify UI elements, data rendering, and interactions
• Check for any unexpected behavior not covered by automated tests

User Tests

• Give the application to the user and observe and analyze their behavior to improve application
• Test if the user can go to and see the last week of a specific sensor

Manual Website Testing Checklist

1. Functionality Testing

• Verify all links (internal and external) work correctly.
• Check login/logout workflows.
• Confirm that buttons and controls perform their intended actions.

2. UI/UX Testing

• Check page layouts on different screen sizes (responsive design).
• Verify that fonts, colors, and styles are consistent.
• Test navigation menus.
• Ensure images and icons load correctly and are clear.
• Check that text content is readable and free of typos.

3. Performance Testing

• Load pages and observe if they load quickly.
• Navigate through the website to check for any slow responses.
• Test the website under different network speeds if possible.

4. Compatibility Testing

• Test the website on multiple browsers (Chrome, Firefox, Safari, Edge).
• Test on different devices (desktop, tablet, mobile).
• Verify cross-browser consistency in layout and functionality.

5. Security Testing

• Test that user authentication is working properly.
• Check for proper session management (e.g., session expires after logout).
• Verify that sensitive data is not exposed (e.g., passwords, personal info).

6. Error Handling

• Check how the site handles invalid inputs or missing fields.
• Verify user-friendly error messages are displayed.
• Test how the website handles broken links or server errors.

7. Accessibility Testing

• Check if the website can be navigated using a keyboard.
• Verify that images have descriptive alt texts.
• Test color contrast to ensure readability for visually impaired users.

How to run tests

Cypress

To run the Cypress tests, follow the backend documentation project setup here

https://github.com/OtagoPolytechnic/Air-Quality-Monitoring-System/wiki/Backend-Documentation

Until the seed then enter

npm run seed:cypress

Follow the rest of the backend documentation setup

Then in the frontend enter

npx cypress open

Local

To run the tests, you will need to make sure you are in the frontend folder if you are not then run the command cd frontend. Once in the frontend you will need to run

npm run test

to run all the local tests

Selenium

In order to run the selenium tests change to branch selenium-tests the close the IDE.

Go into the repo then the 'frontend' folder

From here click into the 'Air Quality Monitoring Tests' folder, locate the Air-Quality-Monitoring-System-Tests.csproj and open with Visual Studio

Find the test that you want to run and right click on the Test Method code block as indicated below select 'Run Test' from the menu

Once the test has been run, you can see the results in 'Test Explorer'

If you don't see 'Test Explorer' it can be opened by going to 'Test' from the menu then clicking 'Test Explorer'