Critical path flow descriptions for e2e testing

[sarayourfriend]

Due date: 2022-04-13

Assigned reviewers

• [ ] @obulat
• [ ] @krysal

Description

Snapshots should be taken at the "landing" (final-ish) parts of the flow. A leading ! indicates these steps in the flow for each path.

Homepage to related single result

This path implicitly includes search-to-result

Happiest path (multiple pages of results)

I like the "birds" results because the pictures are pleasant AND the audio results are not just dogs barking, but feel free to replace/supplement with the "dogs", "cats" etc searches we love as well. Variety can only help!

Definitions

These could probably be adopted as navigation helpers/utilities

• go-to-search(term: string, type?: 'image' | 'audio'):
  1. /
  2. /search?q={term}
  3. type && /search/{type}?q={term}

All results

1. go-to-search term: 'birds'
2. ! /{image,audio}/:uuid
3. ! /{image,audio}/:uuid (related result)

Image - via in-result content type switcher

1. go-to-search term: 'birds' type: 'image'
2. ! /image/:uuid
3. ! /image/:uuid (related result)

Image - via header search type switcher

1. go-to-search term: 'birds' type: 'image'
2. ! /image/:uuid
3. ! /image/:uuid (related result)

Audio - via in-result content type switcher

1. go-to-search term: 'birds' type: 'audio'
2. ! /audio/:uuid
3. ! /audio/:uuid

Audio - via header search type switcher

1. go-to-search term: 'birds' type: 'audio'
2. ! /audio/:uuid
3. ! /audio/:uuid

Variants of the above

For each of these, snapshot the last page of the flow, make sure to do "full page" screenshots.

1. Single page of results (snapshot results page)
2. No related results (is this possible?)
3. Click load more on multiple pages of results and select a result from the new results (snapshot results after clicking load more)
4. Same as 3 but select a result from the first page of results
5. No results (snapshot results page)
6. All of the above (including the happiest path) but get there using filters (snapshot the page with the filters open?)
   1. Variation of this is to apply a filter from each category for a search term we know will have
7. All of the above but throw a refresh in the flow
   1. For example, refresh after the result is selected then hit the back button to the search page
8. All of the above but also hit the back button from the related result all the way back to the search results page AND select another result
9. All of the above but cut out earlier steps in the flow so that the "start" of the flow is in the middle of the top-to-bottom "full flow" (i.e., landing directly on a search results page or directly on a single result and navigating to a related result, etc).

[sarayourfriend]

Note that parts of the flow are already covered (we have tests from homepage to results page for example). We just want to augment the existing tests with end-to-end user flow tests.

[sarayourfriend]

@WordPress/openverse-maintainers please review this RFC/proposal :pray: It totally fell off my radar.

[obulat]

For each of these, snapshot the last page of the flow, make sure to do "full page" screenshots.

Would this mean that these tests are visual-regression tests, not e2e tests in our terminology, @sarayourfriend?

[sarayourfriend]

I guess they'd be doing both. I'm not totally sure if it makes sense to separate them for these "long flow" type tests because we'd want to confirm they work in the contexts of a user actually going through the core flows.

On the other hand, we would need to have some way to disable them when testing against staging otherwise the visual regression tests will end up needing to somehow ignore differences between the tape data and production data. That's an issue we don't need to solve now though.

Do you think there's a good reason to separate these particular snapshots out into their own tests (that still preserves their ability to test the visual results of full user flows)? Right now our visual regression tests run at the same time as the other e2e tests. I'm not totally sure the distinction is that important. What do you think?