Forem: Rodrigo Santos

Cypress for beginners: 5 basics commands to get started

Rodrigo Santos — Tue, 17 May 2022 10:45:58 +0000

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.

Using Cypress for API tests

Rodrigo Santos — Sun, 26 Sep 2021 02:54:10 +0000

Hey, today I'm here to show you how we can use Cypress for testing APIs but, before this, I have one disclaimer for you.

I assume you know the basics about Javascript, Cypress, and your setup, so I will just skip the setup of cypress and introductions about the technology.

In this post, I using the JSON Placeholder API for tests, but you can use any API of your preference. We are going to use cy.request for sending requests for API, so in our requests, we will use this structure:

cy.request(method, url, body)

So let's start the fun

First, we need to send our request to have something for the test, right? We will the /posts endpoint in this case, but you can use others, no problem. I separated the test case into two parts, first I show the request body, and the second part, our tests.

    cy.request({
        method: 'POST',
        url: 'posts',
        body: {
            title: 'Something Interested',
            body: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
            userId: 1
        }
     })

In request, we are creating a post with the title Something Interested in user of ID is 1. According to the documentation of API, the response should have four params, so now, we go check this and explore the ways Cypress provides for API tests.

.then((response) => {
            expect(response.status).to.eq(201)
            expect(response.body).to.have.property('id')
            expect(response.body).to.have.property('title', 'Something Interested')
            expect(response.body).to.have.property('body', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.')
            expect(response.body).to.have.property('userId')
        })

expect(response.status).to.eq(201): How the request is for creating a post, we need to receive a 201 status code, what is Created.
expect(response.body).to.have.property('title', 'Something Interested'): Here we are checked if a title post is correct.
expect(response.body).to.have.property('body', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'): In this test, we are checked if a body post is correct.
expect(response.body).to.have.property('userId'): So in this case, we are verifying if in the response body the user ID exists.

In Cypress exists some other methods for test API and you can find them in documentation, this post was an example of what Cypress can do. The full project are in my github, if you want to see closer.
So thank for your time and I hope it helps.

How to setup Cypress on Github Actions

Rodrigo Santos — Sun, 05 Sep 2021 23:48:59 +0000

In this text, I try to show you how to set up Cypress on Github Actions, but first I have one disclaimer for you.

I assume you know the basics about Github, that is commits, pull requests, and branches need to be familiar concepts.

Github Actions it's an important tool for automating and run software workflows day by day. In this article, I show to you when every time someone creates a pull request for your project repository, you can automatically run a command that executes a software testing script.

But first, I need you to have any Github repository with any Cypress test.

So let's start the fun...

1 . In your Github repository create a new file in directory .github/workflows called github-actions-init.yml

2 . In this file we must add content with steps of our workflow:

name: GitHub Actions Demo
on: [pull_request]
jobs:
 cypress-run:
    runs-on: ubuntu-latest
    steps: 
      - name: Checkout
        uses: actions/checkout@v2
      - name: Install node
        uses: actions/setup-node@v2
        with:
            node:version: '14'
      - name: Install dependencies
        run: npm install       
      - name: Cypress run
        uses: cypress-io/github-action@v2

In this YAML file, we have some terms that need explanation, so let's go undestand line by line:

name: GitHub Actions Demo: It's basically the name of our workflow.
on: [pull_request]: Shows for github actions when running the workflow
jobs: Group all jobs in file
cypress-run: It's job's name
runs-on: ubuntu-latest: Indicates to a workflow should run in a Ubuntu Linux executor.
steps: All steps to run in workflow
Checkout: It's a step's name
uses: actions/checkout@v2: In this line basically our workflow checks our repository allowing you to run actions against own code
name: Install node: It's a step's name
uses: actions/setup-node@v2: This step is used for install a specified node version
node-version: Indicate a node version
name: Install dependencies: It's a step's name
run: npm install: Run the command install in node, to install all dependencies in project
name: Cypress run: It's a step's name
uses: cypress-io/github-action@v2: Run a Cypress command to execute all tests cases in project.

3 . After adding this file to the repository, it's time to create a pull request and see the magic happen.

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

Forem: Rodrigo Santos

Cypress for beginners: 5 basics commands to get started

.visit

Usage

.get

Usage

.type

Usage

.click

Usage

.should

Usage

Using Cypress for API tests

How to setup Cypress on Github Actions

Project Repository: https://github.com/rodrigosta/e2e-toDoList

References: