Name: Video recording for A beginner’s guide to Cypress end-to-end testing - Codementor Events
Uploaded: 2022-03-14
Description: Angular GDE and content creator, Ahsan, will guide us through writing e2e tests using Cypress with real-world examples.


## About the talk

Building products that are robust and resilient requires immense skills and planning. But even with that, you still can’t be confident about the product’s quality without some tests. In this talk, you’ll learn how to get started with e2e testing using Cypress through real-world examples.

### This talk will cover

The following concepts, using an Angular app as an example:
- Introduction to e2e testing and the Cypress framework
- Using selectors in Cypress
- Waiting for and mocking XHR calls 
- Reusable commands in Cypress


technical events about testing and dev tools like Cypress

Testing & Development Tools

### What is Cypress?
Cypress is an open-source test runner that you can use to test your web application, whether you’re trying to test your application locally or after they have been deployed. 


What Cypress helps you with is setting up tests and gives you a complete framework for the tooling with Chroming engine, and supports multiple browsers. It provides you with the ease of configuration, as you can run an end to end test across or against a local app and a deployed application. It also gives you the tools to run the test and visualize those things. The recordings also help QA a lot. You’ll be able to see the bugs by pitting this recording against a failed test and sending it to your dev team, they’ll see the video and see what’s happening there. 


You can also screenshot and send them to related teams. Lastly, the debugging test allows you to debug directly from familiar tools like Chrome DevTools to see what is actually happening in the tests. With Cypress, you can run e2e testing with any app in your local host or deployment, making the testing process much smoother.
### What are the major features of Cypress?
#### Time travel
When you run the test, Cypress takes snapshots. All you have to do is hover over commands in the Command Log to see exactly what happened at each step. You can always go back and see how each step looks.


#### Real time reloads
Cypress automatically reloads whenever you make changes to your tests, allowing you to see commands execute in real time in your app. If you’re working and developing right now for a locally deployed app, you don’t have to spin up everything again. You don’t have to rerun Cypress from scratch.


#### Debuggability
Stop guessing why your tests are failing. Debug directly from familiar tools like Chrome DevTools. Cypress’ readable errors and stack traces make debugging much easier and faster. 


#### Automatic waiting
Cypress automatically waits for commands and assertions before moving on so you don’t have to deal with the async hell. 


### Is there any possible way Cypress would do code injection on a live Shopify site during testing during local instance without any pushes to repos? 


If I want, I can write some Cypress test and I can even go and test Google because all we need to do is ask Cypress to use this URL, take this information, and do automation testing and manual testing with it. It doesn’t see my code when I’m running a test against it. You don’t have to push your Cypress code anywhere, or even if you have a local host code, it doesn’t really matter. If you have something in deployment, a live running site, you can essentially run Cypress separately to perform end to end testing.
### Can you pick the last item in the list regardless of how long it is?
I’m not sure if the EQ taks a minus one, but when we pick the items, we have two ways to do so in Cypress. One way is we just enter the command, other is we use the `then method` to get the content of those items and then we run the command. So if you just say see `.then` and get the value out of it, then you get the DOM list. That’s where you get the length of that selection and you can just use that.

Software Architect at Syncron unifying the FE architecture, UX and practices

Muhammad Ahsan Ayaz

GitHub

LinkedIn

YouTube

Twitter

Personal Portfolio

Twitch

Angular Cookbook

Angular GDE and content creator, Ahsan, will guide us through writing e2e tests using Cypress with real-world examples.

Video recording for: A beginner’s guide to Cypress end-to-end testing

Discussion