Storybook extension/query through iframe support

[lexanth]

Summary 💡

I've mainly come across this tool through the chrome extension, which is great!

It would be even better if it could support being used against storybook - our stories often match the components we're trying to render in unit tests, so it would hopefully be able to suggest very relevant selectors.

I suspect the issue is because storybook embeds the actual story (which is what I want to look at) in an iframe?

One option would be to build a storybook extension (although doing the selector mode from the chrome extension might be hard). Another would be to allow the root document to be specified for the chrome extension (e.g. I could set it to #storybook-preview-iframe and it would then run queries etc inside the storybook preview).

Examples 🌈

https://next--storybookjs.netlify.app/official-storybook/?path=/story/addons-a11y-basebutton--label is one of storybook's examples - with the chrome extension, you can't find anything inside the storybook preview.

Motivation 🔦

Our stories often match the components we're trying to render in unit tests, so it would hopefully be able to suggest very relevant selectors.

[melanieseltzer]

Helpful workaround in the meantime that I just learned - you can append iframe.html into the URL (right before the ?) to navigate to the actual iFrame, where this extension will be able to pick things up 🙂

Using the example link: https://next--storybookjs.netlify.app/official-storybook/iframe.html?path=/story/addons-a11y-basebutton--label

[eric-burel]

Hi, it would be great to autodetect a few typical frameworks (something that stays maintainable) when an iframe is present, and consider the "screen" to be this iframe and not the whole screen. This mode could be optional (like if you are a developer of Storybook itself you might want to actually get the selector for the Storybook UI :)).

What would be required to consider an iframe as the "screen" on a technical standpoint? I could try to get help for crafting a PR.

I've raised attention to this point at Storybook, because the new testing capabilities of Storybook will make this use case more and more relevant in the incoming releases.

I haven't found much doc about testing an iframe either (only this ticket for Enzyme https://stackoverflow.com/questions/41447842/test-the-content-of-an-iframe-in-a-react-component-with-enzyme)

In the meantime much thanks for the workaround @melanieseltzer

[smeijer]

I don't think we need to support a few typical frameworks. What we need to support is the following:

• support selecting and querying inside iframes
• support setting an iframe as "base frame" (so that is seen as the root)

That would add support to frameworks like Cypress and Storybook out of the box.

[smeijer]

Unfortunately, I've been short on time lately. So if anyone is willing to take a stab at that, please do.

[jeremyzilar]

Being able to reference elements in an iframe would be amazing. In addition to storybook, we'd use it for Stripe payment forms.

[ughitsaaron]

Helpful workaround in the meantime that I just learned - you can append iframe.html into the URL (right before the ?) to navigate to the actual iFrame, where this extension will be able to pick things up 🙂

@melanieseltzer Thank you for sharing this! This is a great workaround.