diff --git a/src/content/ci/azure-pipelines.mdx b/src/content/ci/azure-pipelines.mdx index 78dbf7af..a6599b1a 100644 --- a/src/content/ci/azure-pipelines.mdx +++ b/src/content/ci/azure-pipelines.mdx @@ -36,10 +36,10 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo - checkout: self displayName: "Get Full Git History" fetchDepth: 0 - - task: NodeTool@0 + - task: UseNode@1 displayName: "Install Node.js" inputs: - versionSpec: "20.12.2" + version: "22.12.0" - task: Cache@2 displayName: "Install and cache dependencies" inputs: @@ -71,15 +71,15 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo jobs: - job: Playwright displayName: "Run Playwright" - container: mcr.microsoft.com/playwright:v1.49.0-jammy + container: mcr.microsoft.com/playwright:v1.49.0-noble steps: - checkout: self displayName: "Get Full Git History" fetchDepth: 0 - - task: NodeTool@0 + - task: UseNode@1 displayName: "Install Node.js" inputs: - versionSpec: "20.12.2" + version: "22.12.0" - task: Cache@2 displayName: "Install and cache dependencies" inputs: @@ -112,10 +112,10 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo - checkout: self displayName: "Get Full Git History" fetchDepth: 0 - - task: NodeTool@0 + - task: UseNode@1 displayName: "Install Node.js" inputs: - versionSpec: "20.12.2" + version: "22.12.0" - task: Cache@2 displayName: "Install and cache dependencies" inputs: @@ -153,17 +153,17 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo jobs: - job: Cypress displayName: "Run Cypress" - container: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1 + container: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1 variables: npm_config_cache: $(Pipeline.Workspace)/.npm steps: - checkout: self displayName: "Get Full Git History" fetchDepth: 0 - - task: NodeTool@0 + - task: UseNode@1 displayName: "Install Node.js" inputs: - versionSpec: "20.12.2" + version: "22.12.0" - task: Cache@2 displayName: "Install and cache dependencies" inputs: @@ -198,10 +198,10 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo - checkout: self displayName: "Get Full Git History" fetchDepth: 0 - - task: NodeTool@0 + - task: UseNode@1 displayName: "Install Node.js" inputs: - versionSpec: "20.12.2" + version: "22.12.0" - task: Cache@2 displayName: "Install and cache dependencies" inputs: diff --git a/src/content/ci/bitbucket-pipelines.mdx b/src/content/ci/bitbucket-pipelines.mdx index 5995e5a2..55a87ecd 100644 --- a/src/content/ci/bitbucket-pipelines.mdx +++ b/src/content/ci/bitbucket-pipelines.mdx @@ -20,7 +20,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo ```yml title="bitbucket-pipelines.yml" - image: node:iron + image: node:jod definitions: caches: @@ -44,7 +44,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo ```yml title="bitbucket-pipelines.yml" - image: node:iron + image: node:jod definitions: caches: @@ -57,7 +57,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo steps: - step: name: "Playwright" - image: mcr.microsoft.com/playwright:v1.49.0-jammy + image: mcr.microsoft.com/playwright:v1.49.0-noble caches: - npm - node @@ -81,7 +81,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo ```yml title="bitbucket-pipelines.yml" - image: node:iron + image: node:jod definitions: caches: @@ -96,7 +96,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo - step: name: "Cypress" # Configure the ELECTRON_EXTRA_LAUNCH_ARGS environment variable in your project settings to run Cypress tests with Chromatic. - image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1 + image: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1 caches: - npm - node diff --git a/src/content/ci/circleci.mdx b/src/content/ci/circleci.mdx index d5629036..114e5384 100644 --- a/src/content/ci/circleci.mdx +++ b/src/content/ci/circleci.mdx @@ -25,7 +25,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo executors: chromatic-ui-testing: docker: - - image: cimg/node:20.12.2 + - image: cimg/node:22.12.0 working_directory: ~/repo jobs: @@ -35,7 +35,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo - checkout - restore_cache: keys: - - v1-dependencies-{{ checksum "package.json" }} + - v1-dependencies-{{ checksum "package-lock.json" }} - v1-dependencies- # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment. - run: npm ci @@ -44,7 +44,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo name: Save NPM cache paths: - ~/.npm - key: v1-dependencies-{{ checksum "package.json" }} + key: v1-dependencies-{{ checksum "package-lock.json" }} workflows: UI_Tests: @@ -57,24 +57,24 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo version: 2.1 executors: - pw-jammy-development: + pw-noble-development: docker: - - image: mcr.microsoft.com/playwright:v1.49.0-jammy + - image: mcr.microsoft.com/playwright:v1.49.0-noble working_directory: ~/repo chromatic-ui-testing: docker: - - image: cimg/node:20.12.2 + - image: cimg/node:22.12.0 working_directory: ~/repo jobs: Playwright: - executor: pw-jammy-development + executor: pw-noble-development steps: - checkout - restore_cache: name: Restore NPM cache keys: - - v1-dependencies-{{ checksum "package.json" }} + - v1-dependencies-{{ checksum "package-lock.json" }} - v1-dependencies- - run: name: "Install Playwright dependencies" @@ -84,7 +84,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo name: Save NPM cache paths: - ~/.npm - key: v1-dependencies-{{ checksum "package.json" }} + key: v1-dependencies-{{ checksum "package-lock.json" }} - run: name: "Run Playwright tests" command: npx playwright test @@ -104,7 +104,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo - restore_cache: name: Restore NPM cache keys: - - v1-dependencies-{{ checksum "package.json" }} + - v1-dependencies-{{ checksum "package-lock.json" }} - v1-dependencies- - run: npm ci - attach_workspace: @@ -131,11 +131,11 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo executors: cypress: docker: - - image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1 + - image: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1 working_directory: ~/repo chromatic-ui-testing: docker: - - image: cimg/node:20.12.2 + - image: cimg/node:22.12.0 working_directory: ~/repo jobs: @@ -146,7 +146,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo - restore_cache: name: Restore NPM cache keys: - - v1-dependencies-{{ checksum "package.json" }} + - v1-dependencies-{{ checksum "package-lock.json" }} - v1-dependencies- - run: name: "Install Cypress dependencies" @@ -157,7 +157,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo paths: - ~/.npm - ~/.cache - key: v1-dependencies-{{ checksum "package.json" }} + key: v1-dependencies-{{ checksum "package-lock.json" }} - run: name: "Run development server" command: npm run dev @@ -183,7 +183,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo - restore_cache: name: Restore NPM cache keys: - - v1-dependencies-{{ checksum "package.json" }} + - v1-dependencies-{{ checksum "package-lock.json" }} - v1-dependencies- - run: npm ci - attach_workspace: diff --git a/src/content/ci/custom-ci-provider.mdx b/src/content/ci/custom-ci-provider.mdx index 9017b1ff..4e14771f 100644 --- a/src/content/ci/custom-ci-provider.mdx +++ b/src/content/ci/custom-ci-provider.mdx @@ -20,7 +20,7 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo ```yml title="your-workflow.yml" - image: node:iron + image: node:jod - run: # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment. @@ -34,7 +34,7 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo ```yml title="your-workflow.yml" - image: node:iron + image: node:jod - run: # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment. @@ -42,7 +42,7 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo - run: name: "Playwright" displayName: "Run Playwright tests" - container: mcr.microsoft.com/playwright:v1.49.0-jammy + container: mcr.microsoft.com/playwright:v1.49.0-noble options: artifacts: # Chromatic automatically defaults to the test-results directory. @@ -60,7 +60,7 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo ```yml title="your-workflow.yml" - image: node:iron + image: node:jod - run: # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment. @@ -68,7 +68,7 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo - run: name: "Cypress" displayName: "Run Cypress tests" - container: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1 + container: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1 environment: ELECTRON_EXTRA_LAUNCH_ARGS: "--remote-debugging-port=9222" options: diff --git a/src/content/ci/github-actions.mdx b/src/content/ci/github-actions.mdx index 8223b2a3..164afe3c 100644 --- a/src/content/ci/github-actions.mdx +++ b/src/content/ci/github-actions.mdx @@ -35,7 +35,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml` fetch-depth: 0 - uses: actions/setup-node@v4 with: - node-version: 20 + node-version: 22.12.0 - name: Install dependencies # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment. run: npm ci @@ -56,14 +56,14 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml` playwright: runs-on: ubuntu-latest container: - image: mcr.microsoft.com/playwright:v1.49.0-jammy + image: mcr.microsoft.com/playwright:v1.49.0-noble steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - uses: actions/setup-node@v4 with: - node-version: 20 + node-version: 22.12.0 - name: Install dependencies # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment. run: npm ci @@ -89,7 +89,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml` fetch-depth: 0 - uses: actions/setup-node@v4 with: - node-version: 20 + node-version: 22.12.0 - name: Install dependencies # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment. run: npm ci @@ -120,7 +120,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml` name: Run Cypress runs-on: ubuntu-latest container: - image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1 + image: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1 options: --user 1001 steps: - uses: actions/checkout@v4 @@ -128,7 +128,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml` fetch-depth: 0 - uses: actions/setup-node@v4 with: - node-version: 20 + node-version: 22.12.0 - name: Install dependencies # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment. run: npm ci @@ -156,7 +156,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml` fetch-depth: 0 - uses: actions/setup-node@v4 with: - node-version: 20 + node-version: 22.12.0 - name: Install dependencies # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment. run: npm ci @@ -508,7 +508,7 @@ This means the latest build on main will be an ancestor of this ephemeral branch If you decide to use the `pull_request` event, we recommend creating a separate workflow for Chromatic using the following strategy for the checkout step: ```yml -- uses: actions/checkout@v3 +- uses: actions/checkout@v4 with: fetch-depth: 0 # 👇 Tells the checkout which commit hash to reference @@ -696,13 +696,12 @@ jobs: uses: actions/checkout@v4 with: fetch-depth: 0 - - name: ⎔ Setup node uses: actions/setup-node@v4 with: cache: npm cache-dependency-path: ./package.json - node-version: 20 + node-version: 22.12.0 - name: 📥 Install deps run: npm install - name: Build Storybook diff --git a/src/content/ci/gitlab.mdx b/src/content/ci/gitlab.mdx index b9ac7f9d..99bdc8b1 100644 --- a/src/content/ci/gitlab.mdx +++ b/src/content/ci/gitlab.mdx @@ -20,7 +20,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo ```yml title=".gitlab-ci.yml" - image: node:iron + image: node:jod stages: - UI_Tests @@ -42,7 +42,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo ```yml title=".gitlab-ci.yml" - image: node:iron + image: node:jod stages: - UI_Tests @@ -59,7 +59,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo Playwright: stage: UI_Tests needs: [] - image: mcr.microsoft.com/playwright:v1.49.0-jammy + image: mcr.microsoft.com/playwright:v1.49.0-noble script: - npx playwright test allow_failure: true @@ -81,7 +81,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo ```yml title=".gitlab-ci.yml" - image: node:iron + image: node:jod stages: - UI_Tests @@ -99,7 +99,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo Cypress: stage: UI_Tests needs: [] - image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1 + image: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1 variables: ELECTRON_EXTRA_LAUNCH_ARGS: "--remote-debugging-port=9222" script: @@ -139,7 +139,7 @@ To improve the performance of your pipeline, you can use the [interruptible](htt This keyword has no effect if [automatic cancellation of redundant pipelines](https://docs.gitlab.com/ee/ci/pipelines/settings.html#auto-cancel-redundant-pipelines) is disabled. When enabled, a running job with `interruptible: true` is canceled when starting a pipeline for a new change on the same branch. ```yml title=".gitlab-ci.yml" -image: node:iron +image: node:jod stages: - UI_Tests diff --git a/src/content/ci/jenkins.mdx b/src/content/ci/jenkins.mdx index ab85d94e..88f08d44 100644 --- a/src/content/ci/jenkins.mdx +++ b/src/content/ci/jenkins.mdx @@ -51,7 +51,7 @@ To integrate Chromatic with your existing [multistage pipeline](https://www.jenk stage('Playwright') { agent { docker { - image 'mcr.microsoft.com/playwright:v1.49.0-jammy' + image 'mcr.microsoft.com/playwright:v1.49.0-noble' reuseNode true } } @@ -94,7 +94,7 @@ To integrate Chromatic with your existing [multistage pipeline](https://www.jenk stage('Cypress') { agent { docker { - image 'cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1' + image 'cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1' reuseNode true } } diff --git a/src/content/playwright/sharding.md b/src/content/playwright/sharding.md index b1ebc309..98db495e 100644 --- a/src/content/playwright/sharding.md +++ b/src/content/playwright/sharding.md @@ -27,14 +27,14 @@ jobs: shard: [1, 2] runs-on: ubuntu-latest container: - image: mcr.microsoft.com/playwright:v1.49.0-jammy + image: mcr.microsoft.com/playwright:v1.49.0-noble steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - uses: actions/setup-node@v4 with: - node-version: 20 + node-version: 22.12.0 - name: Install dependencies run: npm ci - name: Run Playwright tests @@ -58,7 +58,7 @@ jobs: fetch-depth: 0 - uses: actions/setup-node@v4 with: - node-version: 20 + node-version: 22.12.0 - name: Install dependencies run: npm ci @@ -81,7 +81,7 @@ jobs: To run Playwright tests in parallel across shared CI jobs in GitLab, you can use the [`parallel`](https://docs.gitlab.com/ee/ci/yaml/index.html#parallel) option in your GitLab CI workflow. The job will be split into multiple smaller jobs running in parallel sequentially named based on the values of the environment variables. The results will be saved as an artifact and accessible by the Chromatic job when it runs. ```yaml title=".gitlab-ci.yml" -image: node:iron +image: node:jod stages: - UI_Tests @@ -97,7 +97,7 @@ before_script: Playwright: stage: UI_Tests needs: [] - image: mcr.microsoft.com/playwright:v1.49.0-jammy + image: mcr.microsoft.com/playwright:v1.49.0-noble parallel: 2 script: - npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL @@ -121,16 +121,16 @@ To run Playwright tests in parallel across shared CI jobs in CircleCI, you can u version: 2.1 executors: - pw-jammy-development: + pw-noble-development: docker: - - image: mcr.microsoft.com/playwright:v1.49.0-jammy + - image: mcr.microsoft.com/playwright:v1.49.0-noble chromatic-ui-testing: docker: - - image: cimg/node:20.12.2 + - image: cimg/node:22.12.0 jobs: Playwright: - executor: pw-jammy-development + executor: pw-noble-development parallelism: 2 working_directory: ~/repo steps: @@ -138,7 +138,7 @@ jobs: - restore_cache: name: Restore NPM cache keys: - - v1-dependencies-{{ checksum "package.json" }} + - v1-dependencies-{{ checksum "package-lock.json" }} - v1-dependencies- - run: name: "Install Playwright dependencies" @@ -161,7 +161,7 @@ jobs: - restore_cache: name: Restore NPM cache keys: - - v1-dependencies-{{ checksum "package.json" }} + - v1-dependencies-{{ checksum "package-lock.json" }} - v1-dependencies- - run: npm ci - attach_workspace: @@ -182,9 +182,7 @@ workflows: If you're working with Jenkins, you can configure your pipeline to run Playwright tests in parallel, distributed across multiple stages, save the test results as artifacts, and run Chromatic in a separate stage that depends on the test results from the previous job. -```groovy -// Jenkinsfile - +```groovy title="Jenkinsfile" pipeline { agent any tools {nodejs "node"} @@ -203,7 +201,7 @@ pipeline { stage('Shard #1') { agent { docker { - image 'mcr.microsoft.com/playwright:v1.49.0-jammy' + image 'mcr.microsoft.com/playwright:v1.49.0-noble' reuseNode true } } @@ -223,7 +221,7 @@ pipeline { stage('Shard #2') { agent { docker { - image 'mcr.microsoft.com/playwright:v1.49.0-jammy' + image 'mcr.microsoft.com/playwright:v1.49.0-noble' reuseNode true } } @@ -259,12 +257,12 @@ pipeline { If you’re using a different CI provider, you’ll need to adapt your workflow to run Playwright tests in parallel across shared CI jobs and enable Chromatic to run after all instances have finished. Here’s an example of how you might do this in a generic CI provider. ```yml title="your-workflow.yml" -image: node:iron +image: node:jod - run: name: "Playwright" displayName: "Run Playwright tests" - container: mcr.microsoft.com/playwright:v1.49.0-jammy + container: mcr.microsoft.com/playwright:v1.49.0-noble options: parallel: 2 artifacts: