Delve into front-end testing principles, learn best practices for writing enduring tests, and discover strategies for E2E testing and integration into CI pipelines. Gain actionable testing insights.

React Testing 101 Component, Integration, and End-to-end Testing_1.png

tarball.tar.gz

jest

jest_describe

jest_onlytest

skiptest

aftereach

headless

foo2

opening

first_test

custom

final_job

foo_final

This course will provide you with important information, principles, and experience-based advice, to enter the world of testing methodologies. 

Here, you will learn the best practices to follow to write useful and lasting tests, how to test different user flows without a working back-end, how to write effective end-to-end tests (E2E), and how to integrate tests into development and Continuous Integration pipelines.

At the end of the course, you will be able to apply the fundamental principles of the test methodologies to understand what and how to test effectively.

Front-end Testing 101: Integration and End-to-end Testing

## Cypress 
Cypress **was created with UI testing in mind.** To use Cypress, you must become accustomed to the logic and syntax, but it has many advantages that make testing easier compared to more generic tools (like Selenium and Puppeteer).

## Advantages

- [Waiting for an AJAX request](https://www.educative.io/courses/front-end-testing-integration/waiting-for-an-ajax-request) and [stubbing the Back-end](https://www.educative.io/courses/front-end-testing-integration/stubbing-the-back-end) has never been easier. By combining Cypress with analyzable request/response payloads, you get total control over front-end/back-end communications.

- Automatic waitings and retry-ability avoid fixed time sleeps, which are bad for test durations.

- Tests have no timeouts but each command inside the test has a timeout.
- Neat and complete [documentation](https://docs.cypress.io/guides/overview/why-cypress.html).


- Cypress has Test Runner. 

  - The Test Runner reports everything and allows step-by-step navigation, meaning that you do not have to slow down your browser to understand what’s happening. 

  - IThe DevTools console contains detailed step reports.

  - The test can be played and paused.
  - Cypress tracks every AJAX request.
  - It is easy to understand which test is running.


- Some more practical advantages like avoiding single Chrome instances and auto-close management, automatic page error reports, etc.

- Last but not least: you can leverage tens of Cypress plugins


# Cypress 
Cypress **was created with UI testing in mind.** To use Cypress, you must become accustomed to the logic and syntax, but it has many advantages that make testing easier compared to more generic tools (like Selenium and Puppeteer).

# Advantages

- [Waiting for an AJAX request](https://www.educative.io/courses/front-end-testing-integration/waiting-for-an-ajax-request) and [stubbing the Back-end](https://www.educative.io/courses/front-end-testing-integration/stubbing-the-back-end) has never been easier. By combining Cypress with analyzable request/response payloads, you get total control over front-end/back-end communications.

- Automatic waitings and retry-ability avoid fixed time sleeps, which are bad for test durations.

- Tests have no timeouts but each command inside the test has a timeout.
- Neat and complete [documentation](https://docs.cypress.io/guides/overview/why-cypress.html).


- Cypress has Test Runner. 

  - The Test Runner reports everything and allows step-by-step navigation, meaning that you do not have to slow down your browser to understand what’s happening. 

  - IThe DevTools console contains detailed step reports.

  - The test can be played and paused.
  - Cypress tracks every AJAX request.
  - It is easy to understand which test is running.


- Some more practical advantages like avoiding single Chrome instances and auto-close management, automatic page error reports, etc.

- Last but not least: you can leverage tens of Cypress plugins


Let's compare Cypress with other tools and determine its utility.

Introduction

E2E Testing

The First E2E Test

Polishing the E2E test

Ajax Requests

Custom Commands

UI Integration Tests

Other Best Practices

Bonus Section

Conclusion

Appendix

Cypress Vs Other Tools

Cypress

Advantages