Home/ Questions/Q 9133933
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T08:34:27+00:00

I got a big XML. A snippet of that XML look like this: <div

  • 0

I got a big XML. A snippet of that XML look like this:

<div class="x-column-inner" id="ext-gen422" style="width: 850px;">
 <div id="ext-comp-1206" style="width: 14px;" class=" x-column">
  <div tabindex="-1" class="x-form-item  x-hide-label" id="ext-gen434">
   <label class="x-form-item-label" style="width:100px;" for="ext-comp-1180" id="ext-gen435"></label>
  <div style="padding-left:105px" id="x-form-el-ext-comp-1180" class="x-form-element">
   <div class="x-form-check-wrap" id="ext-gen436" style="width: 14px; height: 28px;">
    <input type="checkbox" name="ext-comp-1180" id="ext-comp-1180" autocomplete="off" class=" x-form-checkbox x-form-field">
     <label class="x-form-cb-label" for="ext-comp-1180" id="ext-gen437">&nbsp;</label>
    </div></div>  <div class="x-form-clear-left">
    </div>
   </div>
  </div>
 <div id="ext-comp-1207" style="width: 150px;" class=" x-column">
  <label id="ext-comp-1203" style="width: 140px;">Add to Watchlist</label>
</div>
<div id="ext-comp-1208" style="width: 107px;" class=" x-column">

I need to find ‘input’ node of checkbox type based on label node having text ‘Add to Watchlist’.

As both ‘input’ and ‘label’ node lies in different hierarchy, // syntax doesn’t seem to work:

//div[label[contains(text(),'Add to Watchlist')]]

will just give parent div of child label.
I tried to start from the topmost node of this snippet 

$x("//div[@class='x-column-inner' and //label[contains(text(),'Add to Watchlist')]]")

but that is giving 6 possible matches.

Note: @id attribute can’t be used as this is getting assigned dynamically to nodes so next time page loads @id will be different.
I don’t want to use position() predicate as that makes XPATH static and xpath may break with any change in position.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could try something like this, but it looks very greedy… Basically what it does is searching in every axes of the input tags to see if there is an associated label tag. So for each input it searches in its ancestors, descendants and siblings.
    There are certainly some smarter solutions.

    //input[@type = 'checkbox' and (@id = ancestor::label/@for or @id = descendant::label/@for or @id = following::label/@for or @id = preceding::label/@for)]

    However your snippet is not interesting no input tag will be matched, please consider providing a better snippet. It would improve the answers accuracy.

    Edit : Here is a (non-tested) way to add the ‘Add to Watchlist’ constraint.

    //input[@type = 'checkbox' and (@id = ancestor::label[. = 'Add to Watchlist']/@for or @id = descendant::label[. = 'Add to Watchlist']/@for or @id = following::label[. = 'Add to Watchlist']/@for or @id = preceding::label[. = 'Add to Watchlist']/@for)]

    But once again, those xpath requests are very greedy and your are not guaranteed to match every input element associated to a label for example the following input won’t be match in this snippet:

    <div>
  <div>
    <label for="id">Add to Watchlist</label>
  </div>
  <div>
    <input type="checkbox" id="id" />
  </div>
<div>

    There may be more efficient solutions in one xpath request, but you should consider doing several request.
    For example, one request to find every for attribute value of the label elements with the text ‘Add to Watchlist’ and then doing another request to find the associated input elements.
    I should also try to restrict your request to the scope a the underlying form element. Perhaps I will edit with a better request if I find the time.

    Edit 2
    Here is a working and smarter request

    //form//input[@type = 'checkbox' and @id = ancestor::form[1]//label[. = 'Add to Watchlist']/@for]

    You can confront it to this snippet

    <html>
  <form>
    <label for="bar">Add to Watchlist</label>
    <div>
      <div>
        <label for="id">Add to Watchlist</label>
      </div>
      <div>
        <input type="checkbox" id="id" />
        <input type="checkbox" id="foo" />
        <input type="checkbox" id="bar" />
        <input type="checkbox" />
        <input type="checkbox" id="" />
      </div>
    </div>
  </form>
  <label for="foo">Add to Watchlist</label>
</html>

    Bust the most important is that you understand how it works and why it is better. Please take the time to think about it.

    • 0