Cypress (Web Testing Framework) Crash Course - 2021

Testing can be a hard & tedious process. Cypress tries to alleviate the stress from the testings process and make it fun to do. This crash course will cover how to use it in great detail.
Second Channel:
/ @laiture123
GitHub Repo:
github.com/harblaith7/cypress...
Udemy Courses:
GraphQL - www.udemy.com/course/modern-g...
Timeline
0:00 - Intro
4:00 - Cypress Setup
19:12 - .get() Command
51:43 - .contains() Command
1:01:30 - .find() Command
1:04:57 - Our First Tests
1:22:08 - Writing More Tests
1:37:16 - Testing HTTP Requests & Mocks

[@emmanuelehis1194]

Where have you been all my life?????? Your contents are exclusive. People barely talk much about stuff like this. Definitely leaving my notification on!! Great work man!

[@techjandro]

I just discovered your channel and I'm already obsessed, your content and way of explaining is just exceptional. Thank you!

[@thru_and_thru]

Your content is amazing man, you have become one my favorite educators on youtube! Your channel deserves to blow up.

[@user-xj2vc1qk6p]

I was lucky to find your tutorials learning serverless, than was graphql and now cypress. You are my favorite teacher, thank you so much!

[@tichouls5176]

You, Sir, are an amazing content creator. I wish your channel skyrocks in 2022. You truly deserve it

[@sarahharb6773]

Unreal information taught so well. Thank you for this Laith!

[@stylesg7818]

Thank you very much for your crash courses. Really great!!

[@haminazku]

Man, this was some high quality tutorial. Cheers!

[@chetanjain4616]

this was probably the best cypress tutorial I have seen, found you through Net Ninja's video so big shout out for him as well

[@anass6625]

Great quality content, i truly appreciate your hard work

[@mohamedlaraiche7319]

by far one of the best content creator, i really like way you explain things. thanks lot :D

[@mortamortute4191]

Your course is exactly what I needed! So well structured, concrete, nicely explained and in appropriate pace, I really enjoyed it very much, thank you!! I am going to check right away if you have even more courses related to Cypress :)

[@freivincampbell]

Thanks so much for all that time invested in, this free course is much better even than paid one ... 🤓💻

[@thebanishedone9182]

I got a new job as a software tester at a company which uses cypress so I wanted to get some basic knowledge in it. Thanks man, your course helped me a lot!

[@chandraadari2669]

Thanks a lot, looking forward to more advanced concepts.

[@somebodyoverthere]

This is the best tutorial I have EVER watched.

[@adarshnair9846]

Beautiful crash course. Thank you!

[@davidmulholland5450]

This was great, thank you, you speak very clearly and it is explained very well.

[@kwesigepi-attee1620]

Great tutorial..Best one I've seen so far and great example sites.

[@nadavfriedman5934]

No doubts, Laith - you are one of the bests and your channel should be much more evaluated. Thx a lot , great content

[@violaobrasileiro]

Amazing course. Very well explained. Thank you!

[@DC-xt1ry]

Thx for sharing, and looking forward to the next level up!

[@adittttya]

Thanks mate! Was very easy and intuitive to follow along =D

[@mfessal475]

Oh my God! Does someone really teach like this on youtube. Your teaching skills are amazing. Thanks from the community.

[@vasiliybutenko4378]

Thank you for this awesome useful tutorial!

[@Matrium0]

Awesome introduction- thank you!

[@NeoCoding]

always neat tuts thank you very much!

[@allandacasin9041]

Thank you so much! Excellent content!

[@kant859600]

Great video man, congrats for the explanation, you do it very well. Just add a point in the async code. Sometimes we need more than 4 seconds for our code to be asserted, in those cases, we want to pass an option in get/contains/find command, which should be like this cy.contains("This Accomplisment was Successfully Submitted", { timeout: 10000 }).should("be.visible"); In this example, the test will still check for 10 seconds instead of only 4. Nice crash course man.

[@agustinlavalla8892]

Wonderful introduction. Thanks so much!

[@TheFilburt88]

Excellent course, thanks a lot!

[@user-zn5ky3fw5h]

Wow, Laith, nice course, really enjoyed it, and cypress afterwards feels very nice tool to use in own projects) And of course, I totally agree that giraffe sound very offensive)

[@abe10]

This was great. Thank You.

[@MrVisheshsingh]

wow 🤩, thank you Laith!

[@patrickc.6183]

Great explanations!

[@cliffordowusuamponsah9532]

This video is terrific!😀

[@markuspxpx]

Thank you for all the knowledge

[@bobera21000]

Great work mate

[@martygo]

Better content about Test end2end and cypress. Thanks for share with us.

[@user-hm1nb6pu5k]

Awesome, thank u very much for this

[@sivaganesh4489]

Thanks a lot brother, everytiime i will learn something new from you

[@RizaHariati]

Thank you so much. And thank you for the Jest/React Test Library on NetNinja.

[@AlirezaGarshasbi-kr1on]

learnt alot. great content.

[@darencee4858]

thanks you're amazing! 🙌 🙌

[@jaimearriola1495]

The best course about cypress that I found in the internet and its free!! 😎wow!! it's pretty awesome. I ran into some issues but I was able to solve them 😄. Thanks so much for your great content!! Like and suscribe for you 😁😁

[@magnata219]

My god, such a perfect content that of yours, subscribed!! o/

[@hiteshsuthar1097]

I wish to watch all your content, just got suprised when i see it.

[@mohamedyahya7463]

thanks a lot ,really good job

[@michalkotlicki4710]

This is giraffing awesome!

[@eeebeltran5445]

I love you bro, greetings from Chile :)

[@sairaj5660]

Yours is professional content

[@gzhrk]

thank you so much , you are the best

[@abhishekthakur9459]

Nice. Useful content 👍

[@mahendranath2504]

Thank you so much 👍🏼🎉🙏❤️

[@namng5422]

how awesome channel !!

[@mahendranath2504]

Thank you 👍🏼❤️

[@brancode404]

Love your channel Laith. Can you do Nuxt and Django Ecommerce and Portfolio Website with deployment?

[@MuhammadBilal-cq6tp]

Great content

[@BjornOttenheim]

Cool, cool cool!!

[@Pingsmingu]

Very good content . Subscribed will watch all the videos . Thank you Can you do an example on conditional login in your test. Example: if i see grid being populated delete first and then add. If grid is empty to begin with then add content

[@sabuein]

Thank you.

[@ibrahimmttreestruct]

I Like it 👍

[@Rehankhan-qb9eb]

Very good video. It will be very helpful if you post video about some real testing (authentication with google lets say with changed origin) and not this child level label span etc testing.

[@filippetkovski9957]

Great work. Can you please code a TDD app that is a bit more complex. Thumbs up!

[@khattasallaman337]

Thanks

[@fabi8274]

"this is terrific"

[@Karan60191]

Ok I might be late in this party but surely I'm gonna subscribe , well explained video , thankyou :) +1 subscribe and notifications ✔

[@SAMEERKHAN-nd7ti]

can you please make tutorial on same with typescript react app and its how to setup with typescript and cypress

[@javapda]

what vscode packages do you use? specifically, to get vscode to recognize /// btw, great video - thank you

[@batuhankir8402]

great

[@gurusoftware9110]

Legends are not born.

[@laithacademy]

Yes, exactly

[@scally9341]

I wanted to watch this but without instructions on how to resolve the package problems in 2023, it's impossible for beginners to follow this tutorial. Probably this is expected, but just thought I'd put that out there.

[@Culo91sija]

Nice intro tutorial

[@thiagocruz1149]

Hey buddy great explanation. I am just having some difficulties finding the locators.spec.js after creating it under the new folder e2e that I believe it replaced the integration one. However, I deleted the example folder as you also mentioned and everything I can see now when I start the project is nothing less than cypress saying "Create your first spec". Any help I can get I appreciate.

[@Chron1cles31098]

You are the patrick jmt of Coding my friend.

[@MeriiTV]

Hello dude, first of all excellent cypress tutorial...I have some question for part of code its about "rewards.spec.js" - > should display a list of rewards with mock first time show me 3 stuff from "rewards.json" after second and third runing cypress showing me up all rewards. So my question is why this happen?

[@shahbazahmed119]

Thank you for such a content. but localhost:3000 its not running at my side. what's the error?

[@spongebob93lover]

for those who have a problem starting the app, replace your start script with "react-scripts --openssl-legacy-provider start".

[@lannguyen7460]

😍😍😍

[@wasimakram2935]

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

[@kairunbee1914]

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

[@ktw4071]

2:02:12 Just cuirous why this req.reply is getting caught in try & catch error ? You didn't set any statusCode (e.g 400), I doubt that req.reply() automatically sets POST response with 400. Any explanation?

[@slavonnord3210]

Hi everyone If anyone knows how to open tests that are located outside integration foder

[@shabnam7039]

Hi all, any one knows how to login to application with Microsoft authenticator from cypress. I m having application which redirects to Microsoft authentication and then log into the application. Any comments?

[@lkfranklin]

39:10 laith: zooming out actually makes it bigger.... that makes sense... i hope it makes sense.... viewers: not so much, laith! :D PIN IT.

[@schwarzarbyter]

i challenge you to dring a shot of booze every time he says "super"

[@27sosite73]

ahahahah n1, mate

[@adedoyinharleem3433]

@1:43:32 line 3 is not working because the asterisk ** are in reverse it should be "**/examples/*". Great tutorial. Easy to follow. Thank you

[@sirping]

Really to Debug... What?

[@andrijavranic5058]

might learn not to confuse hyphen with "slash"! great job otherwise.,

[@MrStefantoshkov]

min 46:36 not "SLASH" , it is called "HYGHPHEN"

[@27sosite73]

aahahahha n1

[@ShashotoANur]

Everyone knows saying giraffe is offensive

[@addicted2cookies]

is no one gonna mention that he always says "sy" instead of "cy" lmao

[@ShashotoANur]

I was about to comment that

[@lacis9546]

Why, what's the difference? I'm asking to learn. Doesn't the beginning of cycle and psychology sound the same? saı-

[@addicted2cookies]

@@lacis9546 its been a while since I last saw this video, but I believe I was referring to his spelling. You can see it for example at 30:14, where he says "sy" when instead he typed out "cy" in vscode. But yes, to answer your question, there is no difference between the pronunciation of cycle and psycology.

[@lacis9546]

@@addicted2cookies Thank you, addict ;)

[@GAVIGHUMMAN]

this tutorial is quite outdated

[@lkagan2000]

16:12 Cypress 9.5.1 "ignoreTestFiles": ["**/1-getting-started/*", "**/2-advanced-examples/*"]

[@tktutorialscom]

Any reason why you installed cypress as prod dependency? That was confusing for me, I did check later Cypress docs which states install it as dev dependency. But great work, thank you for the sharing

[@andrewa5080]

Hi Laith, Thanks for the fantastic video. It’s a life saver and good introduction for me into Cypress Automation. I have 2 questions though, are you going to make an updated version with Cypress 10 since alot has changed in the framework naming and structure? Can you also share your email pls, I want to contact you directly. Thanks, Andrew

[@zoehadwani1485]

I am facing this error pass two days and still haven't found solution. need urgent help. Error: read ECONNRESET { errno: -4077, code: 'ECONNRESET', syscall: 'read' } Error: read ECONNRESET at TCP.onStreamRead (node:internal/stream_base_commons:211:20) Thank you

[@user-lm4ko1md6b]

$ npm start > client@0.1.0 start > react-scripts start node:internal/modules/cjs/loader:535 throw e; ^ Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in D:\Denys\cypress-crash-course\project-1 ode_modules\postcss-safe-parser ode_modules\postcss\package.json at new NodeError (node:internal/errors:393:5) at throwExportsNotFound (node:internal/modules/esm/resolve:358:9) at packageExportsResolve (node:internal/modules/esm/resolve:668:3) at resolveExports (node:internal/modules/cjs/loader:529:36) at Module._findPath (node:internal/modules/cjs/loader:569:31) at Module._resolveFilename (node:internal/modules/cjs/loader:981:27) at Module._load (node:internal/modules/cjs/loader:841:27) at Module.require (node:internal/modules/cjs/loader:1061:19) at require (node:internal/modules/cjs/helpers:103:18) at Object. (D:\Denys\cypress-crash-course\project-1 ode_modules\postcss-safe-parser\lib\safe-parser.js:1:17) { code: 'ERR_PACKAGE_PATH_NOT_EXPORTED' } Node.js v18.12.0 Денис Литвин@LAPTOP-F9EB40EB MINGW64 /d/Denys/cypress-crash-course/project-1 (master) $ Why I have such problem after writting npm start? (I have written npm i)

[@kruno25]

1.npm install -g npm@latest 2.npm cache clean --force 3.rm -rf node_modules rm package-lock.json OR Remove-Item -Recurse -Force node_modules, package-lock.json 4.npm install 5.npm audit fix --force

[@helleyt1]

sy.get and data/cy almost did me in. lol

[@mfessal475]

Oh my God! Does someone really teach like this on youtube. Your teaching skills are amazing. Thanks from the community.