Support sub-folders for lost-pixel.config.js

[James Amner]

Mode

Page screenshots

Feature description

I have a mono-repo with a few sub-projects within it, and as a result my node project lives within it's own folder. This means my package.json and lostpixel.config.js files aren't in the root directory. I can't see any way I can configure the GitHub Actions to target the config file that exists in the subdirectory. Most steps in my action are helped by:

defaults:
      run:
        working-directory: ./path-to-node-project

Would be great if your actions supported this.

[Chris Kalmar]

Hey @jdamner,
it might be missing in our docs, but there's an env variable that you can use with the action to point Lost Pixel to the correct folder where it will find the config file: LOST_PIXEL_CONFIG_DIR

Please let me know if that helped.

Also, as you mentioned monorepos:
In case you have multiple frontends in your monorepo that you would like to test separately, we will be releasing our platform very soon. Not only will it fully support monorepos but it will also bring a very convenient workflow to your visual regression tests (including a UI to compare differences, full integration with Github, check statuses, cloud storage, and more).

[Matt Davidson]

Hey folks, I've ran into a similar issue as above. I tried using the the LOST_PIXEL_CONFIG_DIR env var, however it still fails with the following:

Version: 3.1.0
Loading project config ...
Current working directory: /github/workspace
Defined config directory: ./@app/client
Looking for config file: /github/workspace/@app/client/lostpixel.config.(ts|js|cjs|mjs)
✅ Found config file: /github/workspace/@app/client/lostpixel.config.ts
🚀 Starting Lost Pixel in 'generateOnly' mode
📂 Creating shot folders
📸 Creating shots
Removing 0 files from .lostpixel/current/
Removing 0 files from .lostpixel/difference/

=== [Storybook Mode] ./storybook-static ===

Trying to collect stories via window object
Fallback to /stories.json
❌ page.waitForFunction: Timeout 30000ms exceeded.
    at collectStoriesViaWindowApi (/lost-pixel/dist/crawler/storybook.js:33:16)
    at async collectStories (/lost-pixel/dist/crawler/storybook.js:127:[24](https://github.com/raviocom/web-application/actions/runs/4282356031/jobs/7456526331#step:6:25))
    at async createShots (/lost-pixel/dist/createShots.js:45:32)
    at async runner (/lost-pixel/dist/runner.js:24:[27](https://github.com/raviocom/web-application/actions/runs/4282356031/jobs/7456526331#step:6:28))
    at async /lost-pixel/dist/bin.js:42:13 {
  name: 'TimeoutError'
}
❌ Unexpected token < in JSON at position 0
Sending anonymized telemetry data.

We are using:

• Storybook 7.0.0-beta.52
• mono repo with pnpm v6

FWIW npx lost-pixel test works locally

[Dima Ivashchuk]

hey @matthewdavidson! let me help you out :D couple of questions that would assist me:

1. are you using platform version or OSS one(not app.lost-pixel.com)
2. could you show me your lostpixel.config.js|ts & your action declaration
3. if the project is OSS - would be way easier if you link me to the failed job :D

[Matt Davidson]

1. are you using platform version or OSS one(not app.lost-pixel.com)

I've started with the OSS version initially. I'm open to trying out the hosted version :D

2. could you show me your lostpixel.config.js|ts & your action declaration

import { CustomProjectConfig } from "lost-pixel";

export const config: CustomProjectConfig = {
  storybookShots: {
    storybookUrl: "./storybook-static",
  },
  generateOnly: true,
};

  visual-regression:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: ./.github/actions/setup-dependencies // this is a custom action which installs dependencies amongst other things
      - name: Build Storybook
        run: npm run build-storybook
      - name: Lost Pixel
        uses: lost-pixel/lost-pixel@v3.1.0
        env:
          LOST_PIXEL_CONFIG_DIR: "./@app/client"

3. if the project is OSS - would be way easier if you link me to the failed job :D

It's not OSS I'm afraid!

[Dima Ivashchuk]

mind jumping into our discord? we might have faster feedback loop there & I will set you up with hosted version in no time!

https://discord.gg/WqVjk49g9m

If we figure out the culprit there I will post the solution here as the followup for the community!

[Chris Kalmar]

@matthewdavidson The storybook build path is relative to the project root.
Just guessing now, as I don't now as I don't know where your build will be produced from npm run build-storybook, but could you try changing

storybookUrl: "./storybook-static",

to

storybookUrl: "./@app/client/storybook-static",

[Matt Davidson]

@chriskalmar this worked! 👍

[Chris Kalmar]

Awesome, glad it worked.
Looking forward to your feedback. 🙌

[Matt Davidson]

Hit another snag folks...

The action is using the root of the repo to search for baselines... in our case they are located at ./@app/client/.lostpixel/baseline.

Perhaps worth revisiting the original working-directory: proposal above? Is there anything I can do in the mean time to get the action working in a monorepo?

[Chris Kalmar]

Good point @matthewdavidson
In the meantime you could change the imagePathBaseline path like here: https://docs.lost-pixel.com/user-docs/setup/project-configuration/baseline-images