How to use CSS Selector to select the second element that matches the selection

Product Forums Katalon Studio
1

I have been using document.querySelectorAll recently since I found these selectors to be very stable, for a new test case I found a selector using the id:

#discretionaryPopupButton

Somehow the devs of the application are using multiple elements with this same id on the page…

To select the second item I enter in the chrome console:

document.querySelectorAll(‘#discretionaryPopupButton’)[1]

My question is:

How do I translate the last part: ‘[1]’ to a katalon cssSelector?

I have tried:
#discretionaryPopupButton[1]
(#discretionaryPopupButton)[1]
#discretionaryPopupButton(1)
(#discretionaryPopupButton)(1)
#discretionaryPopupButton:nth-of-type(2)

1 Like
2

Perhaps you want :

1 Like
3

Hi Kazurayam,
I’m feeling really stupid right now but I can’t seem to get my head around this selector…

What I tried:

// these are the 3 elements using the same ID:

document.querySelectorAll('#discretionaryPopupButton ')
  NodeList(3) [button#discretionaryPopupButton.btn.btn-default.k-button, 
  button#discretionaryPopupButton.btn.btn-default.k-button, 
  button#discretionaryPopupButton.btn.btn-default.k-button]
    0:button#discretionaryPopupButton.btn.btn-default.k-button
    1:button#discretionaryPopupButton.btn.btn-default.k-button
    2:button#discretionaryPopupButton.btn.btn-default.k-button
      length: 3
    [[Prototype]]: NodeList

When I try to apply the nth-child selector I do not get the output I expected:

document.querySelector('#discretionaryPopupButton :nth-child(1)')
null

document.querySelector('#discretionaryPopupButton button:nth-child(1)')
null

Thats is when I realised I should use the container:

document.querySelector('#discretionaryPopupButtonContainer :nth-child(1)')
<button type="button" id="discretionaryPopupButton" class="btn btn-default k-button" data-bind="text: buttonText, click: openPopup, visible: useButton">Dossiergegevens aanpassen</button>

OR with the extra ‘button’ tag:

document.querySelector('#discretionaryPopupButtonContainer button:nth-child(1)')
<button type="button" id="discretionaryPopupButton" class="btn btn-default k-button" data-bind="text: buttonText, click: openPopup, visible: useButton">Dossiergegevens aanpassen</button>

→ Now I can select the 1st element (of the 3 elements with the same ID)
Next step is to select the 2nd element, so I tried:

document.querySelector('#discretionaryPopupButtonContainer  :nth-child(2)')
<a id="discretionaryPopupLink" data-bind="text: buttonText, click: openPopup, invisible: useButton" style="display: none;">Dossiergegevens aanpassen</a>

_____


document.querySelector('#discretionaryPopupButtonContainer  button:nth-child(2)')
null

No matter what I try I either get the wrong element or I am unable to select the second button.
Could you please point me in the right direction?

4

Hello @alexander.boterberg, this posting by @Russ_Thomas may help you as well: [How To] Groovy(JavaScript(CSS)) - Using CSS Selectors In JavaScript In Groovy In Test Cases. Pay special attention to the reference hyper-links at the bottom of the page for more details/information.

Example for using Chrome’s ‘Copy selector’ to find the CSS selector.

Open: https://katalon-demo-cura.herokuapp.com
Click 'Make Appointment' button.
Login with John Doe/ThisIsNotAPassword.
Right-click on the 'Facility' dropdown.
Click 'Inspect'.
Right-click on the 'Facility' dropdown.
Click 'Inspect'.
Click the right caret symbol for the <select id="combo_facility" name="facility" class="form-control">.
Click on one of the options.
Right-click > Copy > Copy selector.
Press "Control + F".
Paste the copied selector, e.g., #combo_facility > option:nth-child(1) into the search field.
Press <Enter> key, option 1 is selected.
Change #combo_facility > option:nth-child(2)
Press <Enter> key, option 2 is selected.
Change #combo_facility > option:nth-child(3)
Press <Enter> key, option 3 is selected.

image
image1279×833 319 KB

5

We need to see the HTML source code of your target web page.
We need to examine any of your trails for CSS selectors on a browser while having the page opened in a browser.
Without having the page in hand, we can not see anything about your trials for CSS selectors.

Is the web page public to the Internet? If so, please share it.
If not, please save the page as a MIME HTML as this and share it.

6

Which is a completely illegal/broken document.

If document.querySelectorAll(id-selector).length is >= 2, you should fail the test immediately and report that situation as a bug. No ifs or buts, that page is :poop:

Regarding nth-child() …

This JavaScript will target the second <a> element in the category list at the top of your post:

document.querySelector(".topic-category.ember-view a:nth-child(2)")

image
image715×429 25.1 KB

image

I don’t know what your issue is with using nth-child on that page. However, I do know that page is broken. Why does this matter? Any test case that runs against that page and happens to pass the test, is completely meaningless.

/End

1 Like