cypress-testing-library VS cypress-realworld-app

One of the additional layers you can add to make sure you are building a good, accessible app, is to use “accessible queries” for elements you interact with in the tests. In other words, you find elements by text, labels, roles, aria-attributes, etc., rather than using the IDs or data-test attributes. This applies to all layers of testing. There is a very useful project called Testing Library, which provides you with UI-centric queries out of the box. It has a separate package for many different testing methods and libraries, including the Cypress one: Cypress Testing Library.

Is it a react app? Could be dom churn on the CI? In which case you might take a look at this: potential fix in the CTL.

From doing some research it seems like most people use Testing Library for unit / integration testing and Cypress for E2E testing, but from reading the documentation of both it seems like you can use them for the same thing. There is also even a Cypress Testing Library to make things even more confusing. So what do you do? Use Testing Library for unit / integration testing and Cypress for E2E? Use Testing Library for everything? Use Cypress for everything? I'm just really curious what people think about this (and it seems like I'm not the only one.

Cypress documentation

The full source code of the examples shown in this article can be found here. The example web app is based on the react-note-taking-app built on top of the T3 Stack. The Cypress tests and configuration are based on the best practices documented in the cypress-realworld-app.

I’d encourage you to look at https://docs.cypress.io

Cypress is a modern, automated testing suite. It's a fully open source testing framework based on JavaScript and is built with libraries like Mocha and Chai that support BDD and TDD assertion styles. Further, using Cypress will be easy if you’re familiar with writing tests in JavaScript.

https://github.com/cypress-io/cypress-realworld-app

It's mainly about showing Cypress (which is something like Selenium or Playwright or what have you) but integrates it into a real world example with commonly used tools and frameworks.

I think the Cypress documentation is absolutely great:

https://docs.cypress.io/

One of the better things about cypress are how they create so many how-to guides for a variety of scenarios. Take implementing Cypress into a CI runners, they have guides on how to effectively use it nearly everywhere:

https://docs.cypress.io/guides/continuous-integration/ci-pro...

GitHub: https://github.com/cypress-io/cypress-realworld-app

In addition, we have also prepared over 30+ examples of real-world tests against the Real World App. This application has been around for a couple of years now, but since it contains some rather advanced concepts and examples, much of it was beyond reach for people just getting started. To solve this problem we have written in-depth articles for every example which explains line by line what each test is doing.

Cypress.io is just a test runner, but it can be paired with Testomat.io, a test management system for automated tests. Let's see how Testomat.io can answer the questions risen above. We will use Cypress Realworld App as you might have guessed, this is a good example of a project with well-written Cypress tests.