loki: chromeSelector fails

I’m trying to make screenshot more specific. However if chromeSelector differs from #root > * - it doesn’t work

→ Failed with "Error: Unable to get position of selector "#root .SplitPane > *". Review the `chromeSelector` option and make sure your story doesn't crash." after 4 tries

    "chromeSelector": "#root .SplitPane > *",

Could someone share an example of specifying it right to component? (to iframe in an ideal case)

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (9 by maintainers)

Most upvoted comments

Hey @vvscode

Have you tried what the error message says? ...make sure your story doesn't crash."

What happens if you open Cards: AppointmentCard in Storybook? Does it render something?

Feel free to update the example repository with and example that fails I will take a look at it

techeverri on May 9, 2019

When I use a selector available from within the iframe

"loki": {
    "chromeSelector": ".uil-story-wrapper > *"
}

This seems to works as expected as described in the docs

~/Projects/chromeSelector-fails master* 8s
❯ yarn loki update
yarn run v1.7.0
$ /Users/tomas.echeverri/Projects/chromeSelector-fails/node_modules/.bin/loki update
loki update v0.13.0
 ✔ Chrome (docker)
✨  Done in 6.20s.

.loki/reference

chrome_laptop_Components_Atoms_Select.png
chrome_laptop_Components_Atoms_Spinner.png

techeverri on Sep 22, 2018

@vvscode seems the selector matches the Storybook left panel 🤔 Is this what you want to screenshot? 😕

techeverri on Sep 20, 2018

Hey @vvscode, sorry for the delay. I tried on my Windows 10 machine and couldn’t make docker work.

I’ll try today on a different macOS laptop.

techeverri on Sep 19, 2018