{"id":2839,"date":"2020-06-19T16:13:23","date_gmt":"2020-06-19T16:13:23","guid":{"rendered":"https:\/\/codoid.com\/selenium-css-selectors-examples\/"},"modified":"2022-02-04T18:36:31","modified_gmt":"2022-02-04T18:36:31","slug":"selenium-css-selectors-examples","status":"publish","type":"post","link":"https:\/\/codoid.com\/selenium-testing\/selenium-css-selectors-examples\/","title":{"rendered":"Selenium CSS Selectors Examples"},"content":{"rendered":"

Writing Selenium CSS Selectors for object locating alone cannot improve script execution performance. Additionally you need to write performant CSS Selectors. Copying and pasting CSS Selectors that are suggested by any plugin<\/b> or browser<\/b> is not a right approach. You should be able to construct your own CSS Selectors or should possess strong knowledge of auto generated selectors.<\/p>\n

In this blog article, you will learn the basics of Selenium CSS Selectors. If you are familiar with XPath and CSS Selector construction on your own, then creating robust automated test suite<\/a> will be a cake walk.<\/p>\n

By ID<\/h3>\n

If you have ID for an element on which you are going to perform action, then you can go with ID selector instead of CSS Selector. However, if you want to identify parent node in the CSS Selector, then you should be familiar with selecting an element using ID.<\/p>\n

HTML<\/b><\/p>\n

<input type=”text” id=”txt1″\/><\/p><\/blockquote>\n

Selector<\/b><\/p>\n

#txt1<\/p><\/blockquote>\n

Direct Child<\/h3>\n

You can use the below CSS Selector to select a direct child under a parent node.<\/p>\n

HTML<\/b><\/p>\n

\n<div>
\n
\n<input type=”text” \/>
\n
\n<\/div>\n<\/p><\/blockquote>\n

Selector<\/b><\/p>\n

div>input<\/p><\/blockquote>\n

Adjacent Sibling<\/h3>\n

Once you select a node, you can also jump to an adjacent sibling using the below selector.<\/p>\n

Selector<\/b><\/p>\n

div > input + input<\/p><\/blockquote>\n

\n\t\"Selenium\n<\/div>\n

Starts With<\/h3>\n

Using starts with to match attribute value.<\/p>\n

HTML<\/b><\/p>\n

\n<input type=”text” id=”txt4″ class=”textbox-st”\/>\n<\/p><\/blockquote>\n

Selector<\/b><\/p>\n

input[class^=’text’]<\/p><\/blockquote>\n

Sub String Match<\/h3>\n

Matching a sub string in an attribute value.<\/p>\n

HTML<\/b><\/p>\n

\n<input type=”text” id=”txt4″ class=”textbox-st”\/>\n<\/p><\/blockquote>\n

Selector<\/b><\/p>\n

input[class*=’box’]<\/p><\/blockquote>\n

Ends With<\/h3>\n

Using ends with to match attribute value.<\/p>\n

HTML<\/b><\/p>\n

\n<input type=”text” id=”txt4″ class=”textbox-st”\/>\n<\/p><\/blockquote>\n

Selector<\/b><\/p>\n

div>input[class$=’st’]<\/p><\/blockquote>\n

nth-child<\/h3>\n

Selecting an element using its index<\/p>\n

Selector<\/b><\/p>\n

tr:nth-child(4)<\/p><\/blockquote>\n

\n\t\"CSS\n<\/div>\n

In Conclusion<\/h3>\n

Basics of Selenium CSS Selector and XPath is a mandatory skill for a test automation engineer. As a software testing services<\/a> provider, we train all our new recruits<\/a> on object locating techniques. When your team is well versed in XPath & CSS Selector, they will be able to produce robust test automation suites.<\/p>\n","protected":false},"excerpt":{"rendered":"

Writing Selenium CSS Selectors for object locating alone cannot improve script execution performance. Additionally you need to write performant CSS Selectors. Copying and pasting CSS Selectors that are suggested by any plugin or browser is not a right approach. You should be able to construct your own CSS Selectors or should possess strong knowledge of […]<\/p>\n","protected":false},"author":1,"featured_media":5284,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[187,179,20],"tags":[],"acf":[],"yoast_head":"\nSelenium CSS Selectors Examples - Codoid<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Selenium CSS Selectors Examples\" \/>\n<meta property=\"og:description\" content=\"Writing Selenium CSS Selectors for object locating alone cannot improve script execution performance. Additionally you need to write performant CSS Selectors. Copying and pasting CSS Selectors that are suggested by any plugin or browser is not a right approach. You should be able to construct your own CSS Selectors or should possess strong knowledge of […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Codoid\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codoid.softwaretestingcompany\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-19T16:13:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-04T18:36:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codoid.com\/wp-content\/uploads\/2020\/06\/Selenium_CSS_Selectors_Examples_Blog.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codoid\" \/>\n<meta name=\"twitter:site\" content=\"@codoid\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Selenium CSS Selectors Examples - Codoid","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Selenium CSS Selectors Examples","og_description":"Writing Selenium CSS Selectors for object locating alone cannot improve script execution performance. Additionally you need to write performant CSS Selectors. Copying and pasting CSS Selectors that are suggested by any plugin or browser is not a right approach. You should be able to construct your own CSS Selectors or should possess strong knowledge of […]","og_url":"https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/","og_site_name":"Codoid","article_publisher":"https:\/\/www.facebook.com\/codoid.softwaretestingcompany","article_published_time":"2020-06-19T16:13:23+00:00","article_modified_time":"2022-02-04T18:36:31+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/codoid.com\/wp-content\/uploads\/2020\/06\/Selenium_CSS_Selectors_Examples_Blog.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@codoid","twitter_site":"@codoid","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/#article","isPartOf":{"@id":"https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/"},"author":{"name":"admin","@id":"https:\/\/codoid.com\/#\/schema\/person\/360ee1d38151acb7c746787fbfa8e586"},"headline":"Selenium CSS Selectors Examples","datePublished":"2020-06-19T16:13:23+00:00","dateModified":"2022-02-04T18:36:31+00:00","mainEntityOfPage":{"@id":"https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/"},"wordCount":354,"commentCount":0,"publisher":{"@id":"https:\/\/codoid.com\/#organization"},"articleSection":["Selenium Testing","Fixed","Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/","url":"https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/","name":"Selenium CSS Selectors Examples - Codoid","isPartOf":{"@id":"https:\/\/codoid.com\/#website"},"datePublished":"2020-06-19T16:13:23+00:00","dateModified":"2022-02-04T18:36:31+00:00","breadcrumb":{"@id":"https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/codoid.com\/learn\/selenium-testing\/selenium-css-selectors-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codoid.com\/"},{"@type":"ListItem","position":2,"name":"Selenium CSS Selectors Examples"}]},{"@type":"WebSite","@id":"https:\/\/codoid.com\/#website","url":"https:\/\/codoid.com\/","name":"Codoid","description":"","publisher":{"@id":"https:\/\/codoid.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codoid.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codoid.com\/#organization","name":"Codoid - Software Testing Company","url":"https:\/\/codoid.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codoid.com\/#\/schema\/logo\/image\/","url":"https:\/\/codoid.com\/wp-content\/uploads\/2020\/09\/Codoid_Software_Testing_Company_Logo.png","contentUrl":"https:\/\/codoid.com\/wp-content\/uploads\/2020\/09\/Codoid_Software_Testing_Company_Logo.png","width":500,"height":500,"caption":"Codoid - Software Testing Company"},"image":{"@id":"https:\/\/codoid.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codoid.softwaretestingcompany","https:\/\/twitter.com\/codoid","https:\/\/www.instagram.com\/codoid.softwaretestingcompany\/","https:\/\/www.linkedin.com\/company\/codoid-qacompany","https:\/\/www.pinterest.com\/codoid9282\/codoid-software-testing-company\/","https:\/\/www.youtube.com\/channel\/UCCmOTDQgcf4W8oo22mBMUYA"]},{"@type":"Person","@id":"https:\/\/codoid.com\/#\/schema\/person\/360ee1d38151acb7c746787fbfa8e586","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codoid.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4d33f9036c9d60684b9478f738779823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4d33f9036c9d60684b9478f738779823?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/codoid.com"]}]}},"_links":{"self":[{"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/posts\/2839"}],"collection":[{"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/comments?post=2839"}],"version-history":[{"count":6,"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/posts\/2839\/revisions"}],"predecessor-version":[{"id":11744,"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/posts\/2839\/revisions\/11744"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/media\/5284"}],"wp:attachment":[{"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/media?parent=2839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/categories?post=2839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codoid.com\/wp-json\/wp\/v2\/tags?post=2839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}