argos screenshots test became flaky in 3.1.1

[axel7083]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

We noticed in our repository that migrating to 3.1.1 leads to issue in argos, we are suspecting the following PR to have started the issue #9470

It introduced the decoding="async" inside MDXComponents/Img/index.tsx for the img element.

Reproducible demo

No response

Steps to reproduce

See https://app.argos-ci.com/meta-open-source/docusaurus/builds/450/73270142

Expected behavior

Images should always be displayed

Actual behavior

Some images are not loaded

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.

[slorber]

Thanks

Yes, I noticed the same on our own Argos tests, and not sure what to do about it yet.

It seems like we want to keep this change, but at the same time we want reliable visual tests.

Any idea @gregberge how to wait for <img decoding="async"/> in Argos?

Maybe the solution should be directly in your Playwright integration package?