In this tutorial, you will get access to some useful code snippets that should help you write better Cypress tests. If you are new to Cypress and you want to learn a little more, I suggest you start here first. First, we will start out with an empty test. This is the bare-bones skeleton that you will be writing more complicated Cypress tests from:
Let's go over these part. On Line1 we have describe(). describe() is the name of the test class. . This describes the purpose of the test class, its the feature level, rather than an individual test. before() allows you to perform any set-up tasks that you might need to make before the test is run. This is useful if you need to share certain data between the different tests in your feature. Finally, we have it(). it() is where you add your test code. With the skeleton covered, let us cover some of the Cypress utility calls you be using to write your tests.
Go To A Page
Clicking A Button
Waiting/pausing before continuing
Setting And Clearing Cookies
Make An Element Visible On The Page
Stubbing A Response
- Use
cy.server()to start a Cypress instance to store your stubbed requests - Define your stubbed requests using,
cy.route()
Creating An Alias
Configuring Cypress
To get certain tests to work, you may need to change the default behaviour for how Cypress runs. My most used config tweak is to prevent a page from failing if the console throws an uncaught exception. Imagine, on your page, you may have an async API call. The request sometimes returns an uncaught exception error, by default this will fail your test. This can be annoying if the thing failing request is to a third-party, like an analytics request. In these situations, in your test class, you can tell Cypress to ignore these errors. Within commands.js add this function:
This concludes my overview of useful Cypress commands. Happy Coding 🤘
