Let’s explore some basic CSS selectors that can be used in Selenium WebDriver. Selenium WebDriver’s By class provides the cssSelector() method for locating elements using CSS selectors.

1. Locating elements using CSS
selectors
Let’s explore some basic CSS selectors that can be used in Selenium WebDriver.
Selenium WebDriver’s By class provides the cssSelector() method for locating elements
using CSS selectors.Finding elements with absolute pathCSS absolute paths refer to
the very specific location of the element considering its complete hierarchy in the DOM.
Here is an example where the Username Input field is located using the absolute path.
While providing absolute path, a space is given between the elements.
1 WebElement userName = driver.findElement(By.cssSelector("html body div div form
input"));
You can also use the previous selector in the following way by describing the direct
parent to child relationships with > separator:

2. 1 WebElement userName = driver.findElement(By.cssSelector("html > body > div > div
> form > input"));
However, this strategy has limitations as it depends on the structure or hierarchy of the
elements on a page. If this changes, the locator will fail to find the element.
Finding elements with relative path
With relative path we can locate an element directly, irrespective of its location in the
DOM. For example, we can locate the Username Input field in the following way,
assuming it is the first <input> element in the DOM:
1 WebElement userName = driver.findElement(By.cssSelector("input"));
The following CSS selectors use the Class and ID attributes to locate the elements
using relative paths. This is same as the className() and id() locator methods.
However, there is another strategy where we can use any other attribute of the element
that is not covered in the By class.
Finding elements using the Class selector
While finding elements using the CSS selector, we can use the Class attribute to locate
an element. This can be done by specifying the type of HTML tag, then adding a dot
followed by the value of the class attribute in the following way:
1 WebElement loginButton = driver.findElement(By.cssSelector("input.login"));
This will find the Login button’s <input> tag whose Class attribute is login.
There is also a shortcut where you can put a . and class attribute value and ignore the
HTML tag. However, this will return all the elements with class as login and the test may
not return the correct element.
1 WebElement loginButton = driver.findElement(By.cssSelector(".login"));
This method is similar to the className() locator method.
Finding elements using ID selector

3. We can locate the element using the IDs assigned to elements. This can be done by
specifying the type of HTML tag, then entering a hash followed by the value of the Class
attribute, as shown:
1 WebElement userName = driver.findElement(By.cssSelector("input#username"));
This will return the username <input> element using its id attribute.
There is also a shortcut where you can enter # and a class attribute value and ignore
the HTML tag. However, this will return all the elements with the id set as username and
the test may not return the correct element. This has to be used very carefully.
1 WebElement userName = driver.findElement(By.cssSelector("#username"));
This method is similar to the id locator strategy.
Finding elements using attributes selector
Apart from the class and id attributes, CSS selectors also enable the location of
elements using other attributes of the element. In the following example, the Name
attribute is used to locate an <input> element.
1 WebElement userName =
driver.findElement(By.cssSelector("input[name='username']"));
Using the name attribute to locate an element is similar to the name() locator method of
the By class.
Let’s use some other attribute to locate an element. In the following example, the <img>
element is located by using its alt attribute.
1 WebElement previousButton =
driver.findElement(By.cssSelector("img[alt='Previous']"));
You might come across situations where one attribute may not be sufficient to locate an
element and you need to combine additional attributes for a precise match. In the
following example, multiple attributes are used to locate the Login button’s <input>
element:
1 WebElement previousButton =
driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));

4. Finding elements using Attributes Name Selector
This strategy is a bit different from the earlier strategy where we want to locate elements
based on only the specific attribute defined for them but not attribute values. For
example, we want to lookup all the <img> elements which have alt attribute specified.
1 List<WebElement> imagesWithAlt = driver.findElements(By.cssSelector("img[alt]"));
A Boolean not()pseudo-class can also be used to locate elements not matching the
specified criteria. For example, to locate all the <img> elements that do not have the alt
attribute, the following method can be used:
1 List<WebElement> imagesWithoutAlt
=driver.findElements(By.cssSelector("img:not([alt])"));
You can visit Connect2tech for more such blogs,more amazing courses to learn.