visual-regression/v-header-internal.spec.ts:36:11 › VHeaderInternal › screen at breakpoint xs with width 340 › mobile-header-internal-modal-ltr is flaky

[sarayourfriend]

Description

visual-regression/v-header-internal.spec.ts:36:11 › VHeaderInternal › screen at breakpoint xs with width 340 › mobile-header-internal-modal-ltr is flaky.

It fails in this run: https://github.com/WordPress/openverse/actions/runs/7699638405/job/20981848020

And passes in this run: https://github.com/WordPress/openverse/actions/runs/7699638405/job/20983730568

[sarayourfriend]

I had this fail again in another PR and remembered to grab the test results artefact.

It looks like the same font rendering issue that @obulat fixed in the other playwright tests. I bet #3713 is too?

storybook_test_results.zip

[obulat]

Yes, @sarayourfriend, this does look like a font rendering issue. We should probably add a wait to this test.

[sarayourfriend]

How does that work, Olga? Is there an example to go off of in the repo for how we've done it before?

[obulat]

How does that work, Olga? Is there an example to go off of in the repo for how we've done it before?

I meant adding await sleep(500), @sarayourfriend, as I did in #3759. This is not ideal, but there is no event we can use to check if the fonts loaded.

Edited to add: Now that I think of it, we can detect a request for fonts. But this only works for the internal header pages modal. The other test does not send a font request, and since there is no trace file, I can't say what's wrong with it. Hope additional sleep can help.