Frontend testing with Cypress

I. What is frontend testing about

In short, front-end testing validates that what people see on the site and the features they use on it work as intended.
Source: https://css-tricks.com/front-end-testing-is-for-everyone/

Among all the tests, end-to-end testing and component testing are mostly about seeing how things are visually rendered and how user interaction works. Therefore, i’ll focus on these 2 this time.

II. What is Cypress

Cypress is a javascript testing framework, it can test anything that run in a bowser. Some of the most apprciated features of Cypress are:
- Time Travel: Cypress takes snapshots as your tests run. Hover over commands in the Command Log to see exactly what happened at each step.
- Debuggability: Stop guessing why your tests are failing. Debug directly from familiar tools like Developer Tools. Our readable errors and stack traces make debugging lightning fast.
- Automatic Waiting: Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on. No more async hell.
Other features are listed here: https://docs.cypress.io/guides/overview/why-cypress#Features

III. How to implement

1/ Installation

npm install cypress --save-dev

Then, in your package.json, add script `”e2e”: “cypress open”`
As soon as you run the script, a cypress welcome screen will appear with 2 options of testing for you to choose.

And, below folder structure will be created

- downloads: keep downloaded files during testing
- fixtures: keep the data that will be re-used throughout the test
- integration: keep all the tests
- plugins: Plugins provide a way to support and extend the behavior of Cypress. If you want to write plugins, store them here.
- support: where you write a custom command for cypress or overwrite existing ones.

2/ How to write test case

If you’re familiar with other testing library, you won’t feel lost with Cypress. Let’s have a quick look on how to write a test case before heading to those 2 testing options.

1: describe a test

describe('My First Test', () => {})

2: write test case

describe('My First Test', () => {
 it('my test case #1', () => {}
})

3: use cypress command api to simulate the user actions and make assertions
https://docs.cypress.io/api/table-of-contents
https://docs.cypress.io/guides/references/assertions

3/ End-to-end testing

When you choose “E2E Testing”, you’ll be asked to choose the browser on which the test will run. After browser selection, you’ll be taken to a dashboard. All the test specs that you have in “e2e” folder will appear here, select the test to run. Every step of a test case will be captured so we can go back to see if it got the right element or what caused the test to fail.

Here, i have an example of testing the login feature.
And as you can see, every step of the test case is able to be reviewed.

describe('mytest', () => {
  const email = 'abc@company.com';
  const password = '@123Abc';

  it('authorized', () => {
    cy.visit('http://localhost:3000/login');
    cy.get('input[name=email]').type(email);
    cy.get('input[name=password]').type(password);
    cy.get('button[name=login]').click();
    cy.get('div').contains('login success').should('exist');
  })
})

Now, if you’re awared of Puppeteer, a testing library from Google that allow you to record your interaction on Chrome and and turn that in to test code. What if i tell you that you can do the same thing with Cypress, and even have 2 approachs to do that 🎉.

• The first one is to get the record on Chrome and install an extra package to create the magic.
• The other one is to enable the experimentalStudio mode in cypress config. I personally prefer this way because we dont have to install anything else.

With second approach, the test code will be added to your current test suite, like this:

4/ Component testing

For component testing, when the dashboard opens, it will scan your project and list out all components that you have.

After selection, a starter test file will be created in the same location with the selected component and you can start adding test cases as you wish.

IV. Conclusion

I have wrote about Puppeteer once as i found the record feature very apealing. But now, even Cypress has that feature, together with all the pros it has, i believe there’s no reason to not try it on our next project.