I can see the docs now suggest using the specific chromatic-playwright package. After trying it out now we run into two issues:
Viewport is off
It seems the viewport is not being set correctly. I've noticed that instead of the iframe being rendered as the contents of the story, it's the actual DOM now being shown, which is great, but perhaps that's why some of the viewport configuration is missing ? The following screenshot shows an example of the difference via Chromatic's UI review, where it highlights that the sticky styling gets confused for some reason.
Cannot read properties of undefined (reading 'type')
We get an error in one of our tests:
TypeError: Cannot read properties of undefined (reading 'type')
at buildNode (https://64e8880785df0a2b1b8a14a5-omnytggxwt.capture-loopback.chromatic.com/821.b9365761.iframe.bundle.js:403:10611)
at buildNodeWithSN (https://64e8880785df0a2b1b8a14a5-omnytggxwt.capture-loopback.chromatic.com/821.b9365761.iframe.bundle.js:403:14318)
at rebuild (https://64e8880785df0a2b1b8a14a5-omnytggxwt.capture-loopback.chromatic.com/821.b9365761.iframe.bundle.js:403:15593)
at renderToCanvas (https://64e8880785df0a2b1b8a14a5-omnytggxwt.capture-loopback.chromatic.com/821.b9365761.iframe.bundle.js:403:16719)
at async https://64e8880785df0a2b1b8a14a5-omnytggxwt.capture-loopback.chromatic.com/sb-preview/runtime.js:118:2985
at async StoryRender.runPhase (https://64e8880785df0a2b1b8a14a5-omnytggxwt.capture-loopback.chromatic.com/sb-preview/runtime.js:118:912)
at async StoryRender.render (https://64e8880785df0a2b1b8a14a5-omnytggxwt.capture-loopback.chromatic.com/sb-preview/runtime.js:118:2918)
Running it several times seems to reveal that it's always the same test that has the issue. However, I cannot see anything we might be doing differently from other tests, which seem to run fine (apart from the viewport issues).
Hey guys.
I can see the docs now suggest using the specific
chromatic-playwrightpackage. After trying it out now we run into two issues:Viewport is off
It seems the viewport is not being set correctly. I've noticed that instead of the iframe being rendered as the contents of the story, it's the actual DOM now being shown, which is great, but perhaps that's why some of the viewport configuration is missing ? The following screenshot shows an example of the difference via Chromatic's UI review, where it highlights that the sticky styling gets confused for some reason.
Cannot read properties of undefined (reading 'type')
We get an error in one of our tests:
Running it several times seems to reveal that it's always the same test that has the issue. However, I cannot see anything we might be doing differently from other tests, which seem to run fine (apart from the viewport issues).
Thanks in advance.