量角器似乎不适用于异步页面

Question

I have a HTML page which is fill in a asynchronous way in javascript. I create an integration test with protractor but when the test begin, I can't have access to element of the DOM of the page

At the beginning of the protractor test i need to have access of one element of the DOM to check if it is filled correctly. No Way. I cannot have access to this element.

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

Expect : I Need the DOM element 'asyncContentId'

Unfortunatelly I never have access to this DOM element.

I Use Jasmine 2.1 This is my last version ans it doesn't work : it("Test Ajax applicatif", 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

Note: The following is an async / await example of how you could wait for an element to be present. If you are not using async / await, I insist that you do since the control flow has been deprecated by selenium-webdriver for a while.

Side note: ExpectedConditions might require Angular synchronization and I can't remember if it did or not.

In the following example, you could write your own function to check if the element exists.

// 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.');