Selenium-webdriver JS - 要素が表示されるまでの待機方法

Question

selenium-webdriver（api docs here）を使用すると、要素が表示されるまでどのように待つことができますか？

私は以下の機能を持っていますが、自家製のテストヘルパーの一部ですが、最初のものは機能しますが、2番目のものは失敗します（例えば、ページhtml/css/jsのすべての想像できるテストと点検によって確認されているように、動作する最初の機能によって確認されます。

ここで彼らは、次のとおりです。

/** 
* Wait for an element to exist 
* 
* @param {object} locator 
* @param {int} timeout (ms) 
* 
* @return {Promise<element>} 
*/ 
// !! THIS WORKS OK 
exports.waitForElement = function (locator, timeout) { 
    var waitTimeout = timeout || DEFAULT_TIMEOUT; 

    return this.wait(until.elementLocated(locator), waitTimeout) 
    .then(() => { 

     return this.findElement(locator); 
     }); 
}; 


/** 
* Wait for an element to exist and then wait for it to be visible 
* 
* IMPORTANT: this is probable what you want to use instead of 
* waitForVisibleElement most of the time. 
* 
* @param {hash} locator 
* @param {number} timeout 
* 
* @return {Promise<element>} 
*/ 
// !! THIS FAILS TO WORK AS EXPECTED 
exports.waitForVisibleElement = function (locator, timeout) { 
    var waitTimeout = timeout || DEFAULT_TIMEOUT; 

    return this.waitForElement(locator, waitTimeout) 
    .then(el => { 
     console.log('--- element found:', el); 
     return this.wait(until.elementIsVisible(el), waitTimeout) 

     .then(() => { 
      console.log('--- element visible!'); 
      // this is to make sure we are returning the same kind of 
      // promise as waitForElement 
      return this.findElement(locator); 
     }); 

    }); 
}; 

...私は複数のコンテキストでテストし、それがその後、waitForVisibleElement内部コードの問題の他の原因ませんが、私はなぜそれのために何らかの理由を見つけるように見えることはできません動作しません！明確化として

---

、そのコードのthisはaugment方法が与えられたwebdriverを対象...おそらく疑問デザインパターンが、私のためにありません原因をmonkeypatches後webdriverをインスタンス（new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build()の結果）されて終わりますここでの問題:)

---

UPDATE：はどうやらこれが唯一それが今どんなより理にかなっていないことを... { xpath: '//*[contains(text(), "first name")]' }のように、XPathのロケータのために起こります。また、それはFirefoxのために同じです、それは奇妙なクロム - webdriverのthingyではありません...

Answer 1

これはおそらく約束の問題です。 代わりにこれを試してみてください：

exports.waitForElement = function (locator, timeout) { 
    var timeout = timeout || DEFAULT_TIMEOUT; 
    return this.wait(until.elementLocated(locator), timeout); 
}; 

exports.waitForVisibleElement = function (locator, timeout) { 
    var timeout = timeout || DEFAULT_TIMEOUT; 
    var element = this.wait(until.elementLocated(locator), timeout); 
    return this.wait(new until.WebElementCondition('for element to be visible ' + locator, function() { 
    return element.isDisplayed().then(v => v ? element : null); 
    }), timeout); 
}; 

使用法：

driver.get("..."); 

driver.waitForElement(By.id("..."), 2000).getText().then(function(text){ 
    console.log(text); 
}); 

driver.waitForVisibleElement(By.id("..."), 2000).getText().then(function(text){ 
    console.log(text); 
});