如何通過webdriverjs元素循環，直到元素具有文本值

Question

我想弄清楚WebDriverJs中的循環如何與承諾一起工作。

假設你有以下的html：

<div id="textelements"> 
    <span onclick="spanClicked('Rock')">Rock</span> 
    <span onclick="spanClicked('Paper')">Paper</span> 
    <span onclick="spanClicked('Scissors')">Scissors</span> 
    </div> 

使用WebDriverJs我想找到文本「剪刀」的跨度，並點擊它。

最簡單的事情就是確保源html有適當的標識符，但說不能改變，WebDriverJs代碼看起來像給上面的html什麼樣的。

我曾嘗試以下：

function clickElementWithText(driver, textValue) { 
    driver.findElements(webdriver.By.css('#textelements span')).then(function(spans) { 
     for (var i = 0; i < spans.length; i++) { 
      var matched = spans[i].getText().then(function(text) { 
       console.log('Text value is: ' + text); 
       return text === textValue; 
      }); 
      console.log(matched); 
      if (matched === true) { 
       console.log('clicking!'); 
       spans[i].click(); 
       return; 
      } 
     } 
    }); 
} 

var webdriver = require('selenium-webdriver'); 
var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build(); 
driver.get('http://webdriverjsdemo.github.io/'); 
clickElementWithText(driver, 'Scissors'); 

的問題是，匹配不等於true即使它應該已經被設置爲true，當被評價。

任何想法發生了什麼？

Answer 1

怎麼樣，我們通過使用一些功能的編程，filter() function簡化它：

var spans = driver.findElements(webdriver.By.css('#textelements span')); 
webdriver.promise.filter(spans, function(span) { 
    return span.getText().then(function(text) { 
     console.log('Text value is: ' + text); 
     return text === textValue; 
    }); 
}).then(function (filteredSpans) { 
    filteredSpans[0].click(); 
}); 

或者，「不太爽」的解決方案，而是一個更簡單的，方法是使用By.xpath：

var span = driver.findElement(webdriver.By.xpath('//*[@id = "textelements"]//span[. = "' + textValue + '"]')); 
span.click(); 

或者，我們還可以使用By.css檢查onclick屬性值：

var span = driver.findElement(webdriver.By.css('#textelements span[onclick*="' + textValue + '"]')); 
span.click();