CSS selector in Selenium Webdriver

1. Open Chrome Browser.

2. Press F12.

3. Press “ESC”. it will open “Console”. In Console, we can validate our CSS or Xpath whether it is valid or not.

4. We use some syntax to validate various CSS. Let’s explain.

Direct child

For Xpath

Right click on the element you want to inspect and select “inspect element”. It will highlight the code. In Console, write $x(“//input[@id=’txtLogin’]”) and press Enter. It will search for the direct child element.

If you want find all direct child elements of tag “input” under the type “div”, the syntax is $x(“//div/input”), it will inspect all elements of type “Input” under div.

For CSS

If you want find all direct child elements of tag “input” under the type “div”, the syntax is $$(“div>input”), it will inspect all elements of tag “Input” under div.

Anywhere in the page

For Xpath

If you want find all direct child elements of type “input” under the tag “div” anywhere in the page, the syntax is $x(“//div/input”), it will inspect all elements of type “Input” under div.

For CSS

If you want find all direct child elements of type “input” under the tag “div”anywhere in the page , the syntax is $$(“div input”), it will inspect all elements of tag “Input” under div.

For Attributes

For Xpath

If you want find specific elements of type “input” with id, the syntax is $x(“//input[@id=’txtLogin'”])

For CSS

If you want find specific elements of type “input” with id, the syntax is $$(“input[id=’txtLogin’]”)

#besttestingtools #besttoolsforsoftwaretesting

#besttestingtools #besttoolsforsoftwaretesting #istqbcertificationtraininginchandigarh #jmetertraininginchandigarh #Loadrunnertraininginchandigarh #qatools #qtptraininginchandigarh #seleniumtraininginchandigarh #TestingTools #testingtraininginchandigarh