Testing React Applications, v2 Cypress Q&A
This course is no longer being maintained. We recommend the testing section of the Intermediate React course instead. We now recommend you take the Intermediate React, v5 course.
Transcript from the "Cypress Q&A" Lesson
>> Kent C. Dodds: Other questions? Yeah.
>> Speaker 2: It's running these tests in Chrome right now. Does it work in other browsers?
>> Kent C. Dodds: Yeah, good question. So right now, as far as I know, it doesn't support any other browsers. Well, with the caveat, supports running Electron. Yeah, there's a poll request open right now for Firefox, at least there was a month ago when I last checked.
[00:00:23] So it might be merched by now. And then there's work to support Edge as well. If I recall correctly, supporting Safari is actually really hard, just because Safari doesn't expose all the APIs that they need. Now that I think about it, I think that Safari just recently made some changes to make that easier.
[00:00:45] So we'll see what the future holds for that. So the question, the next question that inevitably comes up is, okay, well that's kind of a deal breaker for me and my team. We need to test cross-browser, and the question I always ask is, when was the last time your test caught something that they wouldn't have caught if your tests weren't running cross-browser?
[00:01:09] Maybe that happens a fair amount to you, but that never really happens to me and my team. We're not actually using Cypress. I use Cypress for my open source stuff I was unable to convince them that cross browser doesn't matter. Cross-browser matters but not as much as you think.
[00:01:24] In this day and age, most of the issues that you're running against with cross-browser problems are related to under polyfilling or under transpiling. And those are two problems that you solve one time. It's like, we have this problem and so I'm gonna add this Polyfill.io or I'm going to make sure I require Babel Polyfill or something, and then you never have that problem again.
[00:01:50] Or let's just update our Babel config and now that problem is gone. If you really are concerned about, I just need to at least open my app in all of these browsers. Then, that's great, just to have four Selenium tests that open your app and the browser, run through some really critical things that you are worried about with cross-browser compatibility issues, and then to the rest of your tests in Cypress.
[00:02:14] Because the value that you get out of Cypress is just so great that it seems a shame to throw away Cypress just for that last 2% of confidence that you miss out by not doing cross-browser. So what I would say is, use Selenium for a couple of tests to make sure things are running cross-browser okay, and then use Cypress for everything else.
[00:02:38] And so, cuz the decision really is, we're gonna have 100 Selenium tests that take hours to run. Or we're going to have 10 Selenium tests and then 1,000 Cypress tests that probably will still actually take less than Selenium, than 100 Selenium tests, because Cypress is so much faster.
[00:02:57] And then the development process is much faster as well, and that's why you can have that many tests with Cypress. So for me it actually feels like a no-brainer to, and you saw setting up Cypress is actually pretty straightforward. So I would, if cross-browser what really matters to you, then have both.
[00:03:17] Just focus mostly on Cypress and you'll get a lot of value out of that.