How to write/ check Xpath and CSS Selector expression in any browser?

In this blogpost, we are going to learn how to write or check our Xpath or CSS selector expression in any browser.

We are not going to use any tool or plugin like Firebug or Bugzilla for writing and checking Xpath or CSS selector expression.

The method of verifying the expressions will be browser independent. And using the method, we will be able to write custom Xpath or CSS selectors for any web element on the web page.

So, follow the below steps to write/ check your XPATH/ CSS selector :

Step 1. Open Google Chrome browser (without any plugin/ tool installed).

Step 2. Open Google home page.

Step 3. Click F12 key.

Step 4. Switch to Console tab.

check-xpath-in-browser.png

Step 5. We can write our custom XPATH/ CSS selector expressions in console tab area.

Step 6. Copy $x(“//input[@id=’lst-ib’]”) and paste on console, you will be able to see located element as below.

check-xpath-in-browser1

Here, $x(“”) -> Refers to Xpath expression.

Step 7. Now, copy $$(“input[id=’lst-ib’]”) and paste on console, you will be able to see located element as below.

check-css-selector-in-browser.png

Here, $$(“”) -> Refers to CSS Selector expression.

If your Xpath/ CSS selector expression is syntactically incorrect, then the console will show the error.

check-xpath-in-browser-syntax-errorIf multiple elements are found, matching your Xpath/ CSS selector expression, then an array containing all the objects will be shown on the console.

check-xpath-in-browser-multiple-elementsSo, this programmatic and more customized way of writing Xpath and CSS selector expressions allows you to build the expressions of your own style(until and unless its programmatically correct).

Hope it helps you!!

Cheers 🙂

Advertisements

#css-selector-in-browser, #custom-css-selector, #custom-xpath, #programmatic-way-of-writing-xpath, #xpath-in-browser