bug: cannot override/set EmulateViewport width for e2e tests

[jongirard]

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

Current Behavior

Currently, setting the height/width of the viewport object inside emulate within the stencil.config.ts testing object has no effect. According to the stencil config docs, this is a valid config object property.

This manifests itself within e2e tests that make use of differing viewport sizes style wise (ie; desktop specific content with min-width breakpoints larger than 800px which appears to be the default browser width in puppeteer/stencil config).

Expected Behavior

emulate object and viewport specific attributes should be set/overridden as expected.

Example:

testing: {
    browserHeadless: "new",
    emulate: [
      {
        viewport: {
          width: 1250,
          height: 600,
        },
      }
    ]
  },

System Info

System: node 18.16.0
    Platform: darwin (21.2.0)
   CPU Model: Apple M1 Max (10 cpus)
    Compiler: /Users/jongirard/bug-demo/node_modules/@stencil/core/compiler/stencil.js
       Build: 1687953951
     Stencil: 4.0.1 ⛹
  TypeScript: 5.0.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.18.1

Steps to Reproduce

Please clone demo/bug specific repository at: https://github.com/jongirard/stencil-emulate-viewport-bug.

1. yarn install
2. yarn test --e2e

Expect for the "can click the desktop content" test to fail erroneously due to viewport width settings not being respected/set correctly.

Code Reproduction URL

https://github.com/jongirard/stencil-emulate-viewport-bug

Additional Information

No response

[tanner-reits]

Hey @jongirard 👋

Thanks for reporting this problem! I was able to reproduce your issue (thank you for providing a reproduction repo), and dig into what is happening a bit. Unfortunately, our documentation and implementation are a bit misleading at the moment and the emulate array on the Stencil config only gets consumed and provided to the E2E tests when using Stencil's screenshot tests 😕

Obviously, this is very unclear and, in my opinion, not the ideal scenario. So, I'm drawing up some paths forward and will bring them to the team ASAP so we can work on getting a better implementation for emulating in E2E tests.

In the meantime, I'll get this issue labeled to be addressed and we'll update this issue once we have something to share.

Thanks for your patience!

[jongirard]

Thanks @tanner-reits, appreciate your attention to this matter and looking forward to soonest possible resolution. We have a lot of mobile/desktop specific e2e tests with individual UI/UX concerns so the ability to test with varying viewport width is of very high importance.

As a bonus, having the ability to update the viewport sizing in a beforeEach block within the context of a test would be super ideal.

[tanner-reits]

This was resolved in Stencil v4.0.3. Please re-open this issue if you are still experiencing issues after updating.

[mlechler]

Hi @tanner-reits, so far we have used the emulate array of the stencil.config.ts to test each screenshot test in four different viewports.
What is the current approach for doing something like this? Setting the viewport in each test manually is clear, but how can I dynamically access the 4 defined viewports? Is there a method/variable to read the stencil.config.ts?