DEV Community

Kyle Trahan
Kyle Trahan

Posted on

3 3

Cypress Testing

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', () => {
    cy.visit('https://example.cypress.io')
  })
})
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:

cy.get('#app-title')
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!

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay