Xpath doubt

I am new to XPATH

Supratik’s Kitchen

Switch to mobile view .

where i am writing XPATH corresponding this .

You will see 4 add+ buttons . Inspect it and see the html code .

Writing this XPATH in console in dev tools of chrome


Gives me 4 buttons which is right .

I wrote this below XPATH in CONSOLE coz i found it somewhere in what’s app without explaining what this XPath does .


I see that this XPATH returns also those 4 buttons .

But when i write this



it returns an empty array .
Why so?

It doesn’t give me 4 buttons, I’m afraid.

Maybe if you explain what you are trying to do, that might help.

P.S. I’m using Firefox, not Chrome, but I don’t think that should make a difference.

the first step is to find how many add+ buttons are there using XPATH.


There are four lists whose name starts with store_product_li
which contains each add+ button .

So it gives me 4 .

I don’t know why it is giving blank in mozilla .
try it in chrome and give me a reply.

Let’s make sure we’re talking about the same thing first.

Here’s what I see when I decrease my browser width (or use the mobile device emulator in the dev tools).

The add buttons you are talking about are the ones with a blue border, with the text ADD +.

Did I get that right?

yes the add buttons are those with blue border .
When you have clicked mobile view try to refresh the page once so that the website appears in a organized format .

Getting a bit off topic here, but when I refresh the page, the layout stays the same.

Re. the XPath, I don’t see how this can work.

There is no (div) element on the page with an ID of feature-product-product-list-div.

This is the markup for one of those buttons:

<button class="MuiButtonBase-root MuiButton-root MuiButton-outlined add-button MuiButton-outlinedPrimary MuiButton-disableElevation" tabindex="0" type="button" style="color: rgb(36, 151, 251); border-color: rgb(36, 151, 251);">
  <span class="MuiButton-label">Add +</span>
  <span class="MuiTouchRipple-root"></span>

So you could just do:

$x("//button[span[contains(text(), 'Add +')]]")

Which returns what you want:

All the above says is select any buttons whose children are spans containing the text ‘Add +’.

see the div .

please open in chrome.

This is a much unique and less dependency way . Starting from top to reach to button .


Interesting. We must be looking at two different pages.

I inspected the source (via dev tools) and searched for “feature” and as you can see, no results.

I don’t have Chrome installed. If I have enough time, I might install it later, but I’m not convinced this will make a difference.

'mkay. What are you trying to accomplish? (I’m curious)

no see in my picture how the website is looking and in your case everything is on top of each other .
First you need to sort that one out then

tell me that what should this XPATH shall return


In my case it is returning 4 buttons but my knowledge says it should return 1 .

I just installed Chromium, but the result is the same:

You need to emulate a device from the device toggle toolbar and then click refresh (in Chrome).

In Firefox its an icon to the right top called ‘responsive design-mode’ and allows you to select a mobile device to emulate (very roughly).

It looks like the site is detecting mobile and then serving a different layout so you won’t get the same effect just by resizing the desktop. (Of course that means small screen desktop is broken badly.)


That did it. Thanks.

I have to step out for a while, but if no one else replies in the meantime, I’ll write more on xpath later on.

1 Like

Just a question about using escape character in XPATH

this is a XPATH which fails to work
$x(“//span[text()= ’ I’m a Seller ']”)

But when changed it to this works perfectly

$x(“//span[text()="I’m a Seller"]”)

Why does this work ?

How does the backslash work ?

I want to know the details

Good morning,

Now I have been able to recreate the mobile view properly, I can follow along with your examples.

Correct. Let’s look at what is going on there:


This gives you all div elements on the page with an id of feature-product-product-list-div.


This gives you any descendant elements of the div#feature-product-product-list-div element whose id starts with store_product_li.

This is an array of 4 elements.


And finally,


This gives you an array containing any descendant elements of the li elements, which are buttons:


So far, so good, hopefully.

The first thing to be aware of here is that indexes in XPath start from position 1, not position 0 like regular JavaScript.

With that said, this:


will select the first button element from each of the li elements in the previous array:


  li#store_product_li_65833,     <-- first button element from here
  li#store_product_li_65861,     <-- first button element from here
  li#store_product_li_65838,     <-- first button element from here
  li#store_product_li_65862      <-- first button element from here

But what you want to do is select the first (second, third etc) element(s) in the array of button elements:


  button.MuiButtonBase-root...    <-- select this one
  button.MuiButtonBase-root...    <-- or this one
  button.MuiButtonBase-root...    <-- or this one
  button.MuiButtonBase-root...    <-- or this one

So we need to tweak the expression slightly. This will return the first element:


This will return the second button element.


and so on.

Does that answer the question?


1 Like

Did you made any changes to the hTML code by any chance as
as I am not finding a div with id

This XPATH gives me 4 buttons now when I write in find bar


okay finally understood . THanks


@James_Hibbard @PaulOB

So , let’s get this straight suppose there are three lists l1 , l2 ,l3

This selects all the first button elements from each & every lists .

If list 1 has 3 buttons then it will select 1st button , list 2 has 4 button then also first one .


Yup :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.