Click an element if another element contains a specific text. Automated Test with Protractor

Question

I need to check which one of 3 elements contains the text "10%" but I am not sure I am getting correctly the text of the element. When I run the code I am not getting errors but the if condition is always false(also when it should be true).

My javascript code inside the spec:

await driver.wait(until.elementIsVisible(await driver.findElement(By.css("tr:nth-child(1) .font-weight-bold-light > span"))), 30000)
await driver.wait(until.elementIsVisible(await driver.findElement(By.css("tr:nth-child(2) .font-weight-bold-light > span"))), 30000)
await driver.wait(until.elementIsVisible(await driver.findElement(By.css("tr:nth-child(3) .font-weight-bold-light > span"))), 30000)

var array = ["tr:nth-child(1) .font-weight-bold-light > span", "tr:nth-child(2) .font-weight-bold-light > span", "tr:nth-child(2) .font-weight-bold-light > span"];
var arrayDelete = ["tr:nth-child(1) img:nth-child(2)", "tr:nth-child(2) img:nth-child(2)", "tr:nth-child(3) img:nth-child(2)"]
for (var k = 0; k<array.length; k++){

  var allOpts = (await driver.findElement(By.css(array[k])));
  await driver.sleep(2000)

  if (allOpts == ('10%')) {
    await driver.sleep(2000)
    await driver.wait(until.elementIsVisible(await driver.findElement(By.css(arrayDelete[k]))), 30000)
    // 11 | click | css=.actions > img:nth-child(2) | 
    await driver.findElement(By.css((arrayDelete[k]))).click()
    // 12 | pause | 1000 | 
    await driver.sleep(5000)
    // 13 | waitForElementVisible | css=.ml-3 | 30000
    await driver.wait(until.elementIsVisible(await driver.findElement(By.css(".ml-3"))), 30000)
    // 14 | click | css=.ml-3 | 
    await driver.findElement(By.css(".ml-3")).click()
    // 15 | pause | 3000 | 
    await driver.sleep(10000)
    // 16 | verifyElementNotPresent | css=td:nth-child(1) | 
    {
      const elements = await driver.findElements(By.css((allOpts)))
      assert(!elements.length)
    }
    console.log(('ho cancellato l obiettivo ')+ k);
  
  } else {
    console.log(('obiettivo ') + k + (' non cancellato, in quanto il suo peso non è 10%'));
  }
}

I tryed all of these:

if (allOpts == (' 10% ')) 
if (allOpts == ('10%')) 
if (allOpts === (' 10% ')) 
if (allOpts === ('10%')) 
if (allOpts.getText() == (' 10% ')) 
if (allOpts.getText()  == ('10%')) 
if (allOpts.getText()  === (' 10% ')) 
if (allOpts.getText()  === ('10%')) 
if (allOpts.getAttribute("value") == (' 10% ')) 
if (allOpts.getAttribute("value")  == ('10%')) 
if (allOpts.getAttribute("value")  === (' 10% ')) 
if (allOpts.getAttribute("value")  === ('10%'))

None of these allowed to run the body of the if condition.

Here my html:

<td _ngcontent-lqu-c20="">
  <p _ngcontent-lqu-c20="" class="font-weight-bold-light">
    <!---->
    <span _ngcontent-lqu-c20=""> 10% </span>
  </p>
</td>

Answer 1

First of, your syntax is not typical for protractor (unless you're using some very old version). if this is the tool you'r using checkout their documentation

Second, in this line you're just declaring the element and not doing anything with it

var allOpts = (await driver.findElement(By.css(array[k])));

you should have extracted element's text. But using normal syntax it would look like so

var allOpts = await element(by.css(array[k])).getText();

Three, the reason this is not working

if (allOpts.getText() == (' 10% '))

is because this is promise, which you need to resolve by .then() or by await ing it. Unless you figure out this process in depth (and I mean it... in ALL details), you won't go too far with protractor

Four, when you do .getText() your string gets trimmed, meaning there is no spaces in the beginning and at the end ( '10%' not ' 10% ' )

Five, when in doubt, just console.log() the value. It's the easiest way to debug problems

And lastly, don't use == , use === instead. For 3 years working with protractor I never had a case when I HAD to use == , but I did have many confusions created by coercion when using it

Answer 2

You missed to call getText() to read the content on the web element

var allOpts = (await driver.findElement(By.css(array[k])).getText()).trim()

Answer 3

first you need to read the text of the element ie by using getText() .