UI-Testing

[williamw04]

Description

To improve site stability and catch potential issues, our team (@aravindb24, @shankarp05, and I) worked on adding end-to-end (e2e) UI testing to the test suite. Testing the layout, dynamic values, and page behavior helps ensure that contributions do not unintentionally break the site.

We developed a UI Testing Documentation to provide guidance and address common issues, making it easier for others to learn and gain hands-on experience with UI testing.

For UI and UX testing, we leveraged Cypress as our primary framework. To ensure consistent test results across environments, we containerized the testing environment using Docker.

Areas for Future Improvement

There are still areas that need further attention, such as testing Redux state. Please refer to the Limitations section of the documentation for more details.

Testing Progress

Shankar

• hideOptions – Testing options dropdown functionality
• initLangTest – Language feature (Spanish only)
• pagesGroups – Group page dropdown functionality
• pagesMeters – Meters dropdown functionality
• tooltipIcon – Tooltip attribute test

Aravind

• general_ui – General homepage testing (visibility of elements and layout)

William

• line – Testing line graph meters and group combinations (in progress)

Additional Files

• docker-compose.yml
• cypress.config.ts – Configures Cypress (test locations, support files, screenshot directories)
• support/commands.ts – (Currently not utilized)
• support/e2e.ts – Imports commands.js

Type of change

• Note merging this changes the database configuration.
• This change requires a documentation update

Checklist

• I have followed the OED pull request ideas
• I have removed text in ( ) from the issue request
• You acknowledge that every person contributing to this work has signed the OED Contributing License Agreement and each author is listed in the Description section.

Limitations

There are TODOs in the code and the design document about remaining items. This is a demonstration of UI testing and not complete.

[huss]

Thanks to @williamw04, @aravindb24 & @shankarp05 for this PR. I've made a few comments to consider but nothing substantial. One question is that when I tried to use this I got an error:

docker compose --profile ui-testing up
I got the error ``dependency failed to start: container oed-web-1 has no healthcheck configured``.

Does this happen for you? I wanted to try it and update the design doc with any changes for this PR so am curious how to get it to run properly.

[williamw04]

Thanks to @williamw04, @aravindb24 & @shankarp05 for this PR. I've made a few comments to consider but nothing substantial. One question is that when I tried to use this I got an error:

docker compose --profile ui-testing up
I got the error ``dependency failed to start: container oed-web-1 has no health check configured``.

Does this happen for you? I wanted to try it and update the design doc with any changes for this PR so am curious how to get it to run properly.

The error arises from there beingno health check defined in the web service.

In the cypress service section, a "depends on web" is defined means the container depends/relies on the web to be running properly (have a healthy status so the healthcheck is the dependency that should have been started but was not sorry error). This is checked through health checks which was not previously defined. So moving forward if you were to define depend on you would have to have a defined health check in the service that is being depended upon.

Now with this being said the web service depends on the database so a health check must also be defined in the service.

The issue is health checks would happen in running OED normally (docker compose up) which might be an undesired feature. The solution is to remove the health checks.

[huss]

The issue is health checks would happen in running OED normally (docker compose up) which might be an undesired feature. The solution is to remove the health checks.

I've tried and so far there is no issue. My recollection is that in the past the database check did not actually verify that the DB could accept request and only that it is running. The install script tries to check/correct for this. I've made myself a action item to look into this more in the future but it seems fine unless someone finds an issue.

[huss]

Thanks to @williamw04 for the updates. Given them and my changes it is looking good.

I do have an issue where several of the tests are failing. I've attached the terminal output. Do you ever see this? Any thoughts? I did try logging in as admin outside the testing (could only do if not running the special cypress startup) to see if that might be the cause but it did not seem to help.

cyprusFailures.txt

[williamw04]

Thanks to @williamw04 for the updates. Given them and my changes it is looking good.

I do have an issue where several of the tests are failing. I've attached the terminal output. Do you ever see this? Any thoughts? I did try logging in as admin outside the testing (could only do if not running the special cypress startup) to see if that might be the cause but it did not seem to help.

cyprusFailures.txt

For the general_ui.cy aravind said he was unable to get most of his test working.
For the line.cy test i think it only passes if you install the test data.

[williamw04]

The issue is health checks would happen in running OED normally (docker compose up) which might be an undesired feature. The solution is to remove the health checks.

I've tried and so far there is no issue. My recollection is that in the past the database check did not actually verify that the DB could accept request and only that it is running. The install script tries to check/correct for this. I've made myself a action item to look into this more in the future but it seems fine unless someone finds an issue.

I wasn't aware that there was already a database check prior, so with this in mind we could remove all the health checks and depends on from the docker yml file

[huss]

The issue is health checks would happen in running OED normally (docker compose up) which might be an undesired feature. The solution is to remove the health checks.

I've tried and so far there is no issue. My recollection is that in the past the database check did not actually verify that the DB could accept request and only that it is running. The install script tries to check/correct for this. I've made myself a action item to look into this more in the future but it seems fine unless someone finds an issue.

I wasn't aware that there was already a database check prior, so with this in mind we could remove all the health checks and depends on from the docker yml file

We decided to leave the check. It may be possible to remove the loop in the install script but that is future work.

[huss]

Thanks to @williamw04 for the updates. Given them and my changes it is looking good.
I do have an issue where several of the tests are failing. I've attached the terminal output. Do you ever see this? Any thoughts? I did try logging in as admin outside the testing (could only do if not running the special cypress startup) to see if that might be the cause but it did not seem to help.
cyprusFailures.txt

For the general_ui.cy aravind said he was unable to get most of his test working. For the line.cy test i think it only passes if you install the test data.

I've added a TODO and info in the design document about needing a clean DB. I also commented out the tests that were failing and left the one that works.

[huss]

Thanks to @williamw04 for continuing to work on this and resolving the comments. It is now working as desired at this time.