Not able to find the unique xpath for an element in expedia.com using Selenium

Question

I am trying to find the unique xpath for elements in the "travelers" pop option in the home page of expedia.com

When I give the following xpath "//div[contains(@class,'gcw-menu')]/div/div1/div2/div[4]/button/span", there are 6 webelements related to this and I am not able to find the unique one that clicks the "+" to increase the adults.

I even tried

java.util.List listel = driver.findElements(By.xpath("//div[contains(@class,'gcw-menu')]/div/div1/div2/div[4]/button/span"));

but this does not work, since the xpath is still not unique.

Answer 1

Welcome to the site.

It seems the structure is a bit unclear because with "Adults" there's no "div wrapper" like there's with e.g. "Children":

So I found it easier to define it using not():

//div[@class="traveler-selector-room-data target-clone-field"]/div[not(contains(@class, "children")) and not(contains(@class, "infants"))]//button[contains(@class, "plus")]

Perhaps not the cleanest solution, but it does work. If you need the minus button, you change only the last value for contains() to "minus".

Answer 2

If you want to click the element, then you have use the button tag:

the xpath for the highlighted '+' sign is

(//div[@class="traveler-selector-room-data target-clone-field"]//button[@class="uitk-step-input-button uitk-step-input-plus"] )[1]

you can just change the number to 2, or 3 to get the other two.

Approach i took:

1) Find the parent element which is unique:

Here, the frame is the unique element:

The locator for this frame is :

//div[@class="traveler-selector-room-data target-clone-field"]

2) Now find the unique child element button:

Here, the locator for button was :

//button[@class="uitk-step-input-button uitk-step-input-plus"]

3) Now combine the two

The button element is not direct child of parent element , so i used //

Hence the final locator is :

//div[@class="traveler-selector-room-data target-clone-field"]//button[@class="uitk-step-input-button uitk-step-input-plus"]

But this gives 3 elements, we just need the first one:

So,

We put everything in () and then say we need first element 1

(//div[@class="traveler-selector-room-data target-clone-field"]//button[@class="uitk-step-input-button uitk-step-input-plus"] )[1]

Answer 3

Just as a general advice, try to subdivide your application when lookin for selectors. I'll try to explain using the css selector since those tend to be a) more performant, b) more readable and c) allow you to transfer it to xpath on your own.

#traveler-selector-hp-package .traveler-selector-room-data>div:not(.children-wrapper):not(.infants-wrapper) button[class*='plus'] is the general selector. The first #traveler-selector-hp-package part uses the id of the popup, cutting out similar parts on the page and giving you a sub document to work in.

.traveler-selector-room-data>divtells your application that, within your sub document you're looking for any element with the class traveler-selector-room-data directly followed by a div. this matches four elements. The title "Room 1", the Adults Section, the children section and the infants section. Two of those we can exclude by using :not(.children-wrapper):not(.infants-wrapper) which will eliminate the two other input layers leaving us with the title and the desired Adults layer. button[class*='plus'] closes the deal here since the title doesn't have a button element to match leaving us just with the plus button.

Using this structure you should easily be able to translate it into xpath but I'd encourage you to just try out other divisions to get a feel for how an element of an HTML document can be described through selectors since having a firm grasp on the concept is an invaluable skill to have in our line of work.

If you still have any problems just ask, I'll try to clarify.

Answer 4

Just use keyboard TAB key to switch bitween the elements on the layer and then press the space or enter key to perform the click event.