✔ CSS Selectors - Kick Elements Using CSS Selectors | (Video 46)

CSS Selectors - Kick Elements Using CSS Selectors

The CSS Selector locator is very powerful for Selenium. Its value can find challenging elements within the Document Object Model (DOM). This 6-minute video shows how to find an element using an id attribute (#), class attribute (.), and TagName [AttributeName=’AttributeValue’] condition.

► Download Cheat Sheet, Transcript, and Presentation https://test4success.lpages.co/select-webelements-using-selenium-locators/
► Documentation via GitHub https://github.com/RexJonesII/Selenium4Beginners

Free Selenium Book covers CSS Selectors (pages 79 - 88)
► Free Selenium PDF Book: https://www.rexjones2.com/book-selenium-4-beginners/
► Free Java PDF Book: https://www.rexjones2.com/book-part-1-core-java/
► All Paperback & eBooks: http://tinyurl.com/Rex-Allen-Jones-Books

► View All Videos On LinkedIn https://www.linkedin.com/company/28599523/admin/
► View All Videos On YouTube https://www.youtube.com/channel/UCBU_TzaPsDXXeQ3ItUYKaJg/videos
► View All Videos On Facebook https://www.facebook.com/pg/Selenium-4-Beginners-2051994988170815/videos/?ref=page_internal

► Transcript
Hello and Welcome To Selenium 4 Beginners. We are going to discuss How To Create Our Own Customized CSS Selector Values. The Cheat Sheet and Transcript will be available on github at RexJonesII/Selenium4Beginners and https://tinyurl.com/SeleniumLocatorsForWebElements

Let’s start with the hashtag which represents the ID Attribute and the dot which represents the Class Attribute. We are going to use OrangeHRM as our (AUT) Application Under Test. Inspect Username and we see an id attribute. To find this element using id, we write the TagName input and we see 22 elements with an input tag, hashtag then paste the value for id which is searchSystemUser_userName. The green highlighted element means we successfully found Username.

Next, is the class attribute. Let’s inspect the Search button and we see class has a value of searchbutton. Write input, dot, searchbutton. The element is highlighted green. Did you notice the Chrome DevTools provide a CSS Selector value over the WebElement? Hover over the Search button and we see input, hashtag, searchBtn, dot, searchbutton.

It combines the id and class attributes. input, hashtag, searchBtn, dot, searchbutton and we have our element. However, only 1 attribute is sufficient if it contains a unique value. We can also find an element using id or class without writing a tag name like hashtag, searchBtn but it is best to include the TagName.

The next 2 syntaxes show TagName and a condition [AttributeName=’AttributeValue’]. We have the option of adding more than 1 condition. Both of these syntaxes look like an XPath syntax. The difference is XPath has 2 forward slashes and an at symbol.

Let’s inspect the Delete button and write a query. We see our element. Write Tag name input, 2 brackets, then write type, and we see 18 elements. Narrow the search for type by writing equal, 2 single quotes, and submit. Now, we see 1 of 1. If we change submit to button then we see 8 elements which include Search, Reset, and Add. The developer has Delete as a different type than the other buttons.

Next Inspect image. There are 4 attributes: src, width, height, and alt. Let’s pretend, a requirement wanted to make sure the width and height is a certain size. We can write, img for tag, 2 brackets, width, equal, 2 single quotes, and 283 for the first condition. The second condition is 2 brackets, height, equal, 2 single quotes, and 56. Bingo. We have our element. Next, we are going to look at some Advanced CSS Selectors.

#SeleniumTraining #SeleniumAutomation #CSSSelector #SeleniumWebDriver