# 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 = '[e-mail]';
  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 <a href="https://www.youtube.com/watch?v=-RJuZrq-wOk">record on Chrome</a> and install an extra package to create the magic.
- The other one is to enable the <a href="https://docs.cypress.io/guides/references/cypress-studio">experimentalStudio mode</a> 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.

<small>
Published date: 2023-02-06 <br/>
Also published <a href="https://medium.com/goalist-blog/frontend-testing-with-cypress-fb3d6c710570">here</a>.
</small>