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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10486871/cypress1.png)
e2e tests are not a silver bullet
E2E
Integration
Unit
E2E
Integration
Unit
E2E
Integration
Unit
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10486926/hare.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10486927/turtoise.png)
$$$
$
Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10487041/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10487445/pasted-from-clipboard.png)
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
-
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10492868/cypress_logo_social.png)
How to keep project healthy
Leveraging Regular Cypress E2E Test Execution with GitHub
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10486898/ECB7CC40-7A56-4703-A249-9092BCA3877A-C420252C-C169-4848-B802-32D6AD30F899.webp)
Test execution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10487014/watering-watering-can-man-vietnam.jpg)
For every commit on:
-
prod/main/dev branches
-
Pull Request
- ?
Locally:
-
pre-commit - probably not
-
pre-push - well... probably nothing more than smoke tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10487012/pasted-from-clipboard.png)
Cypress & Github configuration
Leveraging Regular Cypress E2E Test Execution with GitHub
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10487369/transplanting-small-tree950.webp)
GOAL: Cypress checks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488710/open08a.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488711/open09a.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10493098/cypress3-yml-_-lukmarcus-meet-js-cypress-github-f935f7c.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488708/open08b.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488709/open09b.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488768/open00.png)
Cypress Cloud setup
cypress config file
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488703/open02a.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10489047/open03.png)
GitHUB ACTIONs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488701/open02c.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488702/open02b.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488704/open04.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488985/open05.png)
GitHUB integration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10489438/open07.png)
DASHBOARD VIEW
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488806/open10.png)
failed test video
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488719/open11.png)
Cypress Dashboards
Cypress Cloud vs. Alternative Solutions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10486885/cypress2.png)
Cypress vs. Currents vs. Sorry Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10494433/currents.dev.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10494481/Screenshot_from_2023-05-23_12-18-39.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10494518/Screenshot_from_2023-05-23_12-28-55.png)
cypress.io/cloud
currents.dev
pricing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10494647/pricing-graph.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10494670/pricing.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10494678/pasted-from-clipboard.png)
currents.dev
Cypress checks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488713/sorry03a.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488715/sorry04a.png)
inline comments
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488712/sorry03b.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488714/sorry04b.png)
dashboard view
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488705/sorry05.png)
failed test video
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488717/sorry06.png)
installation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488697/sorry01a.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488695/sorry01b.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10493119/secretkey.png)
installation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488696/sorry01c.png)
github actions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10489663/sorry01d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10489667/sorry02a.png)
workflow config file
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2397181/images/10488716/sorry02.png)
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
};
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10494717/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287209/images/10486998/Screenshot_from_2023-05-20_04-03-43.png)
Cypress & GitHub - by lukmarcus
By noisy
Cypress & GitHub - by lukmarcus
- 314