DEV Community

Cover image for Cypress for beginners: 5 basics commands to get started
Rodrigo Santos
Rodrigo Santos

Posted on • Edited on

Cypress for beginners: 5 basics commands to get started

Cypress is a simple framework based in Javascript that allows you to write your tests for front-end applications. So, in this post I'll show you 5 basics commands to get started in Cypress.

.visit

We use this command for access the address sent by parameter. This parameter can be a string with a value, a variable or a empty string, but in this last case the Cypress will look for baseUrl attribute on cypress.json file.

Usage

cy.visit('https://dev.to/rodrigosta')
cy.visit(someVariable)
cy.visit('')

.get

This command, as the name implies, select a element in DOM by selector or alias. It's one of the most simplest and basic commands and can get elements for any selector, for example: id, class, data-testid tags etc.

Usage

cy.get('#emailInput')
cy.get('.dropdown-menu')
cy.get('input')

.type

When we want to type something in some element in the DOM, we use this command. The most common case is to pass a string or variable per parameter, but it can be special character too, to do actions, for example: {backspace}, {enter} etc.

Usage

cy.get('input').type('something')
cy.get('.passwordInput').type(someVariable)
cy.get('#emailInput').type('teste@example {enter}')

.click

With this command we can click on the elements of the DOM. By parameter we can send coordinates or even specific positions to click on the page. Related to click, Cypress provides commands for some other behaviors, for example: {.rightclick()} and {dbclick()}. But the usage for .click() is below.

Usage

cy.get('input').click()
cy.contais('Some word').click(position)
cy.get('#button).click(‘topRight’)

.should

Last but not least we have the command that creates assertions in Cypress. Most of times it's common to send two values per parameter, the one you want validate and a value, but you have the possibility to send only one parameter as well.

Usage

cy.get('input').should('have.value', 'Jane')
cy.get('#loginInput').should('be.visible')

Even though this post is very simple and short, I hope it awakens in you a passion for Cypress and automated software testing. If you want more information about the framework, you can access de Cypress documentation.

It's all for today, but I hope this text helps you, and if you have any ask, text me in the comments. I see you soon.

Top comments (0)