Cypress End-to-End Testing

Learn how to perform amazing end-to-end testing for Angular Firebase apps using Cypress.io. You'll never write e2e tests in Angular 6 the same again angularfirebase.com/lessons/c...
- Why Cypress docs.cypress.io/api/introduct...

[@Fireship]

Seriously, give Cypress a try (they don't pay me) - it will make you love test-driven development :)

[@harpymaslow]

Angular Firebase I've been using it for 2 months. I love it. Also they're currently working on a visual regression tool. It's gonna be awesome ! Thanks for the video

[@Ponzi8]

We are using it in my team here in Daniel Wellington. We are going from Angular to React, how do you think it will affect cypress for us when we switch?

[@raven619claw]

as a first testing framework should i try cypress or puppeteer? I have a react app but some links redirect to an older repo. so confused which framework should i go with.

[@Kiran200002]

cypress is a good testing framework but some keywords like mouseover, drag and drop dosen't work smoothly. Thanks for the video :)

[@minhajulhaque9918]

No offense but this is automation from a devs perspective. As a professional tester this would not suffice. Look into UFT, selenium, cucumber for more in depth test automation.

[@troythompson2]

Can’t believed I waited so long to try this. Cypress is amazing. Thank you Jeff!!

[@hariskrajina956]

So true. I waited my whole life for this to come.

[@stanislavcoros]

@@hariskrajina956 now go and watch selenide

[@kc2838]

I just started working with cypress with vue. And I absolutely love it. I just wonder why someone would choose selenium over this. Clearly, this is a winner.

[@craigcocker3458]

I have been toying with test driven development now for the last 3-4 years with various tools and i have never felt comfortable with it. For the first time after trying cypress i actually feel like i will only code using test driven development. Seriously this tool rocks, is very easy and will save me so much time. thanks again for a cool video and opening my eyes

[@Fireship]

Awesome, great to hear that. Testing Angular can be very cumbersome and Cypress really makes it more intuitive

[@Paretozen]

The amount of times I've restarted and pressed a button like a robot just to test something is embarrassing. I'm going to start with E2E now. Let the computer be the robot.

[@marwanfikrat7716]

Man, you are so cool. I'm sitting here thinking "I wish this guy was a senior at the company I (will) work in. I'd be such a good dev in a short period of time". Thanks for the video though! Cypress looks really cool and really easy.

[@kimberlyv5370]

Thank you for this! I needed a quick refresher on Cypress and this was perfect with the info and length of time to watch. :D

[@camstuart]

Another top notch video Jeff. Great work, and an excellent find. In fact, this week I was about to look into e2e testing for the project I recently inherited which has no tests at all. I would really appreciate the more advanced video you mentioned. I'm particularly interested in seeing how to manage firestore. I came from a ruby on rails world where the app would run in 'test' mode. And was connected to a seperate database instance dedicated to tests. Then the before blocks would reset the database to a known state before each test ran. In some cases deleting all data, and seeding a specific data set. That would be awesome 😁

[@Fireship]

Thank you! In Firebase, you should setup a dedicated test project where you can modify data without worrying about the consequences. Unlike rails, you need to write your own database teardown after each run.

[@zozo1603]

Hey! I am working with cypress for the last week. But you gave me some new knowledge again with this video so thank you! Really cool. You said in the video that you could talk about more advanced featutes I could listen to it!:) Off topic: Can you tell me what pages, forums are your sources when you make these videos?

[@JohnMitchellCalif]

Extremely clear and direct! Subscribed.

[@NeverCodeAlone]

Thx for this nice overview. We do a lot with Codeception tests and now look for more testing frameworks ;)

[@NazarMalyy]

I like.... no... I LOVE your music taste!!!! ...and how you explain cool things. Respect!

[@will_abule]

I love man! thanks allot that recording for test definitely I really need it. thanks once again

[@purduetom90]

I mean this in a good way... this video packs more information in less than 10 minutes than some do in an hour. Wow... Oh, and Cypress is powerful!

[@alexscriba6075]

Love your videos! Any time I need to learn a new technology, my first step is to check if there's a fireship video on the topic.

[@carrillocarlosce]

Interesting, let's see what you got =D, thank again man!!!

[@someguyonyoutube992]

Kudos for using KDE! Great tutorial.

[@richardramirez5746]

I really appreciate your videos. Thank you very much!

[@donjohnsonmanlapig9542]

Great content. Keep it up. Thanks!

[@SalmanMemon_Sam]

you saved my alot of time , i am very thankful to you

[@boradmay]

Very helpful video, thanks

[@xXAtom11Xx]

great video! thank you for the help :)

[@devonbradley]

Video request: Cypress End-to-End Testing with Firebase Emulator. I can't get it to work for the life of me. For me, the challenging thing is having the front-end, firebase functions, and any database seeding functions (firebase admin sdk in beforeHook, or pretest script) manipulate the same firestore. Love your videos!

[@OthmanAlikhan]

Thanks for the video =)

[@AMoktar]

Amazing brother thanks 🙏

[@mirzasisic]

Works great for low-to-mid complexity apps, much easier than Selenium.

[@city5joy]

thank you for the good tutorial. i had to slow down a bit bc things are going too fast for me.

[@SolomonKahsai]

I love you man!!!!!!!

[@Fireship]

Thank you for watching Solomon :)

[@sergtimosh]

Requesting Playwright review. Just started new project on it and it's the best tool I've ever used(my previous exp. selenium, cypress, puppeteer)

[@ramshah6733]

Thank you sir for cypress course. I just started learning it. i tried this selectors playground of cypress but it gives dynamic selectors which changed on page refresh. sir do you have any tutorial on cypress with Selectorshub?

[@EconomicsDomain]

Any follow up to this video? Was really informative

[@UniNetwork]

do we also use pageobjects to model the pages and possible actions to abstract away that and make the tests less brittle, like in protractor? also, why do you say using ID is brittle and changes a lot? I can see who CSS or xpath is, but ID? ID should be fairly consistent?

[@eddiejaoude]

Wow looks really interesting!! Is it possible for the tests to run fully locally or is an internet connection always needed as it saves the data in the cloud? I saw that Firestore has an emulate but it wasnt clear how to connect to it

[@wobsoriano]

Local is fine

[@eddiejaoude]

@@wobsoriano I ditched firestore, too many issues with the emulator, when there are so many better alternatives where an emulator is not required for local testing

[@yahyeabdirashid9716]

this is awesome so you can only focus on writing code

[@rahilkumar3558]

Is Cypress handles Dynamic element/ID automatically? if not, then how we should handle it?

[@cifuentes678]

Do you have an example of how to perform a login using Google, Github or any third party authentication service?

[@gunaynemetova2234]

Hello. Thank you so much for the video. I have a question. My test case runs in the chrome Not secure tab by default. How can I fix it? Thank you in advance!

[@kimchen1110]

Thanks for the video! Some user use Cypress in CI, but it take a lot of time to download it from repository, do you have some suggestion to improve this?

[@Fireship]

Well it's a full browser electron app, so it's going to take some time to download. Your CI server should be able to cache it after the first run.

[@gleb]

just use caching docs.cypress.io/guides/guides/continuous-integration.html#We-recommend-users and your CI will not have to re-download it again and again

[@kimchen1110]

gleb bahmutov Thanks!

[@Ar_3141]

great!

[@JC-ov8ko]

Hi, I am new subscriber. Can you please explain how to upload a txt. doc in Cypress. Thanks! Testing angular UI currently.

[@dr_rick]

My cypress test window doesn't logout, and when I try to logout on beforeEach and it's already logged out, it fails the test, I saw it should clear the cache and sessions before each test but that's not what's happening. Does cypress behave differently when using firebase auth? Thanks.

[@bijitbiswas6761]

Does it support interacting with elements inside s?

[@hayathbasha4519]

Hi sir, Can u pls let me know how to clear storage/cache before each cypress test file run

[@sayamqazi]

1:26 What do you mean? What does redux have to do with writing tests. State management libraries simplify a set of problems which would be really hard to solve otherwise and even if you did you most likely end up reinventing a state manager. Things like having the result of an API call available to components in different places of component tree.

[@oboiteosahon8156]

I had to listen to it multiple times to ensure I heard what I heard. Maybe he has a better explanation though, but IMO they solve different problems

[@pashabiceps95]

it is not the only complain that I have with this video

[@elliott.builds]

Looks like there is a broken link to this tutorial. Any chance of getting an updated link?

[@PassaGamer]

how to open a window tab in the same page cypress ?

[@NightsArrowz]

Love.

[@gradar7891]

Cool thang!

[@yilmaz8072]

Thanks for the video. BTW the url written at the description ends with a 404.

[@sreevisakha3967]

Can you share the theme and fonts used?. looks really nice.

[@rafacoluccijf]

I would like to know that as well.

[@RodrigoNishino]

Nice

[@laurenbrender352]

Should also probably note that protractor is becoming End Of Life at the end of 2022 and Cypress is one of the better alternatives

[@feridunaydogan9808]

Can cypress test Services, Pipes, Guards, Components?

[@73hd99w]

Why do you choose this tool over Selenium with Cucumber?

[@LocalGhost_8080]

Hi there! I'm trying to implement cypress in my react/graphql app but there are some things I don't understand: - Should we use our real service to make the operations or should we mock the service? - If we use our real service, should we use an existing user or we should create a new one, fill its data and then remove it at the end ? - The tests should be executed on the production environment or in a production-like one?

[@straycursor5562]

So im a begineer but I think the concept on end to end testing is all about mimicking exactly what the user exeprience is going to be like and going off that logic, it means you'll be testing using your real service in the production environement since this is what your user's interact with. That way you ensure that you have a realistic experience to what the user is getting. Take my words with a grain of salt though cuz i'm just a begineer

[@newgamesaga]

You should have a test environment setup for the testing. Means you need test DB, test API endpoints, etc.

[@priyagurde8968]

How to run multiple spec files from different folders in browser at once

[@gpzim981]

How is it different from Selenium?

[@infinteuniverse]

Is this better than Selenium based E2E?

[@andreagrossetti7589]

Thanks for the video, the url doesn't work anymore :(

[@kairunbee1914]

Hi is it possible in cypress to run 1. Specs file in parallel 2. It block in parallel

[@WasimAkram-ph9gp]

Hi Sir, I have a button in the If I click that button it will open a new window. I am able to click button inside the frame but not able to replace the parent window/use the child window Please help

[@ClimbnotWar]

How does Redux prevent bugs? Its just a state management library

[@denysmartych1585]

What do i do wrong? I have Error: connect ECONNREFUSED 127.0.0.1:49990 at TCPConnectWrap.afterConnect. Help pls

[@nuthanns6486]

Can I record and playback possible

[@LuizFlavioCLima]

how can i use cy.visit when i have a autentication before localhost300 (like AD microsoft) ???? sorry about my english, this not my native language

[@rahilkumar3558]

Is anyone working on Cypress tool? I am facing a challenge in switching the window. After going thro' cypress official website, it's a tradeoff that Cypress doesn't support Multiple Browsing operations. but there is one workaround using Stub and Spy. has anyone understood that workaround or anyone can help in this?

[@seriouslee4119]

But is it available for vue?

[@LEEEEEEEEEEE1]

"Writing a really good test suite is much more effective at preventing bugs than using a state management library like Redux" What?

[@kimgysen10]

It is a good introduction to cypress, but yes that didn't make sense.

[@watchfunnyvideos1]

I'm in a dilemma to continue with full E2E with less test and complete flow or use state management to write more tests with less execution time. Any suggestion?

[@Amaraticando]

I guess he's talking about the time travel capabilities of cypress vs Redux.

[@yogeshrathod953]

1:45 implementation starred

[@shahshilaheshan5633]

/nice one

[@qazyhn94]

If you run it on localhost its ok, what about running e2e tests at test enviroment after CI/CD?

[@udaikumar9969]

How to enable the Chrome dev tool while debugging. I used debugger command in code as per official cypress documentation but still not able to open dev tools for debug

[@imammuttaqin9203]

i think debugger only can pause proccess.

[@AndersonPEM]

8:29 music suddenly starts. Me: dafuq, which tab is making sound? O.o

[@itisdawning]

These links don't work

[@user-jo9vu8dk3f]

Why it's support only Chrome?? - need for more browsers - and one of the hardest Internet Explorer 11... if this one will be done - it will be awesome work*)

[@carlosalfredo657]

That's because cypress works with google chrome's puppeteer js, to manipulate chromium based browers I guess.

[@ItsCmiHD]

If I am using Angular, couldn't it be best to use typescript?

[@AlainBoudard]

You can, it's quite easy to write cypress tests in typescript. This tool is really nice.

[@ItsCmiHD]

@@AlainBoudard Is there a tool I can use to convert all my js tests into ts?

[@AlainBoudard]

@@ItsCmiHD well all your js code is typescript compatible, so you could just rename your files and start evolve your code. But I don't know any tool to convert.

[@pluraltest9242]

How to fire up app before running cypress?

[@AmxCsifier]

you can add the start command to your npm e2e script

[@thedeadparrotsketch]

Automation doesn't find bugs - it just highlights differences. Anyone who thinks it will help you find bugs, isn't an automation dev.

[@alex-vukov]

A bug is a difference between how something works and how it's expected to work so you are contradicting yourself.

[@Pingsmingu]

You went very fast in the video. Is there any very beginner video?

[@thunderxero]

All his videos are fast

[@AlekseyNew]

It looks like it is a common mistake to use chance library for tests. This way you are making your tests nondeterministic. If you use it I would advice to use it one time to prepare fixtures for your tests but not for every run.

[@Fireship]

Chance/faker should definitely be used sparingly. In this case we're signing up a unique user in the test project on each run, so I think it makes sense. You could write your own fixture or teardown code, but that's just extra work.

[@AlekseyNew]

Angular Firebase So you're shooting your leg because test should always succeed or always fail. In your case it could give errors sometimes depending on the e-mail pattern and the code.

[@carlosalfredo657]

I think he is using it just for example purposes. No provlem there, but you probably should mention that in the video. Nice work!

[@Storkz0re]

Lol, I understand nothing. Will try later after checking example PR with Cypress connection ;)

[@martinfreire6733]

Is it free?

[@Fireship]

Yes, of course :)

[@martinfreire6733]

Angular Firebase that's great! I get confused on your last time with the cost of the automated deploy.. thanks!!!!!

[@carlosalfredo657]

You need to pay for parallell tests or some cloud features which you may need in big projects. But cypress on its own is free and open source :)

[@thefakedeal]

I don't know why I'm watching this, I don't even use angular

[@isosthenie8271]

Cyprus is a debugging tool. It is not a testing tool. Testing is quality assurance. Debugging is not. Get your words right.

[@skaffen]

It's Cypress. Get your words right.

[@alexisparedes1805]

I didnt understand shhh and i am a software engineer

[@minhajulhaque9918]

No offense but this is automation from a devs perspective. As a professional tester this would not suffice. Look into UFT, selenium, cucumber for more in depth test automation.

[@nuthanns6486]

No coding knowledge

[@j.d.3890]

бля, серьезно кто-то назвал свой фреймворк "моча" ??? не могу перестать ржать, еще и "чашка мочи" на логотипе думаю он вряд ли популярен в рускоговорящих странах)

[@kelvinyap2350]

Wrong way to explain end to end testing

[@wasimakram2935]

Hi Is there any other way apart from cy.reload() to reload the page Thanks in advancd