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>

thanks, I had to think at this before... Anyway by the console.log I saw I was not getting the text, but something else. — Nicola, Jul 24 '20 at 11:21

Sergey Pleshakov · Answer 1 · 2020-07-23T21:00:38.687

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 awaiting 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

edited Jul 23 '20 at 21:00

answered Jul 23 '20 at 19:18

Sergey Pleshakov

7,964
2
17
40

I tryed with var allOpts = await element(by.css(array[k])).getText(); but I am getting this error: Failed: Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined. This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping. See http://git.io/v4gXM for details" – Nicola Jul 23 '20 at 23:28
Okay I see why you are using this syntax. your app is not angular. `browser.waitForAngularEnabled(false)` would solve the problem... – Sergey Pleshakov Jul 24 '20 at 12:39
False, my app is Angular, if I add your command (I already tried) I get error element not found by css selector. I have solved just modifiing this: var allOpts = (await driver.findElement(By.css(array[k])).getText()).trim() – Nicola Jul 24 '20 at 12:53

score 1 · Accepted Answer · answered Jul 24 '20 at 01:40

1

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

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

answered Jul 24 '20 at 01:40

yong

13,357
1
16
27

score 0 · Answer 3 · answered Jul 27 '20 at 02:29

0

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

answered Jul 27 '20 at 02:29

Analyst

751
6
15

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

3 Answers3

Linked