Upload Cypress videos and screenshots directly to Slack

This Github action enables you to take the screenshots and videos generated by Cypress after a test run and upload them directly to a Slack channel of your choice. All files are contained within a single message thread to minimize noise.

Inputs

token

Required – Slack app token. See Slack's documentation. To get a token:

• Create an app
• Request scopes for files:write, chat:write and channels:read
• Install the app into your workspace
• Invite the bot to whatever channel you want to send the videos and screenshots to /invite <botname> or @botname
• Grab the Bot User OAuth Token from the OAuth & Permissions page
• Add that token as a secret to your Github repo's Actions Secrets found under Settings -> Secrets and variables -> Actions (in the examples below we call it SLACK_TOKEN)

channel

Required – Slack channel to upload to.

screenshotsDir

Optional – The folder where Cypress stores screenshots on the build machine. Default: cypress/screenshots

Note

If your project uses Cypress from the project root folder, the default value will work for you. But if your project uses Cypress in a subfolder (like most monorepos), you'll need to provide the relative path to that folder (i.e. app/tests/e2e/cypress/screenshots). The relative path for the default value resolves to /home/runner/work/<REPO_NAME>/<REPO_NAME>/cypress/screenshots (Don't include a trailing slash on your path!)

videosDir

Optional – The folder where Cypress stores videos on the build machine. Default: cypress/videos

message-text

Optional – Custom Slack message for when the screenshots and videos have been uploaded. Default: A Cypress test just finished. I've placed the screenshots and videos in this thread. Good pie!

uploadType

Optional – What to upload: "both", "screenshots", or "videos". Default: both

• both - Upload both screenshots and videos (default behavior)
• screenshots - Upload only screenshots
• videos - Upload only videos

Examples

Only upload when open PRs fail

on: [pull_request]

env:
  SLACK_CHANNEL: 'general'

jobs:
  test-and-upload-results-on-fail:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: 'Run tests'
        uses: cypress-io/github-action@v2

      - name: 'Upload screenshots and videos to Slack'
        uses: trymbill/cypress-slack-video-upload-action@v2.1.1
        if: failure()
        with:
          token: ${{ secrets.SLACK_TOKEN }}
          channel: ${{ env.SLACK_CHANNEL }}
          message-text: 'Cypress tests failed! They have been placed in this thread, good luck.'

Upload results after every push

on: [push]

env:
  SLACK_CHANNEL: 'general'

jobs:
  test-and-upload-results:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: 'Run tests'
        uses: cypress-io/github-action@v2

      - name: 'Upload screenshots and videos to Slack'
        uses: trymbill/cypress-slack-video-upload-action@v2.1.1
        with:
          token: ${{ secrets.SLACK_TOKEN }}
          channel: ${{ env.SLACK_CHANNEL }}

Upload only screenshots or videos

on: [pull_request]

env:
  SLACK_CHANNEL: 'general'

jobs:
  test-and-upload-screenshots-only:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: 'Run tests'
        uses: cypress-io/github-action@v2

      - name: 'Upload only screenshots to Slack'
        uses: trymbill/cypress-slack-video-upload-action@v2.1.1
        if: failure()
        with:
          token: ${{ secrets.SLACK_TOKEN }}
          channel: ${{ env.SLACK_CHANNEL }}
          uploadType: 'screenshots' # Options: 'both', 'screenshots', or 'videos'

Testing

This repository includes a test setup to verify the action works correctly.

Running Tests Locally

1. Build, lint and package the action:

   npm run all

2. Run Cypress tests:

   # Run all tests
   npm run cypress:run
   
   # Run specific test
   npx cypress run --spec cypress/e2e/passing.cy.js
   npx cypress run --spec cypress/e2e/failing.cy.js
   
   # Open Cypress UI (for interactive testing)
   npm run cypress:open

3. Test the Slack upload action locally:

   # After running a failing test, you can test the action manually
   # @actions/core reads from INPUT_* environment variables when running locally
   INPUT_TOKEN=your_token INPUT_CHANNEL=your_channel node dist/main.js
   
   # Optional: specify screenshotsDir, videosDir and custom message
   INPUT_TOKEN=your_token INPUT_CHANNEL=your_channel INPUT_SCREENSHOTSDIR=cypress INPUT_VIDEOSDIR=cypress INPUT_MESSAGE_TEXT="Test message" node dist/main.js

CI Testing

The repository includes a GitHub Actions workflow (.github/workflows/test.yml) that:

• Runs on pull requests
• Executes both passing and failing Cypress tests
• Verifies the Slack upload action completes successfully