Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Passing a storybook URL that contains a query string parameter fails #984

Open
josephluck opened this issue Dec 19, 2024 · 0 comments
Open

Comments

@josephluck
Copy link

Running storycap with a URL that contains a query parameter fails to load, for example:

npx storycap http://localhost:6006\?theme\=dark
info Wait for connecting storybook server http://localhost:6006?theme=dark.
info Executable Chromium path: <redacted>
error waiting for function failed: timeout 60000ms exceeded

It appears to be due to storycrawler assuming the URL doesn't contain query string parameters, i.e.:

https://github.com/reg-viz/storycap/blob/master/packages/storycrawler/src/browser/stories-browser.ts#L70

Where it attempts to visit this.connection.url + '/iframe.html?selectedKind=story-crawler-kind&selectedStory=story-crawler-story', which in the above example would resolve to 'http://localhost:6006?theme=dark/iframe.html?selectedKind=story-crawler-kind&selectedStory=story-crawler-story'

Expected outcome

Query parameters are present when storycap loads each story.

Why?

It's possible to initialise Storybook globals using query string parameters. This is useful for capturing multiple themes without needing to re-build Storybook, for example.

How?

Split this.connection.url in to hostname and search. Use hostname as the base URL (this.connection.url) and merge search (query string params) in to the ones that storycrawler adds.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant