Cypress & GitHub

Efficient Setup for Pull Requests

with

Cypress Cloud and Sorry-Cypress

Why E2E tests and why Cypress

Advantages and Strengths of Cypress in E2E Testing

e2e tests are not a silver bullet

E2E

Integration

Unit

E2E

Integration

Unit

E2E

Integration

Unit

$$$

$

Cypress

Why Cypress?

  • Free and open source

  • Test modern apps directly in the browser

  • Write your first passing test in minutes

    • npm install --save-dev cypress
    • npx cypress open # generates cypress project

  • Debug failures directly in the browser:

    • Time Travel

    • Screenshots and Videos

    • Live Reload

How to keep project healthy

Leveraging Regular Cypress E2E Test Execution with GitHub

Test execution

For every commit on:

  • prod/main/dev branches

  • Pull Request

 - ?

Locally:

  • pre-commit - probably not

  • pre-push - well... probably nothing more than smoke tests

Cypress & Github configuration

Leveraging Regular Cypress E2E Test Execution with GitHub

GOAL: Cypress checks

Simple github Action

name: End-to-end tests
on: push
jobs:
  cypress-run:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      # build your dedicated instance here

      - name: Cypress run
        uses: cypress-io/github-action@v5

goal: videos & screenshots

Storing Artefacts

name: Artifacts
on: push
jobs:
  cypress-run:
    runs-on: ubuntu-22.04
    name: Artifacts
    steps:
      - uses: actions/checkout@v3
      - uses: cypress-io/github-action@v5
      - uses: actions/upload-artifact@v3
        if: failure()
        with:
          name: cypress-screenshots
          path: cypress/screenshots
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: cypress-videos
          path: cypress/videos

GOAL: Inline comments

Cypress Cloud setup

cypress config file

GitHUB ACTIONs

GitHUB integration

DASHBOARD VIEW

failed test video

Cypress Dashboards

Cypress Cloud vs. Alternative Solutions

Cypress vs. Currents vs. Sorry Cypress

cypress.io/cloud

currents.dev

pricing

currents.dev

Cypress checks

inline comments

dashboard view

failed test video

installation

💥

installation

github actions

workflow config file

Self Hosted

Sorry Cypress Setup

git clone git@github.com:sorry-cypress/sorry-cypress.git
cd sorry-cypress
docker-compose -f docker-compose.full.yml up
// currents.config.js
module.exports = {
  projectId: "kj29s",
  cloudServiceUrl: "http://localhost:1234", # ADD THIS
};

localhost:8080

TEAM & BACKGROUND

Our design team has a collective 75 years of experience in crafting digital products. Our diverse backgrounds offer a thorough mix of points of view.

  • Conceptualization

  • Product Design

  • Development

  • UI/UX Testing

  • Branding

OUR SERVICES

You NEED e2e Tests?

HIRE ME

Cypress & GitHub - by lukmarcus

By noisy

Source: Marek Szumny

Cypress & GitHub - by lukmarcus

  • 313

More from noisy