CssSelector Locator
CSSSelector is used to identify an element based on a combination of HTML tag, id, class, and attributes. It is mainly used for identifying multiple elements in the web page having a similar style.
Below are the some of the mainly used formats of CSS Selectors.
1. Tag and ID
Syntax: WebElement element = driver.findElement(By. cssSelector (tag#id));
2. Tag and Class
Syntax: WebElement element = driver.findElement(By. cssSelector (tag.class));
3. Tag and Attribute
Syntax: WebElement element = driver.findElement(By. cssSelector (tag[attribute=value]));
4. Tag, Class and Attribute
Syntax: WebElement element = driver.findElement(By. cssSelector (tag.class[attribute=value]));
5. Inner text
Syntax: WebElement element = driver.findElement(By. cssSelector (tag.contains(“inner text”)));
Let’s take an example by locating “UI Elements” in “https://demoapp1.tequality.tech/” page.
Step1: Open “https://demoapp1.tequality.tech/“ in browser
Step2: Hover your mouse to side-menu
Step3: Right click on the mouse and do inspect element
WebElement element = driver.findElement(By.cssSelector("ul[id=side-menu]"));