CodeX
Published in

CodeX

End-to-end testing with Cypress, Testing Library

Here’s the minimum you should know if you want to test web UIs with Cypress (an alternative to Selenium), a Node-based approach.

1. New project

In a new folder, run npm init and follow the steps (simply press Enter when in doubt).

My advice is to start a new git repository (git init) so you can always undo it if needed. Each step is a good moment to run a git commit. Start with this .gitignore file:

/node_modules
.vscode
.idea

2. Adding Cypress

  1. Run the command: npm install cypress --save-dev
  2. At package.json, change the command (under "scripts") to run the tests to be: "test": "cypress run --browser chrome --headed"
  3. At the project’s root, create an empty file for Cypress configuration named cypress.json with the content: { "video": false }
  4. Now we need a dummy test just to prove everything’s fine so far. Create the folder structure cypress/integration with a file named amazonCart.js. The content should be:
describe('Amazon cart test', () => {
it('adds to cart', () => {
expect(true).to.equal(true);
})
})

Now, run the tests with npm test (or just npm t). You should see: ✔ All specs passed!

3. Adding Testing Library

To me, the Testing Library is a must-have when testing web apps or websites. On one hand, it promotes the total decoupling of tests from HTML details like ids and classes (it’s an anti-pattern to add those only for the sake of testing). On the other hand, it helps in writing semantic HTML which benefits accessibility and SEO. If you can’t easily find something, how could users do it? How would a screen reader deal with lousy HTML? Built-in selectors find elements the way users do.

Let’s add the Cypress version of the Testing Library with npm install @testing-library/cypress --save-dev

Add this line to your project’s cypress/support/commands.js:

import '@testing-library/cypress/add-commands';

Let’s experiment with Cypress for Testing Library by changing cypress/integration/amazonCart.js:

describe('Amazon cart test', () => {
it('adds to cart', () => {
cy.visit("https://amazon.com")
cy.findByRole('textbox', {name: /search/i})
.type("kindle").type("{enter}")
})
})

findByRole is an example of the Testing Library. Since this textbox doesn’t have a label, we had to resort to the role approach. I recommend reading the official page about Testing Library queries.

Now, time to run the tests again with npm t and see the results:

✔ All specs passed!

--

--

--

Everything connected with Tech & Code. Follow to join our 900K+ monthly readers

Recommended from Medium

REACT NATIVE CLI OR EXPO?

Build a NewsBot with Azure Bot Services and NodeJS using the Bing News API

Microsoft Azure Header

Choosing the right static site generator

Building With Gatsby and Prismic ~ Filtering Front to Back

Typescript compose function

The String Data Type and String Class in JavaScript

My mini Moc Tech Interview.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Luís Soares

Luís Soares

I write about Lean, TDD, CI/CD, trunk-based dev., user-centric dev, DDD, coding good practices, testing

More from Medium

Testing Basics(jest)

Tester’s Credibility — The struggles of a QA in a fully-remote world.

What is Acceptance Testing?

Automation Testing with Playwright and Java Script — Part II (Reporter)