GitHub Actions integration in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

💻 Command Output

intermediate

GitHub Actions: Output of a Cypress test run step

You have a GitHub Actions workflow that runs Cypress tests using the command npx cypress run. What is the expected output snippet when all tests pass successfully?

Cypress

name: Run Cypress Tests
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Run Cypress tests
        run: npx cypress run

A No tests found in the specified folder

B Error: Cypress command not found

C

All specs passed! ✨  
  Tests: 5  
  Passing: 5  
  Failing: 0  
  Pending: 0

D

Tests: 5  
  Passing: 3  
  Failing: 2

💡 Hint

Look for the summary line that shows all tests passing with zero failures.

When Cypress tests run successfully in GitHub Actions, the output includes a summary showing all tests passed with zero failures.

❓ Configuration

intermediate

Correct GitHub Actions step to cache Cypress dependencies

Which GitHub Actions step correctly caches Cypress dependencies to speed up workflow runs?

A

- name: Cache Cypress
  uses: actions/cache@v3
  with:
    path: node_modules/cypress
    key: ${{ runner.os }}-cypress-${{ github.sha }}

B

- name: Cache Cypress
  uses: actions/cache@v3
  with:
    path: ~/.cache/Cypress
    key: ${{ runner.os }}-cypress-latest

C

- name: Cache Cypress
  uses: actions/cache@v2
  with:
    path: ~/.cache/cypress
    key: ${{ runner.os }}-cypress-${{ hashFiles('package.json') }}

D

- name: Cache Cypress
  uses: actions/cache@v3
  with:
    path: ~/.cache/Cypress
    key: ${{ runner.os }}-cypress-${{ hashFiles('package-lock.json') }}

💡 Hint

Check the correct cache path and use of hashFiles for key.

The correct cache path is ~/.cache/Cypress with actions/cache@v3 and the key should use hashFiles on package-lock.json to detect dependency changes.

🔀 Workflow

advanced

GitHub Actions workflow to run Cypress tests only on pull requests

You want to run Cypress tests only when a pull request is opened or updated. Which on trigger configuration achieves this?

A

on:
  push:
    branches: [main]

B

on:
  pull_request:
    types: [opened, synchronize]

C

on:
  pull_request:
    branches: [main]

D

on:
  push:
    types: [opened, synchronize]

💡 Hint

Pull request events include types like opened and synchronize.

The pull_request event with types opened and synchronize triggers the workflow when a PR is opened or updated (synchronize).

❓ Troubleshoot

advanced

Diagnosing Cypress test failures in GitHub Actions logs

Your Cypress tests fail in GitHub Actions with the error: Timed out waiting for the browser to connect. What is the most likely cause?

A The GitHub Actions runner does not have a display server or browser installed.

B The Cypress test code has syntax errors causing immediate failure.

C The GitHub Actions workflow YAML has invalid indentation.

D The Cypress tests are passing but the logs are not showing correctly.

💡 Hint

Consider the environment where the tests run and browser requirements.

This error usually means Cypress cannot launch the browser because the runner lacks a display server or browser installation.

✅ Best Practice

expert

Best practice for storing Cypress test artifacts in GitHub Actions

Which GitHub Actions step correctly saves Cypress screenshots and videos as artifacts after test runs?

A

- name: Upload Cypress artifacts
  uses: actions/upload-artifact@v3
  with:
    name: cypress-artifacts
    path: |
      cypress/screenshots
      cypress/videos

B

- name: Upload Cypress artifacts
  uses: actions/upload-artifact@v2
  with:
    name: cypress-artifacts
    path: cypress/reports

C

- name: Upload Cypress artifacts
  uses: actions/upload-artifact@v3
  with:
    name: cypress-artifacts
    path: cypress/screenshots,cypress/videos

D

- name: Upload Cypress artifacts
  uses: actions/upload-artifact@v3
  with:
    name: screenshots
    path: cypress/screenshots/videos

💡 Hint

Check the correct syntax for multiple paths in the upload-artifact action.

The correct way is to list multiple paths separated by new lines under 'path' using a pipe (|) character.

Practice

1. What is the main purpose of integrating Cypress tests with GitHub Actions?

easy

A. To manually trigger tests only when needed

B. To automatically run tests on code changes and catch bugs early

C. To deploy the application to production

D. To write Cypress test scripts inside GitHub

Solution

1. Step 1: Understand GitHub Actions role

   GitHub Actions automates tasks like running tests when code changes.

2. Step 2: Connect Cypress testing purpose

   Cypress tests run automatically to find bugs early without manual effort.

3. Final Answer:

   To automatically run tests on code changes and catch bugs early -> Option B

4. Quick Check:

   Automation of tests = A [OK]

Hint: GitHub Actions automates tasks on code changes [OK]

Common Mistakes:

• Thinking GitHub Actions only deploys code
• Believing tests run manually only
• Confusing test writing with test running

2. Which YAML key is used to specify the event that triggers a GitHub Actions workflow for Cypress tests?

easy

A. jobs

B. run

C. steps

D. on

Solution

1. Step 1: Identify trigger key in GitHub Actions YAML

   The on key defines events like push or pull_request that start the workflow.

2. Step 2: Differentiate from other keys

   run is used inside steps, steps lists commands, jobs groups tasks.

3. Final Answer:

   on -> Option D

4. Quick Check:

   Trigger event key = on [OK]

Hint: Triggers use 'on' key in GitHub Actions YAML [OK]

Common Mistakes:

• Confusing 'run' with trigger event
• Mixing 'steps' with event triggers
• Using 'jobs' as trigger key

3. Given this GitHub Actions snippet, what will happen when code is pushed to the main branch?

on:
  push:
    branches:
      - main
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Run Cypress tests
        run: npx cypress run

medium

A. Cypress tests run automatically on push to main branch

B. Tests run only if manually triggered

C. Workflow fails due to missing trigger

D. Tests run on every branch push

Solution

1. Step 1: Analyze trigger event

   The workflow triggers on push to the main branch only.

2. Step 2: Understand job steps

   It checks out code and runs Cypress tests with npx cypress run.

3. Final Answer:

   Cypress tests run automatically on push to main branch -> Option A

4. Quick Check:

   Push to main triggers tests = C [OK]

Hint: Push to main triggers workflow with Cypress run [OK]

Common Mistakes:

• Assuming manual trigger needed
• Thinking tests run on all branches
• Believing workflow lacks trigger

4. You wrote this GitHub Actions workflow but Cypress tests never run:

on:
  push:
    branches:
      - main
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - name: Run tests
        run: cypress run

What is the most likely error?

medium

A. Missing 'npx' before 'cypress run' command

B. Wrong branch name under 'push' event

C. Missing 'uses' for Cypress action

D. Incorrect 'runs-on' value

Solution

1. Step 1: Check Cypress run command syntax

   The command should be npx cypress run to run Cypress installed locally.

2. Step 2: Verify other parts

   Branch name 'main' is correct, 'runs-on' is valid, and Cypress action is optional if using CLI.

3. Final Answer:

   Missing 'npx' before 'cypress run' command -> Option A

4. Quick Check:

   Run command needs 'npx' prefix = B [OK]

Hint: Use 'npx cypress run' to execute tests in GitHub Actions [OK]

Common Mistakes:

• Running 'cypress run' without 'npx'
• Changing branch name incorrectly
• Expecting Cypress action is mandatory
• Misconfiguring runner OS

5. You want to run Cypress tests on both push and pull request events but only for the 'develop' branch. Which YAML snippet correctly configures this?

hard

A. on:
push:
branches:
- main
pull_request:
branches:
- main

B. on:
push:
branches:
- main
pull_request:
branches:
- develop

C. on:
push:
branches:
- develop
pull_request:
branches:
- develop

D. on:
push:
branches:
- develop
pull_request:
branches:
- main

Solution

1. Step 1: Identify required events and branches

   Tests must run on both push and pull_request events targeting the 'develop' branch only.

2. Step 2: Match YAML configuration

   on: push: branches: - develop pull_request: branches: - develop correctly lists both events with 'develop' branch under each.

3. Final Answer:

   on: push: branches: - develop pull_request: branches: - develop -> Option C

4. Quick Check:

   Both events on 'develop' branch = D [OK]

Hint: List both events with same branch under 'on' key [OK]

Common Mistakes:

• Mixing branch names between events
• Listing only one event
• Using wrong branch name