CODEWITHSUNDEEP
javascriptnode.jsxpathpuppeteer
Andrea D_
Andrea D_

Reputation: 2141

Using Xpath how to select multiple parent classes of an element that has a specific innerText?

Using Puppeteer I need to select the hour and the minutes to schedule a post from a widget The HTML code of the widget is this:

 <div class="vdatetime-time-picker">
    <div class="vdatetime-time-picker__list vdatetime-time-picker__list--hours">
      <div class="vdatetime-time-picker__item vdatetime-time-picker__item--selected">00</div>
      <div class="vdatetime-time-picker__item">01</div>
      <div class="vdatetime-time-picker__item">02</div>
      <div class="vdatetime-time-picker__item">03</div>
      <div class="vdatetime-time-picker__item">04</div>
      <div class="vdatetime-time-picker__item">05</div>
      <div class="vdatetime-time-picker__item">06</div>
      <div class="vdatetime-time-picker__item">07</div>
      <div class="vdatetime-time-picker__item">08</div>
      <div class="vdatetime-time-picker__item">09</div>
      <div class="vdatetime-time-picker__item">10</div>
      <div class="vdatetime-time-picker__item">11</div>
      <div class="vdatetime-time-picker__item">12</div>
      <div class="vdatetime-time-picker__item">13</div>
      <div class="vdatetime-time-picker__item">14</div>
      <div class="vdatetime-time-picker__item">15</div>
      <div class="vdatetime-time-picker__item">16</div>
      <div class="vdatetime-time-picker__item">17</div>
      <div class="vdatetime-time-picker__item">18</div>
      <div class="vdatetime-time-picker__item">19</div>
      <div class="vdatetime-time-picker__item">20</div>
      <div class="vdatetime-time-picker__item">21</div>
      <div class="vdatetime-time-picker__item">22</div>
      <div class="vdatetime-time-picker__item">23</div>
    </div>
    <div class="vdatetime-time-picker__list vdatetime-time-picker__list--minutes">
      <div class="vdatetime-time-picker__item">00</div>
      <div class="vdatetime-time-picker__item">05</div>
      <div class="vdatetime-time-picker__item">10</div>
      <div class="vdatetime-time-picker__item">15</div>
      <div class="vdatetime-time-picker__item">20</div>
      <div class="vdatetime-time-picker__item">25</div>
      <div class="vdatetime-time-picker__item">30</div>
      <div class="vdatetime-time-picker__item">35</div>
      <div class="vdatetime-time-picker__item vdatetime-time-picker__item--selected">40</div>
      <div class="vdatetime-time-picker__item">45</div>
      <div class="vdatetime-time-picker__item">50</div>
      <div class="vdatetime-time-picker__item">55</div>
    </div>
  </div>

Let's say I need to select 15:15. I know with Xpath I can select the inner text with

const xpathHour = "//div[text()='15']";

the problem is that when selecting the minutes, being a multiple of 5, it would select the hour (again) because is the first element Puppeteer would find with the text of 15. Their parent elements are different so how can I get in Xpath the same result as this one?

document.querySelector('.vdatetime-time-picker__list--hours .vdatetime-time-picker__item').innerText === "15"

Upvotes: 0

Views: 231

Answers (1)

pavelsaman
pavelsaman

Reputation: 8322

You're probably looking for:

const xpathMinute = "(//div[text()='15'])[2]";

That is the second div with "15" text.

() are important, because [] operator has higher precedence.

Upvotes: 1

Related Questions