{"id":674,"date":"2019-12-05T13:19:41","date_gmt":"2019-12-05T07:49:41","guid":{"rendered":"http:\/\/http:\/\/artoftesting.com\/\/?p=674"},"modified":"2023-04-29T14:11:56","modified_gmt":"2023-04-29T08:41:56","slug":"css-selector-in-selenium-webdriver","status":"publish","type":"post","link":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver","title":{"rendered":"CSS Locators in Selenium Tutorial"},"content":{"rendered":"\n<p>In this tutorial, we will learn about CSS Selector and create CSS selectors manually using different HTML attributes of the web elements. For fetching the HTML information of the web elements we will use a firebug or developer tool. (For details on downloading and usage of firebug\/developer tool check out tutorial &#8211;&nbsp;<a href=\"http:\/\/artoftesting.com\/locators-in-selenium-webdriver\">Finding web elements in Selenium<\/a>.<br><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-flat ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Content<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#CSS_and_CSS_Selectors_Introduction\" title=\"CSS and CSS Selectors Introduction\">CSS and CSS Selectors Introduction<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#CSS_Selectors\" title=\"CSS Selectors\">CSS Selectors<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#Using_Id\" title=\"Using Id\">Using Id<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#Using_class\" title=\"Using class\">Using class<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#Using_tag\" title=\"Using tag\">Using tag<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#Using_tags_and_id\" title=\"Using tags and id\">Using tags and id<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#Using_tags_and_class\" title=\"Using tags and class\">Using tags and class<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#Using_tags_and_attributes\" title=\"Using tags and attributes\">Using tags and attributes<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#Locating_Child_Elements_direct_child_only\" title=\"Locating Child Elements (direct child only)\">Locating Child Elements (direct child only)<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#Locating_elements_inside_other_elements_child_or_subchild\" title=\"Locating elements inside other elements (child or subchild)\">Locating elements inside other elements (child or subchild)<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#nth_child\" title=\"nth child\">nth child<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#Locating_Siblings\" title=\"Locating Siblings\">Locating Siblings<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#_%E2%80%93_Starts_with\" title=\"^ &#8211; Starts with\">^ &#8211; Starts with<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#_%E2%80%93_Ends_with\" title=\"$ &#8211; Ends with\">$ &#8211; Ends with<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\/#_%E2%80%93_Contains\" title=\"* &#8211; Contains\">* &#8211; Contains<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_and_CSS_Selectors_Introduction\"><\/span>CSS and CSS Selectors Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>CSS stands for Cascading Style Sheets, these are used for styling the different elements of an HTML webpage. In the .css files we can locate specific elements of a <a href=\"http:\/\/artoftesting.com\/what-is-a-webpage\">webpage<\/a>(.html files) and then style them like &#8211; set their font size, width, height etc.<br>For locating the web elements to be styled, we use certain rules provided as CSS Selectors.<br>For example, the following statement first locates a web element satisfying the selector pattern &#8211; &#8220;div#searchBox&#8221; and then aligns the text inside it to center.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; gutter: false; title: ; notranslate\" title=\"\">\ndiv#searchBox {text-align: center;}\n<\/pre><\/div>\n\n\n<p> <br>In Selenium, we can use these CSS Selector rules\/patterns for locating web elements and later perform different operations on them. For example- <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: java; title: ; notranslate\" title=\"\">\n\/\/Locating searchBox element using CSS Selector\nWebElement searchBox = driver.findElement(By.cssSelector(&quot;div#searchBox&quot;));\n\n\/\/Performing click operation on the element\nsearchBox.sendKeys(&quot;ArtOfTesting&quot;);\n<\/pre><\/div>\n\n\n<p>Let&#8217;s now see the different rules of CSS Selectors along with their syntax and usage example.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_Selectors\"><\/span>CSS Selectors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Below are the syntax and examples on how to locate the desired elements and use them in selenium scripts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_Id\"><\/span>Using Id<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; #id<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;button id=&quot;submitButton1&quot; type=&quot;button&quot; class=&quot;btn&quot;&gt;Submit&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; #submitButton1<br>Description &#8211; &#8216;#submitButton1&#8217; will select the element with id &#8216;submitButton1&#8217;. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_class\"><\/span>Using class<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; .class<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;button id=&quot;submitButton1&quot; type=&quot;button&quot; class=&quot;btn&quot;&gt;Submit&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p> CSS Locator &#8211; .btn<br>Description &#8211; &#8216;.btn&#8217; will select all the elements with class &#8216;btn&#8217;. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_tag\"><\/span>Using tag<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; tagName<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;input id=&quot;fname&quot; type=&quot;text&quot; name=&quot;firstName&quot; class=&quot;textbox&quot;&gt;\n<\/pre><\/div>\n\n\n<p> CSS Locator &#8211; input<br>Description &#8211; &#8216;input&#8217; will select all the input type elements. <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nUsing attributes and their value\nCSS Selector Rule - &#x5B;attributeName='attributeValue']\nExample -\nFor the Sample HTML below-\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;input id=&quot;fname&quot; type=&quot;text&quot; name=&quot;firstName&quot; class=&quot;textbox&quot;&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; [name=&#8217;firstName&#8217;]<br>Description &#8211; [name=&#8217;firstName&#8217;] will select the elements with name attribute having value &#8216;firstName&#8217;.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Now, using these basic rules of locating web elements, we can use them in conjunction to create more robust locators, selecting unique elements.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_tags_and_id\"><\/span>Using tags and id<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; tag#id<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;input id=&quot;fname&quot; type=&quot;text&quot; name=&quot;firstName&quot; class=&quot;textbox&quot;&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; input#fname<br>Description &#8211; input#fname will select the &#8216;input&#8217; element with id &#8216;fname&#8217;.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_tags_and_class\"><\/span>Using tags and class<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; tag.class<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;input id=&quot;fname&quot; type=&quot;text&quot; name=&quot;firstName&quot; class=&quot;textbox&quot;&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; input.textbox<br>Description &#8211; input.textbox will select the &#8216;input&#8217; element with id &#8216;textbox&#8217;.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_tags_and_attributes\"><\/span>Using tags and attributes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; tag[attributeName=&#8217;attributeValue&#8217;]<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;input id=&quot;fname&quot; type=&quot;text&quot; name=&quot;firstName&quot; class=&quot;textbox&quot;&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; input[name=&#8217;firstName&#8217;]<br>Description &#8211; input[name=&#8217;firstName&#8217;] will select the &#8216;input&#8217; element with &#8216;name&#8217; attribute having value &#8216;firstName&#8217;.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Locating_Child_Elements_direct_child_only\"><\/span>Locating Child Elements (direct child only)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; parentLocator&gt;childLocator<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;div id=&quot;buttonDiv&quot; class=&quot;small&quot;&gt;\n&lt;button id=&quot;submitButton1&quot; type=&quot;button&quot; class=&quot;btn&quot;&gt;Submit&lt;\/button&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; div#buttonDiv&gt;button<br>Description &#8211; &#8216;div#buttonDiv&gt;button&#8217; will first go to div element with id &#8216;buttonDiv&#8217; and then select its child element &#8211; &#8216;button&#8217;.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Locating_elements_inside_other_elements_child_or_subchild\"><\/span>Locating elements inside other elements (child or subchild)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; locator1 locator2<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;div id=&quot;buttonDiv&quot; class=&quot;small&quot;&gt;\n&amp;lt;button id=&quot;submitButton1&quot; type=&quot;button&quot; class=&quot;btn&quot;&gt;Submit&amp;lt;\/button&gt;\n&amp;lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; div#buttonDiv button<br>Description &#8211; &#8216;div#buttonDiv button&#8217; will first go to div element with id &#8216;buttonDiv&#8217; and then select &#8216;button&#8217; element inside it (which may be its child or sub child).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"nth_child\"><\/span>nth child<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; :nth-child(n)<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;ul id=&quot;testingTypes&quot;&gt;\n   &lt;li&gt;Automation Testing&lt;\/li&gt;\n   &lt;li&gt;Performance Testing&lt;\/li&gt;\n   &lt;li&gt;Manual Testing&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; #testingTypes li:nth-child(2)<br>Description &#8211; &#8216;#testingTypes li:nth-child(2)&#8217; will select the element with id &#8216;testingType&#8217; and then locate the 2nd child of type li i.e. &#8216;Performance Testing&#8217; list item.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Locating_Siblings\"><\/span>Locating Siblings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; locator1+locator2<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;ul id=&quot;testingTypes&quot;&gt;\n   &lt;li id=&quot;automation&quot;&gt;Automation Testing&lt;\/li&gt;\n   &lt;li&gt;Performance Testing&lt;\/li&gt;\n   &lt;li&gt;Manual Testing&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; li#automation + li<br>Description &#8211; &#8216;li#automation + li&#8217; will first go to li element with id &#8216;automation&#8217; and then select its adjacent li i.e. &#8216;Performance Testing&#8217; list item.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<p>For handling dynamic elements having ids and other locators dynamically generated(not known beforehand). We can make use of the above locators by using different parent-sibling relationships of the dynamic elements. Apart from this, we can also use some special CSS locators using which we can match partial values of the attributes.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_%E2%80%93_Starts_with\"><\/span>^ &#8211; Starts with<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; [attribute^=attributeValue]<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;button id=&quot;user1_btn_263&quot; type=&quot;button&quot; class=&quot;btn&quot;&gt;Submit&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; id^=&#8221;user1&#8243;<br>Description &#8211; &#8216;id^=&#8221;user1&#8243;&#8216; will select the element whose id starts with &#8220;user1&#8221; value<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_%E2%80%93_Ends_with\"><\/span>$ &#8211; Ends with<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; [attribute$=attributeValue]<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;button id=&quot;user1_btn_263&quot; type=&quot;button&quot; class=&quot;btn&quot;&gt;Submit&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>CSS Locator &#8211; id$=&#8221;btn_263&#8243;<br>Description &#8211; &#8216;id$=&#8221;btn_263&#8243;&#8216; will select the element whose id ends with &#8220;btn_263&#8221; value<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_%E2%80%93_Contains\"><\/span>* &#8211; Contains<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>CSS Selector Rule &#8211; [attribute*=attributeValue]<\/strong><br>Example &#8211;<br>For the Sample HTML below-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: java; gutter: false; title: ; notranslate\" title=\"\">\n&lt;button id=&quot;user1_btn_263&quot; type=&quot;button&quot; class=&quot;btn&quot;&gt;Submit&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p> CSS Locator &#8211; id*=&#8221;btn&#8221;<br>Description &#8211; &#8216;id*=&#8221;btn&#8221;&#8216; will select the element whose id contains with &#8220;btn&#8221; value <\/p>\n\n\n\n<p>That&#8217;s all we have in this post. If you have any questions please comment below.Checkout the complete selenium tutorial here.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><a href=\"http:\/\/artoftesting.com\/selenium-tutorial\">Complete Selenium guide<\/a><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we will learn about CSS Selector and create CSS selectors manually using different HTML attributes of the web elements. For fetching the HTML information of the web elements we will use a firebug or developer tool. (For details on downloading and usage of firebug\/developer tool check out tutorial &ndash;&nbsp;Finding web elements in &#8230; <a title=\"CSS Locators in Selenium Tutorial\" class=\"read-more\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\" aria-label=\"Read more about CSS Locators in Selenium Tutorial\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1598,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-674","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-selenium"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Selector in Selenium WebDriver Tutorial<\/title>\n<meta name=\"description\" content=\"Free CSS Selector tutorial with different locator patterns along with their syntax and examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Selector in Selenium WebDriver Tutorial\" \/>\n<meta property=\"og:description\" content=\"Free CSS Selector tutorial with different locator patterns along with their syntax and examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\" \/>\n<meta property=\"og:site_name\" content=\"ArtOfTesting\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/artoftesting\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-05T07:49:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-29T08:41:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/CSS-Locators-in-selenium.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kuldeep Rana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@theartoftesting\" \/>\n<meta name=\"twitter:site\" content=\"@theartoftesting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kuldeep Rana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#article\",\"isPartOf\":{\"@id\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\"},\"author\":{\"name\":\"Kuldeep Rana\",\"@id\":\"https:\/\/artoftesting.com\/#\/schema\/person\/7846d06225b52c778d160becf65996a5\"},\"headline\":\"CSS Locators in Selenium Tutorial\",\"datePublished\":\"2019-12-05T07:49:41+00:00\",\"dateModified\":\"2023-04-29T08:41:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\"},\"wordCount\":821,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/artoftesting.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#primaryimage\"},\"thumbnailUrl\":\"https:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/CSS-Locators-in-selenium.jpg\",\"articleSection\":[\"Selenium\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\",\"url\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\",\"name\":\"CSS Selector in Selenium WebDriver Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/artoftesting.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#primaryimage\"},\"image\":{\"@id\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#primaryimage\"},\"thumbnailUrl\":\"https:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/CSS-Locators-in-selenium.jpg\",\"datePublished\":\"2019-12-05T07:49:41+00:00\",\"dateModified\":\"2023-04-29T08:41:56+00:00\",\"description\":\"Free CSS Selector tutorial with different locator patterns along with their syntax and examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#primaryimage\",\"url\":\"https:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/CSS-Locators-in-selenium.jpg\",\"contentUrl\":\"https:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/CSS-Locators-in-selenium.jpg\",\"width\":700,\"height\":400,\"caption\":\"css locators in selenium\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/artoftesting.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automation Testing\",\"item\":\"https:\/\/artoftesting.com\/category\/automation-testing\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Selenium\",\"item\":\"https:\/\/artoftesting.com\/category\/automation-testing\/selenium\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"CSS Locators in Selenium Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/artoftesting.com\/#website\",\"url\":\"https:\/\/artoftesting.com\/\",\"name\":\"ArtOfTesting\",\"description\":\"A Beginners Guide to Testing\",\"publisher\":{\"@id\":\"https:\/\/artoftesting.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/artoftesting.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/artoftesting.com\/#organization\",\"name\":\"ArtOfTesting\",\"url\":\"https:\/\/artoftesting.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/artoftesting.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/Artoftesting_logo.png\",\"contentUrl\":\"http:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/Artoftesting_logo.png\",\"width\":400,\"height\":60,\"caption\":\"ArtOfTesting\"},\"image\":{\"@id\":\"https:\/\/artoftesting.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/artoftesting\",\"https:\/\/x.com\/theartoftesting\",\"https:\/\/www.linkedin.com\/groups\/4797819\/\",\"https:\/\/in.pinterest.com\/artoftesting\/\",\"https:\/\/www.youtube.com\/channel\/UCQ9PUVenvvyrUdDQ9yKn31Q\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/artoftesting.com\/#\/schema\/person\/7846d06225b52c778d160becf65996a5\",\"name\":\"Kuldeep Rana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/artoftesting.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cb5979a4b81ca7739c75080e473fad391a8665364e72abaddec9002dd4553326?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cb5979a4b81ca7739c75080e473fad391a8665364e72abaddec9002dd4553326?s=96&d=mm&r=g\",\"caption\":\"Kuldeep Rana\"},\"description\":\"Kuldeep is the founder and lead author of ArtOfTesting. He is skilled in test automation, performance testing, big data, and CI-CD. He brings his decade of experience to his current role where he is dedicated to educating the QA professionals.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Selector in Selenium WebDriver Tutorial","description":"Free CSS Selector tutorial with different locator patterns along with their syntax and examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver","og_locale":"en_US","og_type":"article","og_title":"CSS Selector in Selenium WebDriver Tutorial","og_description":"Free CSS Selector tutorial with different locator patterns along with their syntax and examples.","og_url":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver","og_site_name":"ArtOfTesting","article_publisher":"https:\/\/facebook.com\/artoftesting","article_published_time":"2019-12-05T07:49:41+00:00","article_modified_time":"2023-04-29T08:41:56+00:00","og_image":[{"width":700,"height":400,"url":"https:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/CSS-Locators-in-selenium.jpg","type":"image\/jpeg"}],"author":"Kuldeep Rana","twitter_card":"summary_large_image","twitter_creator":"@theartoftesting","twitter_site":"@theartoftesting","twitter_misc":{"Written by":"Kuldeep Rana","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#article","isPartOf":{"@id":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver"},"author":{"name":"Kuldeep Rana","@id":"https:\/\/artoftesting.com\/#\/schema\/person\/7846d06225b52c778d160becf65996a5"},"headline":"CSS Locators in Selenium Tutorial","datePublished":"2019-12-05T07:49:41+00:00","dateModified":"2023-04-29T08:41:56+00:00","mainEntityOfPage":{"@id":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver"},"wordCount":821,"commentCount":0,"publisher":{"@id":"https:\/\/artoftesting.com\/#organization"},"image":{"@id":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#primaryimage"},"thumbnailUrl":"https:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/CSS-Locators-in-selenium.jpg","articleSection":["Selenium"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#respond"]}]},{"@type":"WebPage","@id":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver","url":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver","name":"CSS Selector in Selenium WebDriver Tutorial","isPartOf":{"@id":"https:\/\/artoftesting.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#primaryimage"},"image":{"@id":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#primaryimage"},"thumbnailUrl":"https:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/CSS-Locators-in-selenium.jpg","datePublished":"2019-12-05T07:49:41+00:00","dateModified":"2023-04-29T08:41:56+00:00","description":"Free CSS Selector tutorial with different locator patterns along with their syntax and examples.","breadcrumb":{"@id":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#primaryimage","url":"https:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/CSS-Locators-in-selenium.jpg","contentUrl":"https:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/CSS-Locators-in-selenium.jpg","width":700,"height":400,"caption":"css locators in selenium"},{"@type":"BreadcrumbList","@id":"https:\/\/artoftesting.com\/css-selector-in-selenium-webdriver#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/artoftesting.com\/"},{"@type":"ListItem","position":2,"name":"Automation Testing","item":"https:\/\/artoftesting.com\/category\/automation-testing"},{"@type":"ListItem","position":3,"name":"Selenium","item":"https:\/\/artoftesting.com\/category\/automation-testing\/selenium"},{"@type":"ListItem","position":4,"name":"CSS Locators in Selenium Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/artoftesting.com\/#website","url":"https:\/\/artoftesting.com\/","name":"ArtOfTesting","description":"A Beginners Guide to Testing","publisher":{"@id":"https:\/\/artoftesting.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/artoftesting.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/artoftesting.com\/#organization","name":"ArtOfTesting","url":"https:\/\/artoftesting.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/artoftesting.com\/#\/schema\/logo\/image\/","url":"http:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/Artoftesting_logo.png","contentUrl":"http:\/\/artoftesting.com\/wp-content\/uploads\/2019\/12\/Artoftesting_logo.png","width":400,"height":60,"caption":"ArtOfTesting"},"image":{"@id":"https:\/\/artoftesting.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/artoftesting","https:\/\/x.com\/theartoftesting","https:\/\/www.linkedin.com\/groups\/4797819\/","https:\/\/in.pinterest.com\/artoftesting\/","https:\/\/www.youtube.com\/channel\/UCQ9PUVenvvyrUdDQ9yKn31Q"]},{"@type":"Person","@id":"https:\/\/artoftesting.com\/#\/schema\/person\/7846d06225b52c778d160becf65996a5","name":"Kuldeep Rana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/artoftesting.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cb5979a4b81ca7739c75080e473fad391a8665364e72abaddec9002dd4553326?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cb5979a4b81ca7739c75080e473fad391a8665364e72abaddec9002dd4553326?s=96&d=mm&r=g","caption":"Kuldeep Rana"},"description":"Kuldeep is the founder and lead author of ArtOfTesting. He is skilled in test automation, performance testing, big data, and CI-CD. He brings his decade of experience to his current role where he is dedicated to educating the QA professionals."}]}},"_links":{"self":[{"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/posts\/674","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/comments?post=674"}],"version-history":[{"count":1,"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/posts\/674\/revisions"}],"predecessor-version":[{"id":6868,"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/posts\/674\/revisions\/6868"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/media\/1598"}],"wp:attachment":[{"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/media?parent=674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/categories?post=674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artoftesting.com\/wp-json\/wp\/v2\/tags?post=674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}