CSS Selectors in Cypress
On This Page What are CSS picker?1. Basic CSS SelectorsJune 04, 2026 · 6 min read · Tool Comparison
More often it is required to test the demeanour of certain elements on the web coating. Selectors help to identify those elements while writing the tests. In Cypress, CSS selectors are the only locators usable. However, it can likewise act with XPath, with the assistant of an additional plugin. Types of CSS Selectors How to Use CSS Selectors in Cypress Checking CSS Styles via Tests This guide will discuss different CSS selectors and how to use them with the Cypress framework. CSS selectors are the pattern used to identify elements on a web page ground on their style. Also Read: There are a number of selectors available in CSS given as below: Matches the ingredient that has the same id as ‘ login-btn ’. Matches the elements that have the like family as ‘ e-mail ’. Matches the ‘ span ’ constituent from the given page. Matches the element that has the attribute ‘ data-active ’ set. Matches the element that has the attribute ‘ data-active ’ set to true. Matches the component that has the attribute ‘ data-color ’ that begins with the letter ‘ R ’. Matches the ingredient that has the attribute ‘ data-color ’ that ends with the letter ‘ r ’. Matches the element that has the attribute ‘ data-color ’ in which the letter ‘ e ’ appears. Matches all the p tag that get under the ingredient with the class gens ‘ container ’. Matches all the p tags that come directly under the element with the family name ‘ container ’. For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users. Matches all the p tag that come after the element with the course gens box. Matches the p tag that come directly after the element with the category name box. Matches the factor that have either class name ‘ square ’ or id attribute equal to ‘ rect ’. Matches the div that has a class name adequate to black. Note:Here is the complete list of all theCSS Selectors available Step 1 Setup project with Cypress To set up a new project in Cypress follow the below steps Step 2 Configure Cypress Also Read: Let & # 8217; s publish a examination to see if a user can log in tohttps: //bstackdemo.com/ Save the file. Cypress will mechanically run the test. Let ’ s write another test in which we quiz the coating that vary a CSS variable using Cypress Check CSS Style. Also Read: The demo application simply contains an input element of type= ” color ” as shown below. When one choose a color, the background color of the web page alteration with that color. Let & # 8217; s write a test to ascertain the same using Cypress Check CSS style. In the above snippet, we visit the URL where the application is running and select the input factor using its ID selector. Then the invoke() method passes the value of test color & # 8220; # 33BEFF & # 8221; to the input element and thetrigger()method actuate the alteration event. The should()method checks if the ground 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 existent devices. BrowserStack allow you to fulfil your Cypress test files on multiple platforms and multiple browser. The cloud platform of BrowserStack allow the testers to do these tests under real-world conditions on multiple devices available at the same time. # Ask-and-Contributeabout this topic with our Discord community. Upload your APK or URL. SUSA explores like 10 real users — finds bugs, accessibility violations, and security issues. No scripts needed. Upload your APK or URL. SUSA explores like 10 real users — finds bugs, accessibility violations, and security issues. No scripts.CSS Selectors in Cypress
Overview
What are CSS selectors?
1. Basic CSS Selectors
Selector Name Description Example in Cypress ID Selector CSS ID Selector is an attribute that is passed to an HTML element. One can use the#symbol along with the value of the ID attribute to get the factor. cy.get (‘ # login-btn ’)
Class Selector Class is another attribute of an HTML component that can be used to name the constituent utilise dot (.) with the value of the class attribute. cy.get (‘ .email ’)
Type Selector One can also use the tag gens or type of the HTML element to select it from the page. cy.get (‘ span ’)
2. CSS Attribute Selectors
Selector Name Description Example in Cypress Has Attribute Selector The HAS chooser just checks to see if an factor has the specified attribute. cy.get (‘ [data-active] ’)
Exact Attribute Selector This chooser will only match elements that feature the specified dimension with the precise specified value. cy.get (‘ [data-active= ” true ”] ’)
Begins with Selector If one desire to ensure for an dimension that commence with a specific value so thebegins withdimension selector is helpful. cy.get (‘ [data-color^= ” r ”] ’)
Ends with Selector This chooser is indistinguishable to theBegin withattribute selector but checks the end of the value alternatively. cy.get (‘ [data-color $ = ” r ”] ’)
Substring Attribute Selector This is like to the last two picker, but it checks that the string passed to it appear anyplace in the property value. cy.get (‘ [data-color * = ” e ”] ’)
3. Combination Selectors
Selector Name Description Example in Cypress Descendant Selector This picker permit one to select any element that matches a specific selector which is a descendant of an element that matches a different picker. cy.get (‘ .container p ’)
CSS Child Selector CSS kid selector allows you to take only the direct child factor of an HTML ingredient. cy.get (‘ .container & gt; p ’)
General Sibling Selector This selector grant you to select sibling ingredient that come after an HTML element. cy.get (‘ .box ~ p ’)
Conterminous Sibling Selector It is similar to the general sibling selector but can just take the siblings that come directly after the element. cy.get (‘ .box + p ’)
Or Selector This selector grant you to select elements that match at least one of the selectors. cy.get (‘ .square, # rect ’)
And Selector This chooser allows one to choose elements that match all the selectors condition. cy.get (‘ div.black ’)
How to use CSS Selectors in Cypress?
npm init -y
npm i cypress
npx cypress verify
npx cypress exposed
describe (`` CSS selectors in Cypress Tutorial '', () = & gt; {it (`` Login with Demo User '', () = & gt; {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 ();});});How to Check CSS style using Cypress
describe (`` Check CSS style '', () = & gt; {it (`` changes background color '', () = & gt; {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) '');});});Related Guides
Automate This With SUSA
Test Your App Autonomously