'How to create xpath that matches both conditions present in an element?

Description: I need to create an Xpath that matches both the condition present in the div class = 'item_inside'

Explanation: Imagine There are two item_inside classes present on my webpage. One class has Big Basket text present inside aria-label, and another class has small basket present in the aria-label tag.

//*[@class = 'item_inside']//*[@class = 'food_list']

If I write the above xpath in developer tools it shows me two results, All I want to do is to somehow add aria-label = 'BigBasket' in the Xpath so that it gives me a unique result.

<div class="item_inside">
 <div class="one_line">

    <div class="support_text">
        <div class="detail_info">
            <div class="headline_title_content headline_title_2" tabindex="0" aria-label="Big Basket">
            </div>
       </div>
    </div>
  </div>

  <ul _cid="123456" class="food_list">
  </ul>
</div>

Here is my tried xpath:

//*[@class = 'item_inside']//*[@class = 'one_line']//*[@class = 'headline_title_content headline_title_2' and @aria-label = 'Big Basket']//*[@class = 'item_inside' and @class = 'food_list']

Things I've tried:

I tried to create an Xpath with and, or , contains but I think the format of xpath was not proper so I didn't got my output.



Solution 1:[1]

I suppose you need this as a first filter:

//*[@class = 'item_inside'][*[@class = 'food_list']]

So now you have every element with @class=item_inside and who has a element with class=food_list

Next you want to filter on that inner div , so we just add another predicate

//*[@class = 'item_inside'][*[@class = 'food_list']][*[@class = 'one_line']//*[@class = 'headline_title_content headline_title_2' and @aria-label = 'Big Basket']]

So now you have selected every the //*[@class = 'item_inside'] with these conditions

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Siebe Jongebloed