How do I select this input according to this span's value?

user_800123 0
Viewed 150

I have this <span>What's your name?</span> where I'd like to select the input[@placeholder='Insira sua resposta'] (see below HTML) but I don't know how get from the span to there. I couldn't back from span to the top shared parent of the span and the input. I've tried: //div[@class="office-form-question-content office-form-theme-focus-border"]/*/span[.="What\'s your name?"]' but return null. I tried back from span to top div by //span[.="What\'s your name?"]/../*/div[@class="office-form-question-content office-form-theme-focus-border"]' doesn't work either. How can I do that?

The HTML:

<div class="office-form-question-content office-form-theme-focus-border">
  <div aria-live="assertive" role="alert"></div>
  <div class="question-title-box">
    <div>
      <div aria-level="2" class="office-form-question-title" id="question1-title" role="heading"><span class="ordinal-number">1.</span><span>What's your name?</span><span class="required-star"></span>
        <div><span class="accessibility-reader-no-display" id="question1-required">Requer resposta</span></div>
        <div><span class="accessibility-reader-no-display" id="question1-questiontype">Texto de linha única</span></div>
      </div>
    </div>
  </div>
  <div class="office-form-question-element">
    <div class="student-feedback-view-short-text-field-with-correctness">
      <div>
        <div class="office-form-textfield"><input class="office-form-question-textbox office-form-textfield-input form-control border-no-radius" aria-labelledby="question1-title question1-required question1-questiontype" placeholder="Insira sua resposta" spellcheck="true" maxlength="4000"
            value=""></div>
      </div>
    </div>
  </div>
</div>
xpath html javascript
1 Answers

There may very well be a faster, easier way of doing this, but I learned XPath in the bad old 1.0 days, so that's what I know. In the XPath below I'm getting the span with the content, using the ancestor axis to go up to the containing div, then descending back to the input. The document.evaluate and iterateNext is just to demonstrate it working.

var input = document.evaluate(`//span[text() = "What's your name?"]/ancestor::div[@class="office-form-question-content office-form-theme-focus-border"]//input[@class="office-form-question-textbox office-form-textfield-input form-control border-no-radius"]`, document, null, XPathResult.ANY_TYPE, null );
console.log(input.iterateNext());
<div class="office-form-question-content office-form-theme-focus-border">
  <div aria-live="assertive" role="alert"></div>
  <div class="question-title-box">
    <div>
      <div aria-level="2" class="office-form-question-title" id="question1-title" role="heading">
        <span class="ordinal-number">1.</span>
        <span>What's your name?</span>
        <span class="required-star"></span>
        <div><span class="accessibility-reader-no-display" id="question1-required">Requer resposta</span></div>
        <div><span class="accessibility-reader-no-display" id="question1-questiontype">Texto de linha única</span></div>
      </div>
    </div>
  </div>
  <div class="office-form-question-element">
    <div class="student-feedback-view-short-text-field-with-correctness">
      <div>
        <div class="office-form-textfield">
          <input class="office-form-question-textbox office-form-textfield-input form-control border-no-radius" aria-labelledby="question1-title question1-required question1-questiontype" placeholder="Insira sua resposta" spellcheck="true" maxlength="4000"
            value="">
        </div>
      </div>
    </div>
  </div>
</div>

user_2155520
Related