Unable to initialise a chromatic playwright project

[markmetcalfe]

Describe the bug I'm unable to run npx chromatic --playwright --project-token=chpt_2***5 after running npx playwright test as specified in the setup docs for initializing a chromatic playwright project.

I get the following error output from the console:

The CLI tried to run your build-archive-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:

- Check the Storybook build log printed below.
- Run npm run build-archive-storybook or yarn build-archive-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
- Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook

Command failed with exit code 1: pnpm run build-archive-storybook --output-dir /var/folders/2r/g1brlfnd6qn7xw5bkwrz4crc0000gn/T/chromatic--12771-dBHYAaM5T2yU
Chromatic archives directory cannot be found: /Users/mark/Documents/markmetcalfe.io/test-results/chromatic-archives

Please make sure that you have run your E2E tests, or have set the CHROMATIC_ARCHIVE_LOCATION env var if the output directory for the tests is not in the standard location.

This is directly after running npx playwright test, which results in the test-results/ directory containing a single file of .last-run.json, which has the contents of

{
  "status": "passed",
  "failedTests": []
}

This is with the following package versions: @chromatic-com/playwright: 0.6.11 @playwright/test: 1.42.1 chromatic: 11.5.3

This is my playwright.config.ts, package.json, and pnpm-lock.yaml - on this branch

To Reproduce

1. Clone this repo via git clone https://github.com/markmetcalfe/markmetcalfe.io.git
2. git checkout use-chromatic
3. npm install -g pnpm
4. pnpm install
5. npx playwright test
6. npx chromatic --playwright --project-token=chpt_ABCXYZ

Expected behavior My project is uploaded to chromatic successfully

Screenshots

Additional context This is using pnpm v8.15.4 with Node v20.12.2 on MacOS 14.5

[skitterm]

@markmetcalfe sorry to hear there has been issues setting this up! Thanks for providing the details. I'll investigate this today and will let you know if I need any more info from you.

[thafryer]

@markmetcalfe Looking at your Playwright Config, I noticed that you are not running tests in Chrome. We require that you run your Playwright tests in Chromium because we use the Chrome Debugger Protocol for generating the necessary test results.

[markmetcalfe]

Cheers @thafryer, adding a desktop chrome project and thus running it in chrome has fixed the issue. My project is now successfully set up in Chromatic. It might be good if this were documented in the setup docs somewhere. I couldn't find any documentation that said this was required. Thanks again.