jQuery selector not working on web page

[felix_the_helix]

One of the actions in my flow with the Chrome browser clicks on a div. But, the jQuery selector shown below does not select the div to click. It does nothing and does not throw an error. Doesn't Chrome support the :has and :contains selectors?

div:has(strong:contains("pfx"))

[MattJimison]

If it's not throwing an error about being unable to find the element, then it's not having an issue with the selector. Perhaps the problem is that you need to click something else to get your intended action? I'm not sure what you need to happen by only clicking on a certain div.

To answer your other question, Power Automate Desktop does support the :has and :contains selectors.

[felix_the_helix]

Actually, when I click on that div a pop up appears. I'm just testing the selector in PAD. I actually want to click on a button within that div with the following selector but its not working either:

div:has(strong:contains("pfx")) button

As a side note, this selector div:has(strong:contains("pfx")) does not work in the find element field of the Chrome dev tools in its Elements tab. It does not find the element on the DOM window. So is that the reason why it's not working even though PAD supports the :has and :contains selectors?

[yoko2020]

Maybe it is just the writing.

I remember it does not work if we use has

This is sample of selector writing.

div:contains("pfx")
div > strong:contains("pfx")

[MattJimison]

Chrome doesn't support the :contains selector; that's why you're not finding it within Chrome, but PAD does support the :contains selector. Both support the :has selector.

---

Find this post helpful? Please mark it as the solution and/or provide kudos so that it will help others in the future.

Cheers,
Matt

[felix_the_helix]

Thanks for this. It works, but I want to select the parent div which contains the strong element. I want to traverse the hierarchy 3 or 4 levels up to select the parent div that I need. Is there a way to select the parent div of an element in PAD?

[MattJimison]

The :has selector is essentially how you choose a parent, based on what's inside it. However, since you're keying off a div, and not specifying the number of levels deep the strong tag is, you're not going to likely get the one you want. You can use direct descendent selectors to assist, ie.

div:has(> div > div > div strong:contains('pfx'))

this would be a parent div where the strong tag is nested exactly 3 divs below it.

[felix_the_helix]

Thanks for the reply. The strong element is nested in the 5th div from the parent that I want to select. This includes the parent div that I want to select. So I did the following and nothing happens, no errors either:

 div:has(> div > div > div > div strong:contains("3:15pm"))

Actually, I'm using the following DOM tree. The top most div that contains the <strong> element with the text "3:15pm" is what I want to select and then click the button which it contains. It's the very first div shown below that I want to select. How should I code the selector for this?:

<div data-test-component="StencilReactCard" data-testid="ShiftCard-2022-11-07T20:15:00Z-2022-11-08T00:15:00Z" tabindex="0" role="button" class="css-s7b8pn">
   <div data-test-component="StencilReactRow" class="css-93w5zn">
      <div data-test-component="StencilReactView" data-test-id="ShiftTimeSiteSkill" class="css-1cl9hwf">
         <div data-test-component="StencilReactRow" class="css-7b15qy">
            <div data-test-component="StencilText" class="css-5mrmps"><strong>3:15pm-7:15pm</strong> (4hrs)</div>
         </div>
         <div data-test-component="StencilReactRow" class="css-b9a2q3">
            <div data-test-component="StencilText" data-test-id="ShiftTimeSiteSkill-site" class="css-kyen4s">Opportunity Card</div>
         </div>
         <div data-test-component="StencilReactRow" class="css-b9a2q3">
            <div data-test-component="StencilText" data-test-id="ShiftTimeSiteSkill-skill" class="css-kyen4s">Current Listing</div>
         </div>
      </div>
   </div>
   <div data-test-component="StencilReactView" data-test-id="ShiftCardScheduledStatus" class="css-1uk1gs8">
      <div data-testid="ShiftCardScheduledStatus_Empty" class="css-17jnaqn"></div>
   </div>
   <div data-test-component="StencilReactRow" class="css-3dmssj">
      <div data-test-component="StencilReactView" data-test-id="StopPropagationContainer" class="css-1uk1gs8">
         <button data-test-component="StencilPopoverTrigger" aria-expanded="false" aria-describedby="ShiftFlowActionsButton-helperText" data-test-id="ShiftFlowActionsButton" type="button" class="exidgq40 e4s17lp0 css-1ijwbsp">
            <div data-test-component="StencilReactRow" class="css-fpj0yv">
               Actions
               <div class="css-mtbjwo e1fhen290">
                  <svg display="block" xmlns="http://www.w3.org/2000/svg" class="stencilSvgIcon css-14wvfj0" width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 16 16" data-test-component="StencilIconChevronDown" style="width: 16px; height: 16px;">
                     <path fill-rule="evenodd" fill="currentColor" d="M3,6a1,1,0,0,1,1.7-.7L8,8.6l3.3-3.3a1,1,0,0,1,1.4,1.4l-4,4a1,1,0,0,1-1.4,0l-4-4A1,1,0,0,1,3,6Z"></path>
                  </svg>
               </div>
            </div>
         </button>
         <div class="css-1hpxqns" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(682px, 164px);" data-popper-placement="bottom">
            <div style="opacity: 0; transform: translateY(-16px);"></div>
         </div>
         <span hidden="" id="ShiftFlowActionsButton-helperText">Action Button</span>
      </div>
   </div>
</div>

[MattJimison]

Any reason you couldn't just do something like:

div[role='button'] button

In other words, I'm not sure sure whether you really need to go at the selector from the parent's perspective, if that parent already has an attribute on it that you can use to uniquely identify it (i.e. role in this case)

[felix_the_helix]

But, there are several of these shift cards that repeat the DOM tree that I posted, and they all have the role=button attribute. I need to specifically select the card that has the "3:15pm-7:15pm" text in it, namely the one with the element <strong>3:15pm-7:15pm</strong>.

[yoko2020]

Can you try this

strong:contains("3:15pm-7:15pm")

If i remember correctly, you have to use full words, case sensitive

[felix_the_helix]

Yes, that works, but this does not work:

div:has(strong:contains("3:15pm-7:15pm"))

Does it have anything to do with the :has selector?

[yoko2020]

try this

div:has(strong:contains('3:15pm-7:15pm'))

or this

"div:has(strong:contains('3:15pm-7:15pm'))"

[felix_the_helix]

Both did not work, and "div:has(strong:contains('3:15pm-7:15pm'))" actually threw an "element not found" error.

I knew that this selector code works with jQuery itself as shown in the pic you posted, but it's not working in PAD.

[felix_the_helix]

Actually, div:has(strong:contains('3:15pm-7:15pm')) works if I use the "Click link on web page " action. But, it does not work if I use the "Press button on web page" action. And, the following is not working even if I use the "Press button on web page" action:

div:has(> div > div > div > div strong:contains('3:15pm-7:15pm')) button

What can I do to fix it? I feel like I'm so close to getting this to work.

[yoko2020]

Last option is using action run javascript on webpage.

function ExecuteScript()
{
document.querySelector("div:has(strong:contains('3:15pm-7:15pm'))").click();
}

[felix_the_helix · Accepted solution]

I got it to work. I used the following with the "Press button on web page" action:

div:has(> div > div > div > div > strong:contains('3:15pm-7:15pm')) button

I guess I needed the extra direct descendant > symbol just before the strong:contains('3:15pm-7:15pm') selector. I'll consider the javaScript action if I need to use it in the future. Thanks everyone for helping out! 🙂

[yoko2020]

Good to know.

Remember to use full words (case sensitive) if using css contains

[felix_the_helix]

Ok. Thanks.