{"id":9041,"date":"2023-11-23T13:24:54","date_gmt":"2023-11-23T13:24:54","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9041"},"modified":"2023-11-23T13:24:54","modified_gmt":"2023-11-23T13:24:54","slug":"get-classes-of-element-in-cypress","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/qa-automation\/get-classes-of-element-in-cypress","title":{"rendered":"Cypress – How to Get Classes of Element"},"content":{"rendered":"

In Cypress, to get the classes of an element, you can use the `.invoke()` command to access the DOM element and retrieve its `className` property, which contains a list of classes applied to the element. Here’s an example:<\/p>\n

\/\/ Get the element\r\ncy.get('.your-element-selector').invoke('attr', 'class').then((classes) => {\r\n  \/\/ 'classes' is a space-separated string of class names applied to the element\r\n  console.log(classes);\r\n});\r\n<\/pre>\n
In the code above:<\/strong><\/p>\n
    \n
  1. Use `cy.get(‘.your-element-selector’)` to select the element you want to get the classes from. Replace `’.your-element-selector’` with your specific selector.<\/li>\n
  2. Use `.invoke(‘attr’, ‘class’)` to invoke the ‘attr’ method on the selected element, which retrieves the ‘class’ attribute of the element.<\/li>\n
  3. Use `.then()` to handle the result. The retrieved class names will be a space-separated string of class names.<\/li>\n<\/ol>\n
    You can then manipulate or check the class names as needed, whether you want to check if a specific class exists or perform other actions based on the classes.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In Cypress, to get the classes of an element, you can use the `.invoke()` command to access the DOM element and retrieve its `className` property, which contains a list of classes applied to the element. Here’s an example: \/\/ Get the element cy.get(‘.your-element-selector’).invoke(‘attr’, ‘class’).then((classes) => { \/\/ ‘classes’ is a space-separated string of class names […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[24],"tags":[],"class_list":["post-9041","post","type-post","status-publish","format-standard","hentry","category-qa-automation"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9041"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9041"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9041\/revisions"}],"predecessor-version":[{"id":9043,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9041\/revisions\/9043"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}