如果另一個元素包含特定文本，請單擊一個元素。 使用 Protractor 進行自動化測試

Question

我需要檢查 3 個元素中的哪一個包含文本“10%”，但我不確定我是否正確獲取了元素的文本。 當我運行代碼時，我沒有收到錯誤，但 if 條件始終為假（當它應該為真時）。

我在規范中的 javascript 代碼：

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%'));
  }
}

我嘗試了所有這些：

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%'))

這些都不允許運行 if 條件的主體。

這是我的 html：

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

Answer 1

首先，您的語法對於 protractor 不是典型的（除非您使用的是一些非常舊的版本）。 如果這是您使用的工具，請查看他們的文檔

其次，在這一行中，您只是聲明了元素，而不是對它做任何事情

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

你應該已經提取了元素的文本。 但是使用正常的語法它看起來像這樣

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

三、這個不起作用的原因

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

這是因為這是 promise，您需要通過.then()或await解決它。 除非你深入了解這個過程（我的意思是......在所有細節中），你不會 go 與 protractor 太遠

四，當您執行.getText()時，您的字符串會被修剪，這意味着開頭和結尾沒有空格（ '10%'而不是 '10% ' 10% ' ）

五、當有疑問時，只需console.log()的值。 這是調試問題的最簡單方法

最后，不要使用== ，而是使用=== 。 與 protractor 合作了 3 年，我從來沒有遇到過必須使用==的情況，但是在使用它時我確實遇到了很多由強制造成的困惑

Answer 2

您錯過了調用getText()來閱讀 web 元素上的內容

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

Answer 3

首先，您需要使用getText()讀取元素的文本。