In the previous article, we learned about the types of locators that a selenium web driver uses to interact with a web page. In this article, we will be looking in detail into CSS Selector.
CSS (short for Cascading Style Sheets) is used to style elements on a web page. Using the CSS selector we can locate any element on a web page and perform any action on them. The benefit of using a CSS selector is that they are less complex and faster than XPath.
So following are the ways by which CSS selectors can be used to find the desired element on any web page.
1.With id:
1 2 | //HTML Code <input id="bookauthorid" name="bookauthorname" type="text" placeholder="Book Author*" /> |
To use id as a selector, the syntax to be followed is # followed by the id name; in this case, it will be #bookauthorid.
1 2 | //Selenium Code WebElement bookauthor = driver.findElement(By.cssSelector("#bookauthorid")); |
2. With class:
1 2 | //HTML Code <input class="bookauthorclass" name="bookauthorname" type="text" placeholder="Book Author*" /> |
To use class as a selector, we will use . followed by the class name; in this case it will be .bookauthorclass.
1 2 | //Selenium Code WebElement bookauthor = driver.findElement(By.cssSelector(".bookauthorclass")); |
3. With TagName:
1 2 | //HTML Code <input class="bookauthorclass" name="bookauthorname" type="text" placeholder="Book Author*" /> |
In the above html code the tag name being used is input. Upon using, it will select all input tags in the current web page.
1 2 | //Selenium Code WebElement bookauthor = driver.findElement(By.cssSelector("input")); |
4. With Attribute and their Values:
1 2 | //HTML Code <input class="bookauthorclass" name="bookauthorname" type="text" placeholder="Book Author*" /> |
In the above html code we are considering the name attribute and using its corresponding value.
1 2 | //Selenium Code WebElement bookauthor = driver.findElement(By.cssSelector("[name='bookauthorname']")); |
5. With combination of Tag and id/Class
1 2 | //HTML Code <input id="bookauthorid" class="bookauthorclass" name="bookauthorname" type="text" /> |
In this type we would be using the combination of two locators; tag and id & tag and class.
1 2 3 4 | //Selenium Code for tag and id WebElement bookauthor = driver.findElement(By.cssSelector("input#bookauthorid")); //Selenium Code for tag and class WebElement bookauthor = driver.findElement(By.cssSelector("input.bookauthorclass")); |
6. With combination of Tags and Attributes
1 2 | //HTML Code <input id="bookauthorid" class="bookauthorclass" name="bookauthorname" type="text" /> |
In this example we will be using the tag name input along with attribute id and its corresponding value.
1 2 | //Selenium Code WebElement bookauthor = driver.findElement(By.cssSelector("input[id='bookauthorid']")); |
7. With Direct Child
1 2 3 | //HTML Code <div id="form" class="btnbeautify"><input id="submitbtnid" name="submitButtonName" type="submit" /> </div> |
For direct child the selector syntax is Parent>Child. Here the parent locator is div#form and inside the parent locator is the child locator which is submit button. So the direct child in this case will be div#form>submit.
1 2 | //Selenium Code WebElement bookSubmit = driver.findElement(By.cssSelector("div#form>submit")); |
8. With Child inside a child (Sub-child)
1 2 3 4 | //HTML Code <div id="form" class="btnbeautify"> <input id="submitbtnid" name="submitButtonName" type="submit" /> </div> |
For sub-child the selector syntax is Child1 Child2. Here the Child1 is div#form and Child2 is the submit button.
1 2 | //Selenium Code WebElement bookSubmit = driver.findElement(By.cssSelector("div#form submit")); |
9. With :nth-child
1 2 3 4 5 6 7 8 | //HTML Code <select id="booklang"> <option value="English">English</option> <option value="Hindi">Hindi</option> <option value="German">German</option> <option value="French">French</option> <option value="Other">Other Language</option> </select> |
In the above html code we want to select German using CSS Selector. To do that, first we will go to #booklang, and then select the third value from the dropdown, which will be option:nth-child(3).
1 2 | //Selenium Code WebElement bookLang = driver.findElement(By.cssSelector("#booklang option:nth-child(3)")); |
10. With Siblings
1 2 3 4 5 | //HTML Code <ul><li id="fruit">Apple</li> <li>Mango</li> <li>Banana</li> <li>WaterMelon</li></ul> |
In this example, we want to select the second item of the list but we don’t have any attribute that can be considered. So to select the second list item without any list id/class/name, we will locate the first list item with its id and then go to the next. So, the CSS selector in this case would be li#fruit+li.
1 2 | //Selenium Code WebElement secondFruit = driver.findElement(By.cssSelector("li#fruit+li")); |
11. With ^, $, *
^ denotes the start of the text.
$ denotes the end of the text.
* denotes that text is present in the string.
1 2 | //HTML Code <div id="xcz-8976-py" class="sbtbtn_btfy"></div> |
1 2 3 4 | //Selenium Code WebElement selectDiv = driver.findElement(By.cssSelector("div[id^='xcz']"); WebElement selectDiv = driver.findElement(By.cssSelector("div[id$='py']"); WebElement selectDiv = driver.findElement(By.cssSelector("div[id*='-89']"); |
12. Using Not
1 2 3 4 | //HTML Code <div class="car sedan honda red-color" /> <div class="car hatchback ford red-color" /> <div class="car suv fiat blue-color" /> |
In the above html code say suppose we want to select the third div. In order to do that, we will be using not, by eliminating the above two divs on the basis of a common class name; and also consider a class name which is common to all the three divs. So in div1 and div2 the common class is red-color and for div1, div2 and div3 the common class is car. So the css selector in this case will be div[class*=car]:not([class*=’red-color’]).
1 2 | //Selenium Code WebElement selectCar = driver.findElement(By.cssSelector("div[class*=car]:not([class*='red-color']"); |
