javascript - Protractor 似乎不适用于异步页面

Question

我有一个 HTML 页面，它是用 javascript 异步方式填充的。我使用 Protractor 创建了一个集成测试，但是当测试开始时，我无法访问页面 DOM 的元素

在 Protractor 测试开始时，我需要访问 DOM 的一个元素来检查它是否被正确填充。决不。我无法访问此元素。

var EC = protractor.ExpectedConditions;
condition = EC.presenceOf($('[id=asyncContentId]'));
browser.wait(condition, 5000, "asyncContentId not ready");

预期:我需要 DOM 元素“asyncContentId”

不幸的是我永远无法访问这个 DOM 元素。

我使用 Jasmine 2.1 这是我的最后一个版本，它不起作用: it("测试 Ajax 应用程序", function(done) {

      console.log("Tests Ajax");
      var EC = protractor.ExpectedConditions;
      element(by.id('btnMenu')).isDisplayed().then(function(displayed) { if (displayed) { browser.wait(EC.elementToBeClickable($('[id=btnMenu]')), 8000); element(by.id('btnMenu')).click(); } });
      browser.wait(EC.elementToBeClickable($('[id=Configuration]')), 8000);
      element(by.id('Ajax')).click().then( function(result) {
          browser.wait(protractor.until.elementLocated(by.id('asyncContentId')), 8000, "Element asyncContentId Non trouvé");
    }, function( error ) {
        console.log("error");
        // eslint-disable-next-line dot-notation
    }).finally(done);

}); });

Answer 1

注意:以下是一个异步/等待示例，说明如何等待元素出现。如果您不使用 async/await，我坚持您这样做，因为控制流已被 selenium-webdriver 弃用一段时间了。

旁注: ExpectedConditions 可能需要 Angular 同步，但我不记得是否需要同步。

在下面的示例中，您可以编写自己的函数来检查该元素是否存在。

// Turn off sychronization if we are not on an Angular page.
await browser.waitForAngularEnabled(false);

// Wait for the element to be present. This might throw an error when trying
// to find an element, in that case, return false and keep polling for the element
await browser.wait(async () => {
  try {
    return element(by.css('[id="asyncContentId"]')).isPresent();
  } catch (err) {
    // catch the thrown error when webdriver does not find the element
    // and return false so we can still continue to poll.
    return false;
  }
}, 5000, 'asyncContentId is not present.');