Migration from storycap@5.0.1 to @storycap-testrun/browser issues

[Dexmaster]

Storycap and reg-suit are great, but storycap wasn't updated in a while and storybook@10+ needs a few hoops to make it work with storycap@5 so I decided to investigate this new module. And found out a few issues doing so, most of which occur from the box.

I've tested on v10-react-vite example from this repo and all issues are reproducible here too. If there is better place for reporting these issues I can post them there.

• 1. viewport for screenshots is never changed and just scaled to down to around width 1280px and 720px, if you change viewport in examples\v10-react-vite\.storybook\vitest.setup.ts to any number bigger than these you will have proportional screenshot but scaled down to 1280x720px *(I found mittigation on how to increase it a bit with playwright provider called as function and providing options, but without browser commands viewport is never changed through page.viewport()

provider: playwright({contextOptions: {
   viewport: { width: 1920, height: 1080 },
})

• 1b. If you do really big page it will allow height larger that 720 but scale down width even more;

• 1c. the fullPage: false option is not working;

• 2. screenshot method is flawed, if you have any section of page that uses 100vh you will never see next section on screenshot:

<section style={{ height: "100vh", background: "red" }}>
        Hello Section1
</section>
<section style={{ height: "100vh", background: "green" }}>
        Hello Section2
</section>

• 3. if you want to do any computation or logic in vite.setup.ts script afterEach() you need to add browser Commands to get playwright context and get/set viewport, but it still doesn't fix issue 2. Same with evaluate and querySelector logic needing browser commands and not being accessible by default...

• 4. createBrowserScreenshotAdapter has really limited context logic, so If I want to configure my screenshot naming logic in vite.config.ts storycap({ file: (ctx) => ... }) function, I don't have any useful information for file name processing, story context, width/height, viewport type, additional story info ... anything. It's mapping is cleaned to three fields before we receive it. So only reasonable way I found to pass params was to change story.storyName/task.name before any screenshot call.

P.S.
I understand some of the quirks could be vitest and storybook related but at least a few are just configuration/adapter logic issues... If you need I can create 1 ticket per issue so it's easier to track.

P.P.S. I believe these are the biggest issues I found. Hope examples help, if you need better repro steps I can provide those.

[Dexmaster]

I've created Task list so they could be easily converted to issues.

[wadackel]

Hi, @Dexmaster 🐶
I apologize for the delay in getting back to you.

I have addressed the issue in #248, and the fullPage problem should now be resolved. Please check it out in v2.1.0.

Regarding the point about the context being insufficient, this has not been addressed yet. If possible, I would appreciate it if you could provide more details on the ideal behavior.