Testing Fundamentals

Fundamental 1) Describe blocks

Your tests will exist in a describe block. This block takes two arguments. The first is a description of what you are testing. The second is a callback function for your actually tests within that block

Fundamental 2) It blocks

Within your describe block, you will also have it blocks. It blocks will be single tests within an overall test file. The API for it() is the same as describe. The first argument is the title of an individual test, and the second argument is a callback function containing your test code

Fundamental 3) Commands & interacting with elements

Cypress gives you various commands to help you test. You can use these commands on the cy object. For example, cy.visit('/') will navigate the cypress runner to your home page. You have various other commands like cy.click(), cy.type(), cy.check(), etc. *docs NOTE: You must have your dev server running for Cypress to work. NOTE: Cypress has an async nature *docs

Fundamental 4) Getting elements

You're often going to want to get an element from the DOM and make some sort of assertion. For example, my h1 element contains certain text. You can get elements in Cypress by using the get function, and pass in a CSS query selector

Fundamental 5) Command chaining & assertions

After you get an element, you probably want to do something with that element, like make an assertion. You can to this by chaining on an assertion after getting an element. For example, get(h1).contains('text'). Cypress has various ways of making an assertion *docs

Fundamental 6) Focussing on a single test

You can use it.only() to run a single test

Fundamental 7) beforeEach

You can use a beforeEach function to perform certain actions prior to every test

Fundamental 8) Custom commands

You aren't limited to just the cy.X commands, but you can create your own custom commands. You add your custom commands to cypress/support/commands.ts For example, you might add a custom command getData that gets an element by data-test