Script always fails with error "Storybook object not found on window. Open your storybook and check the console for errors."

[karrui]

When running my CLI command (regardless of config), the cli always hangs with the following output:

$ npm run test:a11y -- --headless false --browser firefox

> form-frontend@0.1.0 test:a11y /Users/karrui/Projects/FormSG/frontend
> axe-storybook "--headless" "false" "--browser" "firefox"

[firefox] accessibility
Error! The suite failed to run
An error was encountered before we started testing stories. Likely this means the browser failed to open.

Error: Storybook object not found on window. Open your storybook and check the console for errors.

0 passing (0ms)
1 failing
0 pending

[ahuth]

@karrui which version of Storybook are you using?

This doesn't yet support Storybook v6.4 (although I'm working on that).

[karrui]

which version of Storybook are you using?

Ah, I should have included that information. I'm using 6.3.12 right now. Seems like percy-storybook, a project this project seems to be based on has had a similar issue (percy/percy-storybook#230) if that helps

[karrui]

On further investigation, it may be due to the msw storybook addon, and it is intercepting the puppeteer requests, if that helps better debug this.

See mswjs/msw-storybook-addon#55

[ahuth]

Ah, gotcha, thanks for the info. That's super helpful. I'll look into what's going on there, and how we could prevent the msw addon from intercepting the requests.

What's interesting is my company uses MSW heavily but doesn't have any issues, although we don't use that addon.

[karrui]

Might have been a red herring; I've removed the decorator and it's still giving me the same error.

But it might have something to do with it; I was going down a different path with @storybook/addon-storyshots and it also did not work at the start. However, it works when I removed the msw decorator.

[ahuth]

One thing to help debug, @karrui:

Can you open the iframe.html that's produced as part of your static storybook build? When you do, do you see something like

Just want to see if Storybook itself is even loading (seems like it's not, but want to make sure).

[karrui]

Thanks for being so active in this issue!

That was one of the first things I checked; I do see that iframe.

[ahuth]

No prob.

I'll look into this some more, and try to reproduce with msw addon.

[ahuth]

@karrui I added msw and its addon to the demo in this repo, and wasn't able to reproduce.

Can you give me any info about what routes are being mocked by msw? Or is there any chance your work is in a repo/branch I can pull down and look at?

[karrui]

Actually, yes. The repo I'm working on is open source; you can find it here.

Ensure that you are on the form-v2/build/a11y-ci branch and pull away! I'm specifically only using it in the /frontend directory.

[ahuth]

Alright, fix coming in #45. Will let you know when it's published, and thanks for reporting the issue!

What's happening is:

• The axe-storybook is a node command that uses Playwright to get some information about the stories from a browser pointed at the static Storybook build.
• Getting that information out of the browser requires it to be JSON serializable.
• Some addon parameters (such as MSW's) aren't JSON serializable, causing undefined to be returned.

We can avoid that by only retrieving the information we know we need, instead of trying to get everything out of the browser.

[ahuth]

4.1.3 is released with the fix. @karrui when you get a chance, can you verify that it solves the issue for you? (It does in my testing on the repo)

[karrui]

Awesome, it works now. Once again, thanks for such a quick response!