Testing JavaScript with Cypress - Full Course

Learn how to use Cypress to test JavaScript applications in this full course for beginners! You'll dive deep into the world of end-to-end testing, as you learn about setting up, writing, and executing robust tests to ensure the reliability and performance of your web applications.
✏️ Course created by @coderyan
💻 Starter project - github.com/coderyansolomon/cy...
💻 Final project - github.com/coderyansolomon/cy...
⭐️ Contents ⭐️
⌨️ (0:00:28) Introduction
⌨️ (0:01:52) Course Overview
⌨️ (0:04:04) Why Cypress?
⌨️ (0:08:24) Project Setup And Install
⌨️ (0:17:21) Cypress Describe Blocks
⌨️ (0:18:55) Cypress It Blocks
⌨️ (0:20:42) Cypress Commands
⌨️ (0:29:17) Cypress Getting Elements
⌨️ (0:30:29) Cypress Command Chaining And Assertions
⌨️ (0:55:39) Cypress beforeEach Blocks
⌨️ (0:57:55) Cypress Custom Commands
⌨️ (1:06:01) Testing Forms In Cypress
⌨️ (1:27:31) Multi-Page Testing
⌨️ (1:36:01) Cypress Intercepts
⌨️ (1:47:34) Helpful Cypress Methods
⌨️ (1:55:11) Testing A Grudge List Feature
⌨️ (2:10:57) Cypress Component Tests
⌨️ (2:26:37) Cypress Best Practices
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@coderyan]

Thank you for checking this course out! And thank you Free Code Camp for all you do for the community. I had a great time creating it and I hope you all enjoy it!

[@prashlovessamosa]

Good to see you on FCC love your teachings.

[@renatosousa9971]

Can't believe you're also a developer! I've been following your work at Revive Stronger for some years, thanks for sharing your knowledge, I started learning web development last year and now I'm on the grind to enter the tech field

[@coderyan]

@@renatosousa9971 That's awesome to hear you know me from Revive Stronger! Best of luck with getting into the tech field. Just let me know if there's anything I can do to help out

[@markthomasnoonan]

Ryan, thank you for creating this! freeCodeCamp has been an amazing resource for me, the FCC front-end cert was a huge part of my development as a programmer. I now work at Cypress and helped build some of what you are showing in this video. Learning Cypress early in my career helped me a lot too. So it just makes me so happy to see an FCC Cypress course like this. Absolutely made my day!

[@jotasenator]

on it right away, liking-sharing-downloading

[@nanonkay5669]

Timestamps: 0:00 Intro 1:52 Course Overview 4:04 Why Cypress? 8:29 Project setup and overview 17:29 Testing Fundamentals: Describe Block 18:54 Testing Fundamentals: It Block 20:50 Testing Fundamentals: Commands and interacting with elements 29:29 Testing Fundamentals: Getting elements 30:38 Testing Fundamentals: Command chaining & assertions 38:04 Testing Fundamentals: Writing first test 54:34 Running a single test using "only" 55:45 beforeEach 58:08 Custom commands 1:03:00 Testing Fundamentals summary 1:06:29 Testing forms 1:16:44 Doggo is tryna cuddle with his feet........ 1:16:58 Testing forms (contd) 1:17:32 Aliases and Retry-ability 1:28:26 Multi-page testing 1:36:13 Intercepts 1:42:20 Intercepts: Fixtures 1:47:48 Helpful Methods 1:55:20 "Grudge list" example 2:11:06 Component testing 2:26:44 Best practices 2:39:32 Fin

[@yogeshdevaggarwal]

From where did you get them?? I mean seriously are you actually writing them while just watching the video??

[@kalduntechnologies]

I really appreciated the content. This was a great refresher on JavaScript and Cypress seems like an excellent tool for web app testing!

[@ElinaStamb]

Thank you, it was so useful! I've already created few tests for our Angular application after watching your tutorial

[@spacexnix]

I've been waiting for a long time. thank you very much

[@jolness1]

Thanks for making this. I haven't used cypress for a couple of years and am interviewing for a role that is testing focused. Java testing has been my wheelhouse for the last couple years but need a refresher so I can jump in and not make a fool of myself. This seems to be just what I need.

[@aeonian8687]

perfect course again just in time

[@KamranV21]

Thank you, Ryan! This course was really helpful.

[@notsuio]

Good explaination and examples. 👏🏻

[@marwanabouesmaail5199]

Informative and the course I was looking for. Thank you so much

[@daddy7934]

Thank you brother we all really appreciate it 🙏

[@DThompsonDev]

Love to see more content on Testing! Cypress is great. Even used it at 2 companies I have worked at! Rock solid resource.

[@disrael2101]

is testing by itself a really in demand skill to get a job in?

[@brownknight8104]

Absolutely. Go look at how many job openings there are. SDET or QA Engineer. @@disrael2101

[@smpc500]

@@disrael2101 I got my first job in IT as a test developer. Now I'm working with Cypress!

[@mikejakusz1493]

@@disrael2101 QA is all testing. It's very important to have tests when implementing new features to production with a large app, they're essential to catching bugs.

[@ACHUAREM]

Much awaited. Thank you for this course.

[@smpc500]

Where's your async? :D

[@segovia102]

I agree that this makes testing fun. Compared to debugging your tests for 5 hours to work out why stuff is leaking between tests, DIY dentistry is fun! This is great content, thanks! Update: I spoke too soon. Am getting some flakiness in the testing. Getting htmlFor prop did not match when testing the form input, and this is causing Cypress test runner to hang indefinitely requiring a restart. Also some flakiness around the Testing Fundamentals click to expand the accordion item after we added div[role="button"] - test wouldn't work and then would. Further update: hanging was caused by .type() - can be fixed with: cy.get('selector').find('input').click().type('hi mom')

[@YoungMiner]

Thanks man for this course !

[@jenyakarpova2146]

great content, thanks!

[@skiphouston7392]

Fantastic. Thank you for this.

[@user-kv4tw6wc4w]

This was really helpful!

[@ammarhaidar5995]

Great video, thanks Ryan..!

[@BoolFalse]

love this vid almost as much as TOOL's last album 🎉

[@shafiulAlamShafi]

Wow!! What a timing video !!!

[@andreyli8634]

Thank you so much!

[@ricardorien]

Good stuff, thanks a lot!

[@Michael_Andish]

Thanks!

[@saimohankrishnabandarupall8785]

Right when i need it

[@rishiraj2548]

Thanks a lot

[@jayTzanTG15]

Thank you ryan

[@RogerDOdipo]

Amazing tutorial

[@tomasz6011]

Great video, very helpfull

[@TheFGrox]

Thanks a lot for the course! Will there be one with Playwright, also?

[@swdavis7042]

I am new to javaScript and Cypress. When I downloaded visual studio, my ide looks different from yours! Can you please share the info about the version of vs you are using?

[@MotherMaryprocathedral9]

i love your content

[@dangray5809]

Great course! However, the example app has a bug in it. The POST request on the "POST DATA" button returns an error every time.

[@marlbo4627]

Were you able to fix this issue?

[@ashutoshsingh-uh4io]

please make a similar project on playwrights from basic to advance E2E framework

[@disrael2101]

is testing by itself a really in demand skill to get a job in?

[@MotherMaryprocathedral9]

lovely

[@Calocarv]

The reason , I stopped using Cypress and jumped to Playwright was that every time I installed an update (which I was forced to do as it froze whenever it detected that I didn't have the latest) - the config got messed up and I had to fresh install cypress to get my tests working again. This was 3 years ago, I will give it another go this time round.

[@disrael2101]

any updates how is it this time? is testing by itself a really in demand skill to get a job in?

[@Calocarv]

@@disrael2101 it has improved, the only reason that it is preferred over playwright is that is somewhat easier to run the same tests on different environments. It is demand along with playwright a they are the latest tech and open-source.

[@disrael2101]

​@@Calocarv cool thanks so do you see a high demand in coming years for qa by itself (no dev) nowadays? no ai gonna replace it? haha.. thanks

[@Calocarv]

There will always be demand for QA .All Software is a product and no customer will want a product that does not have quality control. AI is not as advanced as the media is leading us to believe. Consumer confidence comes from reputation and reputation comes from people not AI. Would you choose wine made by machines in USA or people in Italy?

[@ichiroutakashima4503]

This could be really useful. I've been using Jest though.

[@disrael2101]

is testing by itself a really in demand skill to get a job in?

[@Zack9924]

any retrofit library course? or ktor?

[@PeteTaylor]

Great tutorial, I do have a tangential question though, what VSCode theme are you using @coderyan? It's very pleasing to look at - dark and with nice subtle colours.

[@its_funnih]

Do we have to install Cypress for each and every project OR Options 2: we can store cypress at a central llocation inlo cal C: drive and access it from there. If option 2: how to access Cypress / where to specify path for cypress?

[@jopadjr]

3.1k+...Thanks. Great tutorial !!!

[@swdavis7042]

Thanks for posting the video.Your dog is beautiful.

[@myJapanTV013]

getting error on doing npm install in the directory

[@jamesvickery6158]

Thank you for the great video! At 49:38 he adds a data-test to his accordion. When I type from the $ sign, my local environment doesn't seem to pick it up - so when I inspect the page after the string appears exactly as I wrote it instead of interpreting it and applying the ID automatically.. to workaround I just set the data-test to 'accordion-item-1' and called that directly in the test.. could there be some dependancies I am missing? Thanks in advance!

[@walkingin6375]

Is this not outdated? All the mention about jquery etc. . . Do people still use this for React, or is it generally Jest / Vitest?

[@marcinbjl]

hi guys, question for those who actually do work with cypress professionally - Is it a normal practice to pollute production code with test tags? are testers actually allowed to add them everywhere? or in reality elements are selected in more complicated ways? e.g. checking parents, siblings, by regex etc.

[@djillalirafil9749]

I think testers and developers discuss this, so test-id tags are added. And yes, Iv already seen test data id tags on a real website

[@user-qf7dt2yg7x]

what a lovely dog

[@WendyLiving]

I got an error while doing npm run dev, pls what can i do? Getting this error: ReferenceError: performance is not defined

[@FrontendFLow811]

course on playwright testing for writing E2E test cases

[@disrael2101]

is testing by itself a really in demand skill to get a job in?

[@FrontendFLow811]

@@disrael2101 not an in demand skill while interviewing but definitely a good one while you’re at the job

[@disrael2101]

@@FrontendFLow811 hmm thanks so do you see a high demand in coming years for qa by itself (no dev) nowadays? no ai gonna replace it? haha.. thanks

[@waleedsharif618]

Cyppres vs react testing library (for react), which one better ?

[@sahandsepidar4089]

not-related ; both have own capibilities ; react testing library is for unit-testing cyppress is for E2E testing ; theres no preference

[@disrael2101]

is testing by itself a really in demand skill to get a job in? @@sahandsepidar4089

[@yogeshdevaggarwal]

I like the way he made a whole website just for a tutorial 🗿

[@russozelinsky]

How to show stats for each browser if more than one browsers is used, and the same test is run twice?

[@hahamen]

Timed out retrying after 4000ms: expected '/fundamentals' to equal '/examples' why am i getting error? Even though it's according to the video

[@chadiesanagustin7260]

same

[@michaeledwardharris]

This reminds me of the guy who, years ago, was able to sneak a completely meaningless PR into the Linux kernel. He's now technically a "kernel contributor." Iirc, he git rejected numerous times, but for some reason, his final attempt got through.

[@Khanasad_]

Can a web application penetration tester watch this is it helpful for pentester?? I am new in it and found javascript as crucial language of web want to start learning .. and find ways to test

[@jordanmuller2536]

I don't know if it's specifically applicable directly to penetration testing but it certainly would help you understand the inner workings of JavaScript which could lead to insights that help you in pen testing. I guess what I'm saying is, it's not super related but it's good to learn new things to learn more about stuff in general! The more general knowledge you have the more specific niche knowledge you'll start to uncover.

[@jordanmuller2536]

That being said, if you don't know JavaScript, I would start with learning it before learning how to test it! Maybe worth learning in parallel but JS foundations are probably best to have before

[@raianforhad7057]

I have a question We will learn HTML CSS JavaScript for become a web developer So , which college degree I will take for a web developer? BSc in computer science? BSc in web development?

[@skyy_banerjee]

Computer Science.

[@HealthyBodyHealthyLyf]

BSc in either IT or CS

[@user-xg2du3bb9b]

cool video)

[@otisprogramming2437]

Aren't .find and .within the same thing when chained with the same .get(element)? What am I missing here?

[@sarvarbek_vakhobov]

Hi, First of All, Thanks for this tutorial. I have learnt so many things. But I have faced one problem on component testing. I created new spec, but I was not detected... can anyone tell me why I got this error?

[@betzelem5757]

Can we get some Playwright content next?

[@smpc500]

51:06 Testing is fun! It is my job :)

[@aishna7457]

Hello, I'm new here and i want to learn coding.while searching for some best coding websites and youtube channels to learn coding I came across this one. But I don't have any idea about this and don't know how to start and where to start. Could you guys please suggest me something?

[@freecodecamp]

Consider going through the free coding curriculum at www.freecodecamp.org

[@rajibhossain928]

What is the meaning of " TDS "? Can I know?

[@Ankit-fl3wl]

Please on Android development using new Ui technology

[@rajibhossain928]

❤️❤️❤️❤️❤️

[@suvrajitmondal2325]

Please make video in jest

[@ichiroutakashima4503]

This. I requested this months ago. 😂

[@ciprianov2006]

Nice vid bro, thx

[@user_8982]

01:30:15

[@James-uv7zt]

anyone else's cypress ( chrome or electron ) crashing after something ( im not sure what ) - but I open the app and it's back to "tests loading"

[@sebastianponce628]

i think i've got the same problem, sometimes while testing, the test spinner keeps loading forever

[@James-uv7zt]

mine was due to the mac window shutting down it caued the tests to fail@@sebastianponce628

[@taras-weezzy]

Add timestamps plsssss

[@mehrnazaboutalebi2862]

cant run the app.

[@ernestpfannen8920]

👁👁👍 1:02

[@RowafaEdits]

Can I edit your videos?

[@sobeidalagrange7129]

00:36

[@skyy_banerjee]

Are you guys reading minds? No seriously, are y'all? 😑🤔

[@spacebeetle]

you are not alone lol

[@skyy_banerjee]

@@spacebeetle Exactly 😅

[@rajendrawagle1854]

Exactly 😂😂😂

[@alirezagarshasbi6557]

just added cypress today :/

[@dharaniprakash3472]

Exactly they're 😅

[@SoStop]

Today was discussing the use of Cypress with team

[@samarbid13]

No examples on mocking authentication for tests?

[@torieptaka7149]

I dont see APi testing. Why not? do we really care about the frontend that much?

[@sazk4000]

why even bother uploading if you can't do timestamps

[@isambo400]

I’m showing this to African refugees

[@paul_reddy]

This video doesn't covers many things 😢😢😢😢😢😢😢 , 1 dislike .

[@wasd3108]

testing frontend, not javascript lmfao

[@mariaturzynska1592]

Too much talking.. to little coding

[@stirpro2073]

After hearing "Ask chatgpt or go old fashion and look up to docs" lost interest in video.

[@ShipWreck68]

At around min 50 the it("Accordion works correctly", () => { cy.visit("/fundamentals"); cy .contains(/Your test will exist in a describe block/i) .should("not.be.visible"); fails the assertion. Cannot get past this in the code example.

[@MynamedidntFitDonkey]

If you have to make changes to the code you are testing to make tests work, that's not a good practice.

[@Hypergraph]

i don't understand why thenewboston paused for years and later try to make its own crypto and failed.