Testing JavaScript with Cypress - Full Course
ฝัง
- เผยแพร่เมื่อ 20 ต.ค. 2024
- 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/cod...
💻 Final project - github.com/cod...
⭐️ 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.freecodeca...
Read hundreds of articles on programming: freecodecamp.o...
![⭐ฮิตในTikTok!! ( มะมะมะหมูเด้ง MooDeng ) Ver. แดนซ์ ReMix BY [ ดีเจกิต รีมิกซ์ ]](http://i.ytimg.com/vi/4noyAoMa7bQ/mqdefault.jpg)
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!
Good to see you on FCC love your teachings.
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
@@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
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!
on it right away, liking-sharing-downloading
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
From where did you get them?? I mean seriously are you actually writing them while just watching the video??
@@yogeshdevaggarwal He got it from the illuminati.
I came here with zero Cypress knowledge, Ryan you are a great tutor, you broke things down to the level of beginner and explained it clearly with relevant examples and tests,
I am confident to write Cypress test cases after watching this video!
Thanks Ryan
I really appreciated the content. This was a great refresher on JavaScript and Cypress seems like an excellent tool for web app testing!
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.
Love to see more content on Testing! Cypress is great. Even used it at 2 companies I have worked at! Rock solid resource.
is testing by itself a really in demand skill to get a job in?
Absolutely. Go look at how many job openings there are. SDET or QA Engineer. @@disrael2101
@@disrael2101 I got my first job in IT as a test developer. Now I'm working with Cypress!
@@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.
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')
Thank you, it was so useful! I've already created few tests for our Angular application after watching your tutorial
Great tutorial!! And your dog is the reason it became even more fun, most of the time I got distracted by him during the tutorial😄
Big thanks! Your explanations of the basic concepts were clear. Unlike other videos I've watched, yours kept me hooked from start to finish. Definitely deserving of a ⭐
Thank you, Ryan! This course was really helpful.
It was really a nice video in a normal length video, Now I am going to watch your TH-cam channel for finding some more useful contents like this one ....
I've been waiting for a long time. thank you very much
Thank you, Ryan. This was an excellent course.
Good explaination and examples. 👏🏻
love this vid almost as much as TOOL's last album 🎉
Much awaited. Thank you for this course.
Where's your async? :D
Informative and the course I was looking for. Thank you so much
perfect course again just in time
Great video, thanks Ryan..!
thanks man, really need this
Thanks man for this course !
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.
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
Fantastic. Thank you for this.
This was really helpful!
Wow!! What a timing video !!!
thanks man very helpful
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.
any updates how is it this time? is testing by itself a really in demand skill to get a job in?
@@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.
@@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
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?
Good stuff, thanks a lot!
please make a similar project on playwrights from basic to advance E2E framework
is testing by itself a really in demand skill to get a job in?
Thanks a lot for the course! Will there be one with Playwright, also?
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.
I got an error while doing npm run dev, pls what can i do?
Getting this error: ReferenceError: performance is not defined
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.
Great video, very helpfull
Right when i need it
Great content. But i need some clarification. If cypress already have a feature for components testing to test components in isolation. What is the need for jest and RTL? Can I just use only cypress for my e2e and components testing for my application?
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?
Computer Science.
BSc in either IT or CS
Amazing tutorial
3.1k+...Thanks. Great tutorial !!!
51:06 Testing is fun! It is my job :)
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!
where can i find the notes for the explanation provided in the video
What is the meaning of " TDS "?
Can I know?
getting error on doing npm install in the directory
course on playwright testing for writing E2E test cases
is testing by itself a really in demand skill to get a job in?
@@disrael2101 not an in demand skill while interviewing but definitely a good one while you’re at the job
@@AdityaSharan811 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
Great course! However, the example app has a bug in it. The POST request on the "POST DATA" button returns an error every time.
Were you able to fix this issue?
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?
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?
Consider going through the free coding curriculum at www.freecodecamp.org
Thank you so much!
Thanks!
Thanks for posting the video.Your dog is beautiful.
Is this not outdated? All the mention about jquery etc. . .
Do people still use this for React, or is it generally Jest / Vitest?
- its not outdated
- jquery is a dependency and it is still wildly used in the internet, not everything is react / vue / angular... etc
- yes, it is used to test lots of apps, although I personally see Playwright now getting the lead, but your mileage may vary
Thank you ryan
what a lovely dog
I like the way he made a whole website just for a tutorial 🗿
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?
the webpage it does not really work... I mean i tried to open it with chrome and it does not work.
This could be really useful. I've been using Jest though.
is testing by itself a really in demand skill to get a job in?
I don't know but for some strange reason I can see the Cy.intercept working as i provided the alias but Can't find the details in the console
Can we get some Playwright content next?
any retrofit library course? or ktor?
Aren't .find and .within the same thing when chained with the same .get(element)? What am I missing here?
Cyppres vs react testing library (for react), which one better ?
not-related ; both have own capibilities ; react testing library is for unit-testing cyppress is for E2E testing ; theres no preference
is testing by itself a really in demand skill to get a job in?
@@sahandsepidar4089
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?
Are you guys reading minds? No seriously, are y'all? 😑🤔
you are not alone lol
@@spacebeetle Exactly 😅
Exactly 😂😂😂
just added cypress today :/
Exactly they're 😅
Timed out retrying after 4000ms: expected '/fundamentals' to equal '/examples'
why am i getting error? Even though it's according to the video
same
where you able to solve it? im having the same error
Next's bug. Upgrade nextjs to version 14 and that solved the problem for me
Thanks a lot
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
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.
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
Please on Android development using new Ui technology
i love your content
Please make video in jest
This. I requested this months ago. 😂
informative
01:30:15
I dont see APi testing. Why not? do we really care about the frontend that much?
cool video)
Nice vid bro, thx
cant run the app.
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"
i think i've got the same problem, sometimes while testing, the test spinner keeps loading forever
mine was due to the mac window shutting down it caued the tests to fail@@sebastianponce628
lovely
Today was discussing the use of Cypress with team
Can I edit your videos?
Add timestamps plsssss
This video doesn't covers many things 😢😢😢😢😢😢😢 , 1 dislike .
No examples on mocking authentication for tests?
why even bother uploading if you can't do timestamps
❤
00:36
I’m showing this to African refugees
❤️❤️❤️❤️❤️
43:39
1:28:31
what the dog doin..
testing frontend, not javascript lmfao
This course is way too basic and I feel like I have wasted my time watching this video.
Too much talking.. to little coding
After hearing "Ask chatgpt or go old fashion and look up to docs" lost interest in video.
If you have to make changes to the code you are testing to make tests work, that's not a good practice.
i don't understand why thenewboston paused for years and later try to make its own crypto and failed.
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.
"Hey Beavis.... at th-cam.com/video/u8vMu7viCm8/w-d-xo.html .. he said Doo Doo.... uhh huh.... uhh huh"