bug: Cannot create a screenshot of a hover state in e2e test

[borisdiakur]

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).

[rwaskiewicz]

👋 Thanks for the reproduction case, they greatly help looking at issues! I took a look, and there seems to be a timing issue of sorts here. I can reproduce the issue, but only some of the time (with a machine that has very similar specs to your's). I'm going to label this issue to get it ingested into our internal backlog for the team to take a further look.

For what it's worth, I had a harder time reproducing this when I made the following change to
my-component.e2e.ts:

  it('has a hover state', async () => {
    const page = await newE2EPage();

    await page.setContent('<my-component></my-component>');
    await page.hover('my-component')
-   await page.waitForTimeout(1000)
    const results = await page.compareScreenshot()
    await page.waitForTimeout(3000)
    expect(results).toMatchScreenshot()
  });

But I understand this is just your reproduction case and is probably simpler than the one you're working in (and that 'fix' may not apply)

[johnjenkins]

I managed to monkey patch the screenshot method

const screenshot = page.screenshot;
page.screenshot = async function () {
    return screenshot.call(page, {
      captureBeyondViewport: false,
    });
};

When I setup my tests. That fixes it for me

[borisdiakur]

Thank you @johnjenkins 🙏
I can confirm that the monkey patch helps fixing the issue.

[ryuran]

Thanks @johnjenkins it unlocks my team.
Typescript version we use:

const screenshot = (page as E2EPageInternal).screenshot;
(page as E2EPageInternal).screenshot = function () {
  return screenshot.call(page, { captureBeyondViewport: false });
};

[tanner-reits]

This was included in today's v4.19.0 release!