From df74784b9b756c2676791ed7b3be28fb1a315303 Mon Sep 17 00:00:00 2001 From: Mike McCready <66998419+MikeMcC399@users.noreply.github.com> Date: Tue, 6 May 2025 08:34:06 +0200 Subject: [PATCH 1/3] test: add example-build-artifacts workflow --- .github/workflows/example-build-artifacts.yml | 58 +++++++++++++++++++ README.md | 47 +++++++++++++++ examples/nextjs/next.config.mjs | 4 +- 3 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/example-build-artifacts.yml diff --git a/.github/workflows/example-build-artifacts.yml b/.github/workflows/example-build-artifacts.yml new file mode 100644 index 000000000..f67cd8563 --- /dev/null +++ b/.github/workflows/example-build-artifacts.yml @@ -0,0 +1,58 @@ +name: example-build-artifacts +# This workflow shows how to split build and test steps with artifacts. +# In the build job, dependencies are installed, the app is built and the build results +# are stored as an artifact using actions/upload-artifact. +# No tests are run in the build job. +# The test jobs use the results from the build job: +# - dependencies and the Cypress binary are installed using dependency caching +# - build results are restored using actions/download-artifact +on: + push: + branches: + - 'master' + pull_request: + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-24.04 + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Build app + uses: ./ # refers to local instance of cypress-io/github-action@v6 + with: + runTests: false # only build app, don't test yet + build: npm run build + working-directory: examples/nextjs + - name: Store build artifacts + uses: actions/upload-artifact@v4 # https://github.com/actions/upload-artifact + with: + name: app + path: examples/nextjs/build + if-no-files-found: error + retention-days: 1 + + test: + needs: build + strategy: + fail-fast: false + matrix: + os: [ubuntu-24.04, windows-2025, macos-15] + runs-on: ${{ matrix.os }} + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Restore build artifacts + uses: actions/download-artifact@v4 # https://github.com/actions/download-artifact + with: + name: app + path: examples/nextjs/build + + - name: Cypress tests + uses: ./ + with: + start: npm start # start server using the build artifacts + working-directory: examples/nextjs diff --git a/README.md b/README.md index 57ea35ee6..345e5002e 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,7 @@ The following examples demonstrate the actions' functions. - Use [custom cache key](#custom-cache-key) - Run tests on multiple [Node versions](#node-versions) - Split [install and tests](#split-install-and-tests) into separate jobs +- Split [install and tests](#split-install-and-test-with-artifacts) with artifacts - Use [custom install commands](#custom-install) - Install [only Cypress](#install-cypress-only) to avoid installing all dependencies - Use [timeouts](#timeouts) to avoid hanging CI jobs @@ -1386,6 +1387,52 @@ jobs: See [cypress-gh-action-monorepo](https://github.com/bahmutov/cypress-gh-action-monorepo) for a working example. +### Split install and test with artifacts + +If your test job(s) first need a build step, you can split the jobs into a separate build job followed by test jobs. You pass the build results to any subsequent jobs using [GitHub Actions artifacts](https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/storing-and-sharing-data-from-a-workflow). + +In the build job, use [upload-artifact](https://github.com/actions/upload-artifact) to store the build results, then in subsequent jobs use [download-artifact](https://github.com/actions/download-artifact) to restore them. + +```yml +name: Split build and test +on: push +jobs: + build: + runs-on: ubuntu-24.04 + steps: + - uses: actions/checkout@v4 + - name: Build app + uses: cypress-io/github-action@v6 + with: + runTests: false # only build app, don't test yet + build: npm run build + - name: Store build artifacts + uses: actions/upload-artifact@v4 + with: + name: app + path: build + if-no-files-found: error + retention-days: 1 + + test: + needs: build + runs-on: ubuntu-24.04 + steps: + - uses: actions/checkout@v4 + - name: Restore build artifacts + uses: actions/download-artifact@v4 + with: + name: app + path: build + + - name: Cypress tests + uses: cypress-io/github-action@v6 + with: + start: npm start # start server using the build artifacts +``` + +[![Split with build artifacts](https://github.com/cypress-io/github-action/actions/workflows/example-build-artifacts.yml/badge.svg)](.github/workflows/example-build-artifacts.yml) + ### Custom install Finally, you might not need this GH Action at all. For example, if you want to split the npm dependencies installation from the Cypress binary installation, then it makes no sense to use this action. Instead you can install and cache Cypress yourself. diff --git a/examples/nextjs/next.config.mjs b/examples/nextjs/next.config.mjs index 4678774e6..de0120891 100644 --- a/examples/nextjs/next.config.mjs +++ b/examples/nextjs/next.config.mjs @@ -1,4 +1,6 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + distDir: 'build', +}; export default nextConfig; From 9c3d8dbb970e3984dcf6234d7590f8328663c54f Mon Sep 17 00:00:00 2001 From: Mike McCready <66998419+MikeMcC399@users.noreply.github.com> Date: Tue, 6 May 2025 09:15:04 +0200 Subject: [PATCH 2/3] add wait-on parameter --- .github/workflows/example-build-artifacts.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/example-build-artifacts.yml b/.github/workflows/example-build-artifacts.yml index f67cd8563..53a69c436 100644 --- a/.github/workflows/example-build-artifacts.yml +++ b/.github/workflows/example-build-artifacts.yml @@ -55,4 +55,5 @@ jobs: uses: ./ with: start: npm start # start server using the build artifacts + wait-on: http://localhost:3000 working-directory: examples/nextjs From fda988cc8cb9bff4a77f8cf52de293ab2336ab89 Mon Sep 17 00:00:00 2001 From: Mike McCready <66998419+MikeMcC399@users.noreply.github.com> Date: Tue, 6 May 2025 11:17:42 +0200 Subject: [PATCH 3/3] add reference to matrix strategy with parallel jobs --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 345e5002e..2c24d304f 100644 --- a/README.md +++ b/README.md @@ -1393,6 +1393,8 @@ If your test job(s) first need a build step, you can split the jobs into a separ In the build job, use [upload-artifact](https://github.com/actions/upload-artifact) to store the build results, then in subsequent jobs use [download-artifact](https://github.com/actions/download-artifact) to restore them. +Your tests jobs may use a [GitHub Actions matrix strategy](https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/running-variations-of-jobs-in-a-workflow), such as when recording to [Cypress Cloud](https://on.cypress.io/cloud-introduction) with [parallel jobs](#parallel). + ```yml name: Split build and test on: push