Answered

jQuery selector not working on web page

(0) Share

Report

Posted on by 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"))

Categories:

Power Automate Desktop

I have the same question (0)

All responses (18)

Answers (1)

Sort by

MattJimison 579 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
felix_the_helix 59 on at

Like
a
(0)

Report
Copy link

Link copied!

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?

Was this reply helpful? Yes No
yoko2020 495 on at

Like
a
(1)

Report
Copy link

Link copied!

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")

Was this reply helpful? Yes No
MattJimison 579 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
felix_the_helix 59 on at

Like
a
(0)

Report
Copy link

Link copied!

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?

Was this reply helpful? Yes No
MattJimison 579 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
felix_the_helix 59 on at

Like
a
(0)

Report
Copy link

Link copied!
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>

Was this reply helpful? Yes No
MattJimison 579 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!

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)

Was this reply helpful? Yes No
felix_the_helix 59 on at

Like
a
(0)

Report
Copy link

Link copied!

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>.

Was this reply helpful? Yes No
yoko2020 495 on at

Like
a
(1)

Report
Copy link

Link copied!

Can you try this
strong:contains("3:15pm-7:15pm")

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

Was this reply helpful? Yes No