Cypress in 100 Seconds

Ғылым және технология

Cypress is a complete testing solution for web developers. It uses a browser-based test-runner to visually validate your JavaScript code and makes test-driven development fun.
#webdev #js #100SecondsOfCode
🔗 Resources
Cypress Docs docs.cypress.io
TDD Explained • Test-Driven Developmen...
Free E2E Course from ‪@DevAcademyCom‬ courses.dev-ac...
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- Testing with Cypress Basics
- What is Cypress?
- Cypress vs Jest
- Cypress vs Jasmine
- JavaScript Testing
- JavaScript TDD
- JavaScript BDD

Пікірлер: 412

  • @leoaso6984
    @leoaso69842 жыл бұрын

    Ah yes, automated UI testing. That thing I'm definitely absolutely positively going to start doing... one of these days.

  • @ASDFG856

    @ASDFG856

    2 жыл бұрын

    I have never seen a comment I relate more with.

  • @SpongeAndLeo

    @SpongeAndLeo

    2 жыл бұрын

    I basically exclusively test network calls using cypress these days. Powerful framework.

  • @daniel29009

    @daniel29009

    2 жыл бұрын

    Meet converted pyramid, tapes server and unit size discovery.

  • @attila2246

    @attila2246

    2 жыл бұрын

    So all your PR's get accepted with 0 unit tests?

  • @leoaso6984

    @leoaso6984

    2 жыл бұрын

    @@attila2246 Me: Hey, I just created a new button component. Pls review. Me: OK, but you didn't add any unit tests. Me: uhhh yeah, but... when I opened the browser and clicked it, it did the thing. Me: ...........eh, good enough for me **merges PR**

  • @negary666
    @negary6662 жыл бұрын

    I don’t even do web development but these videos are just too entertaining

  • @dmiradakis

    @dmiradakis

    2 жыл бұрын

    Can confirm, I’ve been sucked in.

  • @SirusStarTV

    @SirusStarTV

    2 жыл бұрын

    It's interesting that for someone it's entertainment but for others it's boring af

  • @n3vin192

    @n3vin192

    2 жыл бұрын

    Same.

  • @recnepSpencar
    @recnepSpencar2 жыл бұрын

    Been using Cypress for a year. Absolute game-changer over Selenium, webdriverio, and protractor.

  • @StEvUgnIn

    @StEvUgnIn

    2 жыл бұрын

    Those tools are not for testing but for scraping

  • @riddixdan5572

    @riddixdan5572

    2 жыл бұрын

    have you ever looked into Playwright? if so, what are your thoughts?

  • @rasmusfalk-jensen8221

    @rasmusfalk-jensen8221

    2 жыл бұрын

    @@StEvUgnIn That is just not true. Both WebdriverIO and Protractor were built for testing purposes. While Selenium might just be a tool for browser automation, it has seen wide use for testing purposes as well.

  • @recnepSpencar

    @recnepSpencar

    2 жыл бұрын

    @@StEvUgnIn You’re not wrong that it can be used for scraping. Any E2E tool would do the trick well. It’s primary purpose thing is testing. Puppeteer is more what you’re thinking of for scraping.

  • @SpinnedRock

    @SpinnedRock

    2 жыл бұрын

    So if I am still using selenium, you would recommend me to change to cypress? ;-)

  • @andreas543
    @andreas5432 жыл бұрын

    Suggestions for 100 second tuts: - Oauth2/OpenID Connect - Swagger/OpenAPI 3 - Logging/Monitoring - Caching solutions - Phaser 3

  • @Attinderpal

    @Attinderpal

    2 жыл бұрын

    SAML?

  • @yonatancohen7642

    @yonatancohen7642

    2 жыл бұрын

    julia

  • @rubekjoshi

    @rubekjoshi

    2 жыл бұрын

    GSAP too

  • @Kyle-xk2rb

    @Kyle-xk2rb

    2 жыл бұрын

    WebRTC

  • @heberjulio6303

    @heberjulio6303

    2 жыл бұрын

    Lisp

  • @Tygrysek_
    @Tygrysek_2 жыл бұрын

    Cypress is pretty fun, but sometimes really tricky. The funniest part of it for me was when I had to do conditional testing, and I was new to Cypress. I relied on the docs and I found a section for conditional testing. It states: "don't worry, there are ways you can do with conditional testing! for example, you can... remove the need to do conditional testing!" Thank you Cypress, very cool. PS: No, I couldn't do that

  • @MisterAndreSafari
    @MisterAndreSafari2 жыл бұрын

    I have to say it again: your „video-editing“ and „story-telling“ skill is OUT of this world 😄 Thank you so much for your work 🙏

  • @vicradon
    @vicradon2 жыл бұрын

    Thank you Jeff for another amazing 100-second tutorial. Anytime Jeff explains a concept, it becomes easier and more approachable for me.

  • @deathlight128
    @deathlight1282 жыл бұрын

    Cypress is awesome! I've spent more time debugging the jest config than testing the code base !

  • @JohnBrandon
    @JohnBrandon2 жыл бұрын

    I will almost certainly never use this, but the clarity and quality of your videos is so outstanding that I can’t get enough. Thanks!

  • @PfhorShark
    @PfhorShark2 жыл бұрын

    Been using cypress for 3 years after using selenium for god knows how long. I highly recommend this for TDD, your feedback cycle is almost immediate, you aren't coupled to chrome/driver versions, it's altogether the best way to write your integration tests first, see them not work, then repeatedly do the next thing it said didn't work. Simple.

  • @erick289777

    @erick289777

    Жыл бұрын

    Did you solve the lack of support of iFrame and multitab from Cypress?

  • @MrBloodySpirit
    @MrBloodySpirit2 жыл бұрын

    For me, I moved from Cypress to Playwright. It's much faster and can do almost everything Cypress can!

  • @JPeetjuh

    @JPeetjuh

    2 жыл бұрын

    That, and, so much of Cypress bugs me. Its Promises are not actual native browser Promises and can't be awaited. The magic strings for assertions. And if I wanted to see how many rows a table has, then submit a form and check if that table now has count + 1 rows, Cypress seems to actively hinder me. I found Playwright much more intuitive, friendly and robust. The only thing I really liked about Cypress was its execution window where you could "time travel" as Jeff says.

  • @threewestwinds

    @threewestwinds

    2 жыл бұрын

    ​@@JPeetjuh The promises thing is super annoying, and agree that the magic strings are not my favorite way of doing assertions. Even though it has a promises-like API, Cypress is actually a command queue, not a promise chain. The use of promise-like syntax (and especially the docs trying to say it's promise-based) is very misleading, 100%.

  • @graffhyrum

    @graffhyrum

    2 жыл бұрын

    The cross domain restrictions and local single threading are also pretty annoying.

  • @nathanlamaire
    @nathanlamaire2 жыл бұрын

    Good thing about using these tools is that it also helps you to narrow down use-case of the application you make and only implement essentials.

  • @shaneckel
    @shaneckel2 жыл бұрын

    This is the first time I've ever responded to a KZreadr request ever in the decade of watching KZread videos but yes, I would like to see more algorithm videos. Excellent explanation of the search. This feels weird. Great work on everything you post.

  • @darkknightdks
    @darkknightdks2 жыл бұрын

    Absolutely love your videos. I have been using Cypress for over a year now and I don't want to go back to those Protactor, Selenium stuff. Also, Cypress has something called `data-cy`, which is added to the elements that you want to loop up in your tests. `data-cy` parameter can have a unique name and enables the test to directly find the element in the dom. This is an amazing feature that we use everyday and avoid looking up using html and css tags as they can change.

  • @nicolasramos7084
    @nicolasramos70842 жыл бұрын

    I've literally started working with cypress for our application at work this morning. Awesome timing as usual

  • @seantillman7490
    @seantillman74902 жыл бұрын

    I just started testing with Cypress this year, it's been real cool to use. Thanks for the videos as always!

  • @danisnicee_

    @danisnicee_

    7 ай бұрын

    How's it going so far man?

  • @reallynotfamilyfriendly
    @reallynotfamilyfriendly2 жыл бұрын

    the line "to figure out precisely why your code sucks" is so hilarious to me

  • @rajanlalala

    @rajanlalala

    4 ай бұрын

    😁

  • @mstjepan7237
    @mstjepan72372 жыл бұрын

    Litteraly started learning Cypress yesterday, its so amazing for testing

  • @CodingWithLewis
    @CodingWithLewis2 жыл бұрын

    Cypress is seriously such a game changer

  • @WebDevYTLearningAccount
    @WebDevYTLearningAccount6 ай бұрын

    Thank you for the quick video. I am on a different team temporarily and this helps me better understand the purpose since I have mostly written backend code.

  • @kristofgilicze
    @kristofgilicze2 жыл бұрын

    I like Cypress, it really does work like a charm. One thing to note is that the Electron runtime is bundled / baked in, which arguably is pretty stupid. There is no way to install Cypress headless, even though most people use a real browser to run tests.

  • @DaraulHarris

    @DaraulHarris

    2 жыл бұрын

    > There is no way to install Cypress headless I was wondering how I might use it to do my automated testing in gitlab-ci. The docs mention being able to do this, though.

  • @threewestwinds

    @threewestwinds

    2 жыл бұрын

    @@DaraulHarris Cy can absolutely run in CI. Doing an npm install also downloads the cypress binary, which is fairly large, and comes with electron baked in.

  • @davloche6763

    @davloche6763

    2 жыл бұрын

    There is a headless mode for your tests 😉

  • @kristofgilicze

    @kristofgilicze

    2 жыл бұрын

    There is headless mode, though Electron included no matter what. The "slim" docker CI image is roughly 600 mb. To be fair this includes Chrome and FF also.

  • @joshuaokoro9447
    @joshuaokoro94472 жыл бұрын

    From my experience using Cypress, I can see it really makes testing fun. For me, the fun part is watching Cypress run the test and everything passes. Definitely give it a try if you haven’t. Might end up loving it

  • @galgrunfeld9954

    @galgrunfeld9954

    2 жыл бұрын

    I've been avoiding learning testing for years just because it was so boring for me. Even when I sat down with myself and asked myself what technologies I should learn to become a better well-rounded full-stack developer, testing was in there, but was always the last one I wanted to do. So I learned a few technologies, but never picked up testing. But this framework makes me actually want to learn it, seems so cool!

  • @joshuaokoro9447

    @joshuaokoro9447

    2 жыл бұрын

    @@galgrunfeld9954 I ran away from testing for so long until I started seeing the importance. Especially working with a team with constant update, testing would catch a lot of bugs before it gets to staging or production. These frameworks have made it enjoyable so that’s a bonus. Funny thing, I’m the one now rooting for testing

  • @galgrunfeld9954

    @galgrunfeld9954

    2 жыл бұрын

    @@joshuaokoro9447 yeah, I'm very much aware of the benefits. Luckily, or maybe not, I so far worked only in small teams and did a lot of things independently so TDD wasn't much of a necessity, but I can definitely see it being crucial in so many places.

  • @SoreBrain
    @SoreBrain2 жыл бұрын

    Starting into web development is great especially when you are able to enjoy such amazing content

  • @OfficeArcade
    @OfficeArcade2 жыл бұрын

    I’m a big cypress advocate. Absolute game changer!

  • @RemX405
    @RemX4052 жыл бұрын

    This and TestCafe make E2E an absolute breeze for any web dev.

  • @aylictal

    @aylictal

    4 ай бұрын

    I had to make the choice of using testcafe over cypress for my company 3 years ago. Main reason was cypress didn't support safari, nor s.

  • @jon1867
    @jon18672 жыл бұрын

    If it were me, I wouldn't use it for unit or integration tests. But it's amazing for UI or E2E tests

  • @mahmudzaman5445
    @mahmudzaman54452 жыл бұрын

    Really cool. Planning to use it on my next side project.

  • @TomDoesTech
    @TomDoesTech2 жыл бұрын

    You forgot to add the part about nobody ever maintaining the tests

  • @SpongeAndLeo
    @SpongeAndLeo2 жыл бұрын

    Been using cypress for 4 years. It's incredibly powerful and I love it.

  • @edgarhnd
    @edgarhnd2 жыл бұрын

    I was about to launch my app to production without testing at the end of the week.. Thanks, that seems to be exactly what I need !

  • @brightpixeluk
    @brightpixeluk2 жыл бұрын

    Been using Cypress with TestingLibrary and MSW for a while and they are great for getting tests done fast.

  • @vnm_8945
    @vnm_89452 жыл бұрын

    I worked as an automation tester using Cypress, it was cool.

  • @jacobshuman1650
    @jacobshuman16502 жыл бұрын

    I’d love one of these videos for playwright! I tried cypress and while it was really cool (especially with the test runner) it felt a bit dated imo. The lack of native promises really hurt my experience.

  • @MineToaster12
    @MineToaster122 жыл бұрын

    I prefer playwright over cypress, it's more robust though ofc looks less fancy than cypress. What cypress killed for me is them not support any http/3

  • @HankyAd

    @HankyAd

    2 жыл бұрын

    I really like using Playwright, but it just doesn't work in CI for more than a week before something explodes and it stops building I should look into putting it into a docker container

  • @EricSundquistKC

    @EricSundquistKC

    2 жыл бұрын

    Also left Cypress for Playwright, as getting our auth in all the tests was a nightmare in Cypress

  • @threewestwinds

    @threewestwinds

    2 жыл бұрын

    Cypress's coming support for cross-domain communication (and the Sessions API) should make auth a lot less painful. Of course, "It's coming" is not the most useful answer. ^^;;

  • @moazahmed5388
    @moazahmed53882 жыл бұрын

    I've just experienced my first BSOD for a while , while watching this video. it makes sense now .

  • @logichog4181
    @logichog41812 жыл бұрын

    thanks for this one bro, I needed it

  • @damar1967
    @damar19672 жыл бұрын

    100 Seconds video ideas: - Backing up hard drive - Wiping history - Getting some RAM a few megabytes - Logging in and logging out

  • @aryasaktiflister_aw
    @aryasaktiflister_aw2 жыл бұрын

    idk what a rails dev like me is watching this for but that looks cool

  • @weikeshi1788
    @weikeshi17882 жыл бұрын

    Just started to write tests for my project, and see this today

  • @siydge
    @siydge2 жыл бұрын

    My bud who I work with is from Cyprus, he's going to go crazy after seeing this video... Likely for both the name and what it does.

  • @Rey_R_
    @Rey_R_2 жыл бұрын

    E2E test is great if used properly. Never test all the things only with E2E. Make a lot of unit and integration tests. Then, test the end-user journey with E2E test.

  • @tomascarignano5002

    @tomascarignano5002

    2 жыл бұрын

    Could you explain real quick why?

  • @Eagle3302PL

    @Eagle3302PL

    2 жыл бұрын

    @@tomascarignano5002 It's mostly about cost, e2e test take longer to run, longer to develop, are more brittle (prone to failure) and more time consuming to maintain than integration/unit tests.

  • @ibadsiddiqui1
    @ibadsiddiqui12 жыл бұрын

    just what I needed! 🤩

  • @mohammadfarhanr6650
    @mohammadfarhanr66502 жыл бұрын

    This content is always awesome. I am always curious how you can manage so many different techs, do you have experience using them throughout your career? Or do you just learn it like 1 week and make a video of it? or how? I am always amazed by how you deliver your content.

  • @skriptkid4292
    @skriptkid42922 жыл бұрын

    this is awesome, i didnt even know what cypress was 100 seconds ago

  • @konnilol4
    @konnilol42 жыл бұрын

    I like how it just isn't "if" or even "when" anymore but straight up "why your code sucks"

  • @PhilipAlexanderHassialis
    @PhilipAlexanderHassialis2 жыл бұрын

    Excellent video as always! And now that you are delving into test territory, how about a nice vitest in 100 seconds? I think its time!

  • @amoodaa
    @amoodaa2 жыл бұрын

    We've ended up using playwright instead of cypress, had some problems with ts with cypress, and playwright setup was just smooth as butter

  • @evanhruskar
    @evanhruskar2 жыл бұрын

    I've been waiting for this video. The automatic loading feature doesn't always work properly (doesn't work for XHR requests). But It's 100x better than Selenium. Highly recommended.

  • @devmeta1478
    @devmeta14782 жыл бұрын

    Okay, I guess my company just made another decision and that is which testing tool to use for front-end. :D Thanks Jeff

  • @parthipankalayini8
    @parthipankalayini82 жыл бұрын

    Sir, waiting for more rust lang and golang videos 🙌

  • @alfredogrande413

    @alfredogrande413

    2 жыл бұрын

    Same here

  • @spongechameleon6940

    @spongechameleon6940

    2 жыл бұрын

    Rust and *elixir videos

  • @awabqureshi814
    @awabqureshi8142 жыл бұрын

    I'd love to see a purescript video! Maybe even a beyond 100 seconds on it too.

  • @emstudios14
    @emstudios142 жыл бұрын

    This is so cool.

  • @Zandercraft
    @Zandercraft2 жыл бұрын

    "To figure out precisely why your code sucks..." Lol! I feel called out for some reason.

  • @connorallen162
    @connorallen1622 жыл бұрын

    It's funny how I watch these videos once and I'm like "that's neat" then a month later I'm like "wait if I actually used that it could absolutely transform my development workflow!"

  • @PBKB
    @PBKB2 жыл бұрын

    I'm using Playwright. Amazing tool. Build a suite to test all our countries (work for a B2B supplier)

  • @rtemis9016
    @rtemis90162 жыл бұрын

    finally found what I needed. thanks Jeff !

  • @nullpointer1755
    @nullpointer17552 жыл бұрын

    Can you make a video about Data Oriented Programming and ECS (Entity Component Systems) ?

  • @its_vincesanity
    @its_vincesanity2 жыл бұрын

    I really love cypress ❤️ Even now I have to use React, I feel save to delivery some quality 🙌🏻

  • @LiamODonnellDev
    @LiamODonnellDev2 жыл бұрын

    I was struggling with something in webdriver and it looks like Jeff and the Algorithm (good name for a band) delivered Just In Time ;)

  • @recker7017
    @recker70172 жыл бұрын

    this channel is becoming very js oriented

  • @rafsoverflow
    @rafsoverflow2 жыл бұрын

    I'm trying my hardest to dig myself out of tutorial hell but you keep making these awesome videos that make me want to dig myself deeper. Fireship is not good during tutorial rehab.

  • @adi.ranjan007
    @adi.ranjan0072 жыл бұрын

    Are you fucking psychic, just needed this ❤️

  • @dadsfads
    @dadsfads2 жыл бұрын

    Can you do one on Cypress Hill next?

  • @Patrickdaawsome
    @Patrickdaawsome2 жыл бұрын

    Playwright is a great lowkey Cypress alternative.

  • @aaronbell5994
    @aaronbell59942 жыл бұрын

    These little jabs always make me laugh 0:39 😂

  • @DogeMultiverse
    @DogeMultiverse2 жыл бұрын

    Was just looking at javascript testing! How do you always come up with timely content? Thanks again!

  • @eliascotrim51
    @eliascotrim512 жыл бұрын

    What are the advantages of something like Jest compared to Cypress?

  • @TheMrBvcx
    @TheMrBvcx2 жыл бұрын

    Fireship is a modern hero

  • @GautamKhatter
    @GautamKhatter2 жыл бұрын

    Next video should be “Types of tests” in 100 seconds.

  • @spencjon4822
    @spencjon48222 жыл бұрын

    'Love Cypress, highly recommend

  • @futballboy101
    @futballboy1012 жыл бұрын

    Do a video of cucumber bdd integrated with cypress. This brings the three amigos together and speak the same language. Let me know if you’d like some insight as to why this approach is amazing.

  • @diegolikescode
    @diegolikescode2 жыл бұрын

    good content, as always.

  • @Kawacozy
    @Kawacozy2 жыл бұрын

    I want to clarify that in many SPA projects, cypress is a bad choice, leads to flaky tests. I'd recommend playwright if you use react and etc.

  • @TheDogn
    @TheDogn2 жыл бұрын

    0:35 precision is important in these matters.

  • @_sevelin
    @_sevelin2 жыл бұрын

    What a coincidence, I was learning Cypress right now already.

  • @NicolasPare
    @NicolasPare2 жыл бұрын

    I'm not sure I need a sophisticated tool to tell me my code sucks, I have co-workers for that!

  • @owenwexler7214
    @owenwexler72142 жыл бұрын

    My company would not have gotten testing done as quickly as we did without Cypress.

  • @dinosaric4862
    @dinosaric48622 жыл бұрын

    Love your videos!

  • @BillyHudson1
    @BillyHudson12 жыл бұрын

    This video got me into cypress, pretty f-n dope. I still need testing for Electron tho so I'm using Playwright since Spectron just got deprecated. Need to decide if I should switch from Mocha to Playwright Test as my Electron test runner.

  • @BillyHudson1

    @BillyHudson1

    2 жыл бұрын

    Though reading these comments maybe the right choice is to go full on playwright. I'm still investigating. I do like how cypress works but obviously a lot of the pain points I hit already are a common thread.

  • @diogo405
    @diogo4052 жыл бұрын

    Liking before watching 👍🏽

  • @ArnavSingh-im5bj
    @ArnavSingh-im5bj2 жыл бұрын

    More about cypress please and also about load testing of APIs

  • @imusingwindowsbtw1469
    @imusingwindowsbtw14692 жыл бұрын

    This is why I develop command line utilities.

  • @shlemekian
    @shlemekian2 жыл бұрын

    Currently trying to decide between Cypress and Playwright for e2e testing on a large project at my job. What's the chance you have a playwright video on the way? :) Great stuff as always.

  • @so-dz3px
    @so-dz3px2 жыл бұрын

    Cypress for UI and PactumJS for API

  • @PatricioHondagneuRoig
    @PatricioHondagneuRoig2 жыл бұрын

    Cypress is love. I don't wanna touch Selenium ever again.

  • @reggiemate7288
    @reggiemate72882 жыл бұрын

    Now I will defs test my own projects /s

  • @jeromesimms
    @jeromesimms2 жыл бұрын

    *fireship on forms: hi mom

  • @IAmNumber4000
    @IAmNumber40002 жыл бұрын

    I'll add it to my list of the 8 trillion Javascript tools and frameworks I still need to evaluate lol Jokes aside I will probably check this out first since it actually looks super useful

  • @tyrizzle3
    @tyrizzle32 жыл бұрын

    Do one of your things on R! I don't think I'm allowed to say I know how to code till you do 😅💪👍🧠

  • @erik9817
    @erik98178 ай бұрын

    Nice! Does any of you Cypress pros know if it allows for checking the order or Redux actions in the Redux Chrome tab?

  • @neonai9213
    @neonai92132 жыл бұрын

    maybe do some more non-frontend-oriented stuff like neural networks (tensorflow, pytorch) or some other interesting stuff like a turing machine

  • @manavsharmaer
    @manavsharmaer2 жыл бұрын

    Please make some videos on load testing tools

  • @masrafirinvi
    @masrafirinvi2 жыл бұрын

    Helpful! Thank you so much❤️

  • @williammoriarty3402
    @williammoriarty34022 жыл бұрын

    Here is a sincere suggestion, can you please do one on julia?

  • @GlitchyPSI
    @GlitchyPSI2 жыл бұрын

    wow OK cypress looks super cool

  • @nadavbarsheshet2512
    @nadavbarsheshet25122 жыл бұрын

    Thank you! Can you please do Julia next?

  • @maticz3923
    @maticz39232 жыл бұрын

    Make a video about the CSV file type You woukd just say its values separated by commas and then stay awkwardly silent for the rest of the time

  • @RobertoDuransh
    @RobertoDuransh2 жыл бұрын

    awesome tool TY for this... btw i love to see fastApi in 100 seg

  • @UselessDuckCompany
    @UselessDuckCompany2 жыл бұрын

    I hear html over the wire is coming back, any news on that?

  • @Dima1415

    @Dima1415

    2 жыл бұрын

    Isn’t that just rendered html on the server? He definitely covered many frameworks that focus on that like nextjs. HTML over the wire has never stopped being a thing really.

  • @mhm6421
    @mhm64212 жыл бұрын

    Holy, thats so epic!

Келесі