量角器-单击div中具有特定文本跨度的按钮

Question

I have a problem with clicking a button in Protractor. Simplified code looks like that:

<div class = "container">   
  <div class = "col1">
    <span class = "hour">12:00</span>   
  </div>

  <div class="col2">
    <button class="btn">Test</button>   
  </div>
</div>

<div class = "container">   
      <div class = "col1">
        <span class = "hour">13:00</span>   
      </div>

      <div class="col2">
      <button class="btn">Test</button>   
      </div>    
</div>

I would like to click a button in div, where its span has "12:00" hour. The condition must check the hour.

I can easily check the span with

by.xpath('//span[contains(text(), "12:15")]')

My main concern is to select the button with parent div having this span. Is this possible? Thank you.

Answer 1

I had a similar condition. But I had just to extract a value from DOM and compare it with the expected result, it looks like this:

records = await targeting_page.records.getText();
        recordsNumber = parseFloat(records.replace(/,/g, ''));
        recordsRange = recordsNumber >= 100 && recordsNumber < 90000000;
        await expect(recordsRange).toEqual(true);

but your occasion is not a big difference.

that what I have written in browser console on this page of your question

    async function fin() {
    for(var i = 0; i < 100; i++) {
    var myElement = document.querySelector("code span:nth-child(27)").textContent //your find your desired element
    console.log(b)
    typeof b == 'string' ? console.log(true) : console.log(false) //this is optionally 

    var res = parseFloat(b) //parse when it will be 12:00 you will get the 12 number
    console.log(res)
    res == 13 ? await b.click() : console.log("The button is not ready yet") //and here compare is there that number you need, if yes then click element(this doesn't work in console, 
// if you use async/await in your protractor tests, there are it will work
     }    
    }

    fin()

That's what concerns directly this page. In test, it will be looking something like this(it can be much better but I drafted it very quckly):

for(let i=0; i < 100; i++) {
var myE = await myElement.getText(); //where myElement -- your selector
        var myNumber = parseFloat(myE.replace(/:/g, '')); // parse and get 12 out of "12:00"
        if (myNumber == 12) {
await myElement.click()
 } else {
  console.log("The button is not ready yet")
 }
}

Answer 2

by.xpath('//span[contains(text(), "12:15")]/ancestor::div//button[@class='btn']') Hope this answer helps you!!

0506