[HN Gopher] Testing React Apps in 2022 with Cypress: An In-Depth...
___________________________________________________________________
Testing React Apps in 2022 with Cypress: An In-Depth Guide for
Beginners
Author : kiyanwang
Score : 54 points
Date : 2022-10-01 15:07 UTC (7 hours ago)
(HTM) web link (profy.dev)
(TXT) w3m dump (profy.dev)
| kkarimi wrote:
| Does anyone recommend a similar guide for playwright?
| ipnon wrote:
| I have always found the Playwright docs themselves to be
| sufficient for all practical purposes. Common use cases all
| have individual guides on how best to perform them. For use
| cases that require some combination of results, the entire API
| is well-documented.
|
| https://playwright.dev/docs
| latchkey wrote:
| Cypress is good if you need to emulate a user navigating through
| screens on a site.
|
| React Testing Library is good if you want to unit test individual
| components.
|
| They both have their uses.
| whynotminot wrote:
| It's classic journey testing vs unit testing, and you should
| definitely do both.
| lmiller1990 wrote:
| I made some content showing how the new Cypress Component
| Testing can also handle things you might use RTL for [0]. You
| can evening use the TL finders (but I don't in this series).
|
| [0]
| https://youtube.com/playlist?list=PLC2LZCNWKL9bLQrMQKfTnpihg...
| jkettmann wrote:
| Fyi with Cypress v10 and the new component testing feature you
| can do a lot of things that you'd usually to with RTL
| chrysoprace wrote:
| Having worked as both a dedicated tester and a software
| developer, I've gotta say that Cypress was leaps and bounds above
| the alternatives before it, but nowadays Playwright is just
| better. Because Cypress runs in a browser context, it's very
| awkward to import Node modules and other reusable code where as
| Playwright makes it a breeze because it runs on the Node context
| (with ESM and TypeScript support natively).
|
| If you're considering Cypress for test automation, I would really
| suggest giving Playwright a go. It fixed many of the pain points
| I had with Cypress. Even just tabbing in Cypress requires a
| plugin, where as it's supported natively in Playwright.
| easton wrote:
| I will take this opportunity to ask: is there any way to make
| Cypress work with Safari? I saw they have experimental webkit
| support, but I don't know if that's Safari or the GNOME browser
| on Linux. (Maybe it doesn't matter, but we ran into something at
| work where we'd have a use for testing on older versions of
| Safari)
| searchableguy wrote:
| They have experimental support for safari:
| https://docs.cypress.io/guides/guides/launching-browsers#Web...
|
| Why not use playwright?
|
| https://playwright.dev/
| friedman23 wrote:
| Is playwright that much better?
| codeptualize wrote:
| It's pretty solid. Even cypress webkit is using playwright.
| easton wrote:
| Because our tests are already written with Cypress and we
| don't want to change again (we just moved from Protractor
| after Angular said it was dying, so we've already rewritten
| them once).
| ketzo wrote:
| I appreciated this intro to Cypress, but does anyone know of a
| resource that takes a more advanced dive?
|
| I'm looking for pitfalls, edge cases, special features,
| performance optimization, that kind of thing.
| Maxion wrote:
| I've had a horrible time testing an app using a web socket
| backend. Cypress tests take forever to run, fail randomly due
| to race conditions, and websocket responses are annoying to
| mock.
| avh3 wrote:
| I liked https://testingjavascript.com/ from Kent.C.Dodds a lot.
| It has a separate chapter on Cypress testing. Not sure if it
| qualifies as advanced, since he also start from scratch. But
| Kent always has fast-paced videos, so you won't be skipping
| lots of sections...
| NegativeLatency wrote:
| Their docs are surprisingly good:
| https://docs.cypress.io/guides/references/best-practices
| ketzo wrote:
| Ooh, I had skimmed the docs but hadn't seen the best
| practices section, thanks!
| nullzzz wrote:
| 2022 one should not start a new project with Cypress. Playwright
| is simply so much better.
| yanis_t wrote:
| Can you elaborate please on that? Just starting on a new
| project where they have used playwright, but I never tried it
| huy-nguyen wrote:
| Agreed. I started a project with Cypress a year ago (having
| used Cypress for more than a year at that time) but then had to
| switch to Playwright and have been quite happy with it 200
| tests later. PW is able to do everything I needed from Cypress
| and has much better performance (easy parallelism and sharding)
| and has tracing/video recording in the free version. PW also
| uses regular JS promise versus the mysterious half-async-half-
| sync Cypress commands. A less mentioned distinction between the
| 2 is that Cypress also runs _in_ the browser main thread and
| I've observed that this interferes with React 18 applications
| that use concurrent rendering so tests become unreliable (not
| the case with PW). One thing PW lags behind is the interactive
| test runner and I think they're working on it.
| ryanto wrote:
| I've been a long time Cypress user, but recently have been
| feeling those pain points you mentioned, the half-async-half-
| sync APIs are driving me mad :)
|
| Im interested in Playwright, but wondering how you find the
| visual runner compared to Cypress? Are you able to run your
| tests in the browser and use a `debugger` or dev tools?
| huy-nguyen wrote:
| PW's test inspector is pretty good. You can step through
| your test code and debug selectors. The inspector also runs
| in headed mode so you have the regular browser's dev tools.
| The only thing left I want from PW is for PW to
| automatically rerun a test when it's changed.
|
| https://playwright.dev/docs/debug
| CSDude wrote:
| Playwright is nice and lightweight but bit barebones compared
| to Cypress, leaving you to decide for many things.
| TakeBlaster16 wrote:
| Cypress is also missing some pretty fundamental things, like
| tabbing through the document using the tab key. I don't know
| how people test for accessibility without this.
|
| I haven't done JS for awhile, but according to
| https://docs.cypress.io/api/commands/type#Events they still
| don't support it. The docs point you to a third party package
| that tries to simulate it inside the page.
| [deleted]
___________________________________________________________________
(page generated 2022-10-01 23:01 UTC)