Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.12.0

Current Behavior

It seems impossible to create a screenshot of a hover state in e2e tests. As soon as the screenshot is made the hover state is unset.

Expected Behavior

I should be able to hover a component in a e2e test and create a screenshot of the hovered component.

Steps to Reproduce

1. Clone https://github.com/borisdiakur/mwe-stencil-screenshot-hover-issue
2. Install dependencies
3. Run stencil test --e2e --screenshot
4. Observe in chromium how the hover state is unset as soon as the screenshot is being made
5. Check the created image files in the screenshot directory (component should be red, but it's green)

Code Reproduction URL

https://github.com/borisdiakur/mwe-stencil-screenshot-hover-issue

Additional Information

Environment:

• @stencil/core: ^2.12.0
• node: v17.2.0
• OS: macOS Monterey 12.0.1
• Chip: Apple M1 Max

This issue is related to #3145
When I add captureBeyondViewport: false to the createPuppeteerScreenshopOptions in node_modules/@stencil/core/testing/index.js the screenshot does not change the hover state of the component (it is still red).