loki chromeSelector unable to select useful content

I'm unable to get useful screenshots so far with Loki. I think my issue relates to the chromeSelector.

Using the default "chromeSelector": "#root > *", I get this error on all stories:

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

I also get the same error with body > #root > * and .sb-show-main #root > *

With .sb-show-main > * or body > div > * I get this error on all stories:

Failed with "Selector "body > div > * has zero width or height. Can't capture screenshot." after 4 tries

And with "chromeSelector": ".sb-show-main" all the tests pass, but all of the screenshots are blank.

I've read through this issue https://github.com/oblador/loki/issues/104, but the issue seems different, since I can't get it to work with the default chromeSelector.

I'm using an M1, for what it's worth

Sep 23 '22 14:09 DaveSauce

I'm unable to get useful screenshots so far with Loki. I think my issue relates to the chromeSelector.

Using the default "chromeSelector": "#root > *", I get this error on all stories:

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

I also get the same error with body > #root > * and .sb-show-main #root > *

With .sb-show-main > * or body > div > * I get this error on all stories:

Failed with "Selector "body > div > * has zero width or height. Can't capture screenshot." after 4 tries

And with "chromeSelector": ".sb-show-main" all the tests pass, but all of the screenshots are blank.

I've read through this issue #104, but the issue seems different, since I can't get it to work with the default chromeSelector.

I'm using an M1, for what it's worth

Did you manage to solve this problem?

Nov 06 '22 11:11 Fing0r

I managed to solve the problem of adding to config chromeSelector.

The problem arose after I added createPortal to the project and created another div for it in index.html

<body>
  <div id="root"></div>
  <div id="modal"></div>
</body>

As a result, when running the test, an error occurred when creating a screenshot for the modal. Also the test gave an error in my CI

My config now looks like this and everything works

  "loki": {
    "chromeSelector": "body > *",
    "configurations": {
      ...
    }
  }

I replaced the default #root > * to body > *

Jun 15 '23 18:06 SergeyKazarinov

also this problem can occur if your component does not have a specific height value. In my case, the error also disappeared when I added CSS property height: 100vh to the <Modal /> and <Loader /> component

Jun 16 '23 10:06 SergeyKazarinov

Had the same problem and figured out that I had animations set and the initial state was display: none

Nov 21 '23 12:11 Donkfather