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]"));

Previous Part Next Part