adeoweb-cypress-demo

This is a repository of a Cypress testing demo. Based on adeoweb.biz website case study.

What is this talk

We will 👀 live-code a demo following this plan:

Cypress Setup
✍️ Writing your first test
🏃 Running tests and results inside Cypress Dashboard
📗 Organizing tests and custom functions
💡 Tips & Tricks

How do we prioritize?

Identify the company/website mission - to understand better where to start testing backlog
Writing User stories based tests

Tips and tricks

Testing id's: data-test="element-id"
Periodical uptime monitoring
Automated lighthouse/pagespeed testing
CI/CD Integration

Used Commands

npm install cypress / yarn add cypress
npx cypress open / yarn run cypress open

Cypress Lighthouse Testing

To Setup npm i -D cypress @cypress-audit/lighthouse

TODO:

Cypress Dashboard Integration - https://dashboard.cypress.io/ CI/CD Integration - https://docs.cypress.io/guides/guides/integration-and-e2e-testing.html

Usefull links

Cypress Dashboard

https://dashboard.cypress.io/projects/2xqgvz/runs/1/test-results/3a31a62d-a970-4820-9e81-d249295be59f

A cypress plugin for projects using @azure/msal-browser

Aug 11, 2022

Run cucumber/gherkin-syntaxed specs with Cypress

cypress-cucumber-preprocessor This preprocessor aims to provide a developer experience and behavior similar to that of Cucumber, to Cypress. Installat

Dec 7, 2022

Export Cypress Tests from Google Chrome DevTools' Recorder

@cypress/chrome-recorder This repo provides tools to export Cypress Tests from Google Chrome DevTools' Recordings Installation $ npm install -g @cypre

Dec 20, 2022

A simple application to estuding tests end-to-end in Angular with Cypress

Conhecimento sobre testes End to End (ponta a ponta) Sobre o Cypress: Testes feitos do sistema para ver como um usuário se comportaria, esses testes é

Jun 15, 2022

Enable hover capabilities for Cypress. 🛸

cypress-hover 🛸 Enable hover capabilities for Cypress 🛸 with zero dependencies! 💯 Installation npm install cypress-hover Usage In your cypress/sup

Sep 1, 2022

Easy conditional if-else logic for your Cypress testsDo not use

cypress-if Easy conditional if-else logic for your Cypress tests Tested with cy.get, cy.contains, cy.find, .then, .within commands in Cypress v9 and v

Dec 14, 2022

Cypress Boilerplate with Cucumber (BDD)

Cypress Boilerplate with POM and Cucumber Download & Configuration npm init -- package.json npm install cypress cypress-cucumber-preprocessor -- pac

Nov 4, 2022

A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Docker.

Next.js Template Quickly start a new Next.js project A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Do

Oct 7, 2022

A demo of LaunchDarkly, React, and Vite, using the Pokémon API!

Pokémon Feature Flags demo Here's a demo for integrating feature flags into a React project! Built with React, Vite, the PokeAPI, and LaunchDarkly! Wh

Jan 5, 2022