tests/end-to-end-test-for-report-submission-using-playwright-in-ci

[wssheldon]

Tests work great locally, need to brainstorm how to fully automate authentication in CI, and how to run the development server in CI on GH Actions.

I recreated the bug where the "Load More" button did not appear for the Project select button, introduced here. The test will check for the "Load More" text and fail if it can't be found after selecting the Type button, this failed as expected:

    // check that the 'Load More' selector is available upon opening the Type dropdown
    await expect(
      page.getByText("Load More"),
      "The 'Load More' selector should be visibile."
    ).toBeVisible()

Error: The 'Load More' selector should be visibile.

Call log:
  - expect.toBeVisible with timeout 10000ms
  - waiting for getByText('Load More')
  -   unexpected value "hidden"

  35 |       page.getByText("Load More"),
  36 |       "The 'Load More' selector should be visibile."
> 37 |     ).toBeVisible()
     |       ^
  38 |
  39 |     await page.getByText(type, { exact: true }).click()

    at /Users/wshel/Projects/dispatch/tests/e2e/report-submission.spec.ts:37:7

[kevgliss]

I think you should be able to run these via a github action:

jobs:
  tests_e2e:
    name: Run end-to-end tests
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - name: Install dependencies
        run: npm ci
      - name: Install playwright browsers
        run: npx playwright install --with-deps
      - name: Run tests
        run: npx playwright test

Authentication wise we should be able to leverage basic auth with the default user.

[wssheldon]

I think you should be able to run these via a github action:

I think I'll need to use the .devcontainer to be able to run dispatch server develop

[wssheldon]

We might want to extend this test to validate the submission report card has not regressed in anyway. This pattern will probably come up a lot and it feels very verbose and maybe flakey to do it this way. Maybe a todo could be to investigate using something like this: https://www.thoughtworks.com/en-us/radar/techniques/component-visual-regression-testing

[wssheldon]

https://www.chromatic.com/

[wssheldon]

Not sure why that changed