bug: emulate.viewport crops the screenshot in E2E Screenshot tests

[mlechler]

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

4.13.0

Current Behavior

When using the emulate.viewport in the stencil.config.ts the produced screenshot is just cropped to the sizes.

Looks like this (see the background color, which exceeds the screenshot border):

Expected Behavior

I would expect, that the size of the screenshot is adapted, so we can test different device sizes. In an earlier version this was exactly the behaviour.

Should look like this:

System Info

System: node 20.11.0
    Platform: darwin (23.4.0)
   CPU Model: Apple M1 Pro (10 cpus)
    Compiler: /node_modules/@stencil/core/compiler/stencil.js
       Build: 1710782619
     Stencil: 4.13.0 🚞
  TypeScript: 5.4.2
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.29.2

Steps to Reproduce

Run npm run test.screenshot in the test repo.
Check the produced screenshots.

Code Reproduction URL

https://github.com/mlechler/stencil-e2e-test-bug

Additional Information

No response

[tanner-reits]

Hello again @mlechler 👋

Thanks for reporting the issue. Unfortunately, the team doesn't have capacity to focus on screenshot testing issues at the moment. Stencil's screenshot testing functionality is considered an experimental feature, so having someone look into this may not happen for a while (or at all frankly).

However, we welcome any community contributions! If you'd like to take a stab at fixing this, someone on the team would be happy to review your changes.

We appreciate your understanding!

[mlechler]

@alicewriteswrongs @rwaskiewicz @tanner-reits
Is there any timeline for this issue?

[christian-bromann]

@mlechler the Stencil team has decided to discontinue the screenshot testing feature in favor of screenshot testing capabilities of other more established tools like WebdriverIO or Playwright. Moving forward we are looking into making Stencil lighter to keep it maintainable. Testing is one of the areas where we believe other tools do much better and should be the choice when testing Stencil components.

I am happy to assist with transitioning to e.g. WebdriverIO which provides similar component / unit testing capabilities as the current stencil test feature.

I will go ahead and close the issue.