51. Skip to content

51. End to end test

GeoSight implements end-to-end testing to ensure the frontend functions correctly. For this purpose, we utilize Playwright.

The Playwright tests can be found in the playwright/ci-test folder.

51.1 How to run end to end test

51.1.1 Prerequisites

  1. To ensure the end-to-end tests are functioning properly, you must run the development server. For setup instructions, please refer to GeoSight Developer Guide.
  2. You must have the correct database configuration. This involves deleting the current database and loading the appropriate fixtures.
  3. Navigate to the playwright/ci-test directory to access the tests. Inside, you will find multiple folders.
  4. To identify the database used for each folder, consult the README file located within the respective folder.

51.1.2 How to Run

  1. Navigate to the playwright/ci-test directory.
  2. Check the README inside the folder to understand the purpose of the tests.
  3. After selecting the correct folder and ensuring the correct database:
  4. Run npm install
  5. Run npm ci
  6. Run npx playwright install --with-deps
  7. Execute the tests with npx playwright test {targeted folder} (e.g., npx playwright test tests/project_creation)
  8. Wait until the tests are completed.

51.1.3 How to Run in UI Mode

  • You can run the tests in UI mode to view each step and see images of each step.
  • To do this, run npx playwright test --ui.
  • This will display the UI mode interface as shown below:

image.png

  • Hovering over a folder allows you to click the play button for a specific folder or individual test.

51.1.4 How to Add a New Test

  1. Check an Existing Test File:
  2. Review one of the existing .ts files inside the respective folder to understand the structure and flow.

  3. Create a New Test File:

  4. Copy the structure from an existing .ts file and create a new .ts file inside the respective folder for the new test.

51.1.5 If You Think the New Test May Affect Other Tests

  1. Create a New Folder:
  2. If you believe that the new test could potentially impact the other tests, create a new folder for it.

  3. Add Fixtures:

  4. Inside the new folder, create a README.md file and specify the correct fixture for the tests.

  5. Update the CI Configuration:

  6. After setting up the new test folder and fixture, go to .github/workflows/tests.yaml.
  7. On line 98, find the test_suite list.
  8. Add a new element to the list, for example:

    { name: "E2E Tests: Admin New Test", path: "tests/new_test", workers: 3, script_load: "make load-test-data" }
    
  9. Push to GitHub:

  10. Push the changes to GitHub and create a pull request.

  11. Wait for the GitHub Workflow:

  12. Once the pull request is created, wait for the GitHub workflow to pick up the new tests and run them.