Help on running loki with Vue

[SSoBad]

Hi,

I can't find any Vue settings example here, only this issue and another issue.

I have dockerized storybook (node:16.14.0-alpine image) app running on storybook.domain host, port 1029. So point #2 from loki manual was satisfied, right?

My package.json with loki settings inside is on pastebin.

I tried to create reference images (point #3),
connecting from my host to http://storybook.domain:1029:

nvm use 16.14.0
npx loki update --host storybook.domain --port 1029 --chromeLoadTimeout 60000

No luck (log on pastebin): ./.loki/reference folder is empty, and I see connection errors. This host and URL is accessible from the browser, and I don't see any performance issues (docker is limited for 4CPU cores of Xeon Gold, no memory limitations).

Btw, why 10000ms in the log while I set 60000?

Building was successful: at least npm run build-storybook command generates a lot of files in ./storybook-static
folder (log on pastebin). But I can't generate images neither in reference, nor current folders.

Other tries and logs:

1. npx loki test (log on pastebin):

   npx loki test --reactUri file:./storybook-static --chromeFlags='--headless --disable-gpu --hide-scrollbars \
     --no-sandbox' --requireReference --verboseRenderer

2. npx loki as described in the issue link above (log on pastebin):

   npx loki --requireReference --reactUri file:./storybook-static

3. npx loki test with host and port (pastebin):

   npx loki test --host storybook.domain --port 1029

What am I doing wrong?

Can you please help to write valid steps to generate images for a Vue framework? Thanks for any info in advance.

[SSoBad]

Well, we resolved this issue adding a correct decorator:
"chromeSelector": "#storybook-root > *", instead of "chromeSelector": ".wrapper > *, #root > *, .story-decorator > *". May be someone need this info.