CSS Selectors in Cypress

More often it is required to test the behavior of certain elements on the web application. Selectors help to identify those elements while writing the tests. In Cypress, CSS selectors are the only locators available. However, it can also work with XPath, with the help of an additional plugin. This guide will discuss different CSS selectors and how to use them with the Cypress framework.

What are CSS selectors?

CSS selectors are the pattern used to identify elements on a web page based on their style. 

There are a number of selectors available in CSS given as below:

1. Basic CSS Selectors

cy.get(‘#login-btn’)

cy.get(‘.email’)

cy.get(‘span’)

2. CSS Attribute Selectors

cy.get(‘[data-active]’)

cy.get(‘[data-active=”true”]’)

cy.get(‘[data-color^=”r”]’)

cy.get(‘[data-color$=”r”]’)

cy.get(‘[data-color*=”e”]’)

3. Combination Selectors

cy.get(‘.container p’)

cy.get(‘.container > p’)

cy.get(‘.box ~ p’)

cy.get(‘.box + p’)

cy.get(‘.square, #rect’)

cy.get(‘div.black’)

How to use CSS Selectors in Cypress?

Step 1 Setup project with Cypress 

To set up a new project in Cypress follow the below steps

• Initialize a new project

npm init -y

• Install Cypress 

npm i cypress

• Verify Cypress installation

npx cypress verify

• Run Cypress

npx cypress open

Step 2 Configure Cypress

• A new window like below will be opened, Click ‘E2E Testing’ to configure it.

• New files related to Cypress will be configured for the project. Click ‘Continue’.

• Select a browser to run tests.

•  Click ‘Create new empty spec’

•  Choose a path for the spec file and click ‘Create Spec’

• Run the spec file by clicking on ‘Okay, run the spec’

• You shall see the default test being passed on the browser.

Let’s write a test to see if a user can log in to https://bstackdemo.com/ 

describe("CSS selectors in Cypress Tutorial", () => {
it("Login with Demo User", () => {
cy.visit("https://bstackdemo.com/signin");

cy.get("#react-select-2-input")
.type("demouser", { force: true })
.type("{enter}");

cy.get("#react-select-3-input")
.type("testingisfun99", { force: true })
.type("{enter}");

cy.get('#login-btn').click();
});
});

Save the file. Cypress will automatically run the test.

How to Check CSS style using Cypress

Let’s write another test in which we test the application that changes a CSS variable using Cypress Check CSS Style.

The demo application only contains an input element of type=”color” as shown below. 

When one chooses a color, the background color of the web page changes with that color.

Let’s write a test to check the same using Cypress Check CSS style.

describe("Check CSS style", () => {
it("changes background color", () => {
cy.visit("http://127.0.0.1:5500/index.html");

cy.get("#color-picker")
.invoke("val", "#33BEFF")
.trigger("change");

cy.get("body")
.should("have.css", "background-color", "rgb(51, 190, 255)");
});
});

In the above snippet, we visit the URL where the application is running and select the input element using its ID selector. Then the invoke() method passes the value of test color “#33BEFF” to the input element and the trigger() method triggers the change event.

The should() method checks if the background color of the body element is actually changed on the page. 

Run the test and see the result.

It is highly important to perform these tests on real devices. BrowserStack allows you to execute your Cypress test files on multiple platforms and multiple browsers. 

The cloud platform of BrowserStack allows the testers to perform these tests under real-world conditions on multiple devices available at the same time.

Try BrowserStack now