May 2, 2024 8:07 PM
CSS Selectors are string patterns used to identify an element based on a combination of HTML tag, id, class, and attributes. Locating by CSS Selector is more complicated than the previous methods like by Id, class, XPath, but it is the most common locating strategy of advanced Selenium users because it can access even those elements that have no ID or name.
CSS is preferred way of locating element as it is faster than Xpath.
Table of Contents
Syntax
(By.cssSelector("input#email"))
(By.cssSelector("#email"))
If two or more web elements have the same HTML tag and attribute value, the first element marked in the page source will identify.
Syntax
(By.cssSelector("input.inputtext"))
Syntax
(By.cssSelector("input[type='email']"))
Syntax
(By.cssSelector("input.inputtext[name='email']")
CSS in Selenium has an interesting feature of allowing partial string matches using ^, $, and *.
a) Starts with (^): To select the element, we would use ^ which means ‘starts with’.
Syntax
(By.cssSelector("input[name^='em']"))
Prefix – It is the string based on which match operation is performed. The likely string is expected to start with the specified string
b) Ends with ($): To select the element, we would use $ which means ‘ends with’.
Syntax
(By.cssSelector("input[name$='il']"))
c) Contains (*): To select the element, we would use * which means ‘sub-string’.
Syntax
(By.cssSelector("input[name*='rst']"))
(By.cssSelector("input:contains('rst')")
* – This is used to match the sub-string
Here, id =”content” is the parent locator. It will go to first div as child or sub child, then again div as child or sub child, and third div as child or sub child. Then it will go to div class _4bl7 _m-_ which further go to div class _ihd _3ma mbs _6n _6s _6v.
Syntax
(By.cssSelector("#content>div>div>div>div._4bl7._m-_>div._ihd._3ma.mbs._6n._6s._6v"))
Locating nth Child:
To locate the element with text ‘Female’, we use nth type css.
Syntax
(By.cssSelector("#u_0_13 > span:nth-child(1) > label"))
To select the last child element, i.e. ‘Male’, we can use.
Syntax
(By.cssSelector("#u_0_13 > span:last-child> label"))
Now, let’s write a small program to show the use of CSS Selectors. This program is it we have done for XPath , the only difference is the use of CSS Selectors to identify the web elements.
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import java.time.Duration;
public class Selenium_Demo {
protected static WebDriver driver;
public static void main(String[] args) {
ChromeOptions options = new ChromeOptions();
options.addArguments("--start-maximized");
driver = new ChromeDriver(options);
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(2));
driver.get("https://opensource-demo.orangehrmlive.com/");
driver.manage().window().maximize();
//CSS Selectors for TextBox
driver.findElement(By.cssSelector("input.oxd-input[name='username'")).sendKeys("Admin");
driver.findElement(By.cssSelector("input.oxd-input[name='password'")).sendKeys("admin123");
driver.findElement(By.cssSelector("button[type='submit'")).click();
driver.close();
}
}
That’s it! Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!!
Posted by vibssingh
Categories: Selenium
Tags: CSS Selector, Locators, Selenium Webdriver
Mobile Site | Full Site
Get a free blog at WordPress.com Theme: WordPress Mobile Edition by Alex King.
How can I write a locator to identify paragraph elements that are the immediate child of a div element, or the descendent of a div element?
LikeLike
By Neetu Gupta on May 10, 2019 at 8:50 PM
An immediate child in XPath is identified using “/”, while on CSS, it is using “>”. With XPath: //div/pWith CSS: div > pDescendent:To find paragraph elements that are descendent to any div element (i.e. the paragraph element appears in the subtree rooted at the div element), we can use “//” in XPath, and just a whitespace in CSS:With XPath: //div//pWith CSS: div pI hope this help you.
LikeLike
By Vibha on May 11, 2019 at 11:43 AM