DEV Community


Cypress Testing

Kyle Trahan
Full Stack Software Engineer
・2 min read

I have been playing around a little bit with testing lately just so I can have a semi intelligent conversation about it during an interview, just in case. I had used Jest before since I was typically working in React, but recently was re-exploring vanilla JS and decided to use Cypress.

I'm going to explain a few of the Cypress functions provided that will help you start writing some test. One of the the key functions would be cy.visit. This tells the test what page you are actually wanting to run the follow test on. They give an example url to follow in the docs. So you would write this to start off with:

describe('Is title rendering?', () => {
  it('checks for the app title', () => {
Enter fullscreen mode Exit fullscreen mode

The next function would be .contains. If you already know exactly what your title name is then you can find it with .contains. We would just add this line under cy.visit.

cy.contains('the name of your title')
Enter fullscreen mode Exit fullscreen mode

Lets say you don't know what your titles' text contents will be but we do know what its id is. You can use the .get function like so:

Enter fullscreen mode Exit fullscreen mode

This will ensure that there is an element on your page that has the id of #app-title. I think this can be useful in determining whether or not something is present on the page.

These are just some of the really basic functions for Cypress and a good way to get started. There is so much more to them though if you take a little time to dig into the documentation and do a little experimenting!

Discussion (0)