How to make automated test scripts in protractor wait, until the page is loaded fully

问题

No, but really! I know this generic question has been asked thousands of times, but there is something more specific that looks feasible to me and thus I want to know how to achieve it

The problem

I'm testing an angular app with protractor. Inside the app I want to verify that when I click a link I'm being redirected to the right page (non-angular). The problem is that until I reach the page I'm verifying, the url changes 3 times or so (there are multiple redirections happening), so I can't make a waiting function wait until the page is loaded completely

What I tried/what won't work for me

1. I'm against browser.sleep() for more than 1000 ms!
2. browser.waitForAngular() as this is not an angular page
3. ExpectedConditions.urlIs() the url is the variable I'm asserting
4. ExpectedConditions.presenseOf() the page maybe changing so I can't rely on elements inside
5. browser.executeScript("return window.document.readyState") returns compete immediately, though the page is still loading (I was certain this is what I need, but that didn't work either)
6. I tried even adding a functions that waits for innerHtml of the whole page not change for at least 3 sec, but it fails because at times there is a pause of more than 3 sec between redirects are happening. Everything above 3 sec isn't a reasonable timeout

The question

What I noticed is when the browser is loading the page, Reload this page button changes its state to Stop loading this page (X icon) until I'm redirected to the final page (screenshots below). So the question is is there a way to make protractor point to the same condition that chrome uses to choose which icon is displayed?

vs

And if not exactly the same, but how do I make protractor hang until the page is fully loaded

Important to consider

Obviously there are a lot of dirty solutions that I can do like explicit waits. But I'm coming back to this question every once in a while, so I'm not interested in these dirty solutions that work 70% of the time for a specific cause

P.S. I figured that the button changes the icon on document.load() event. But I can't figure out what should I write in the console in order for that script to log a message when I refresh they page

回答1:

Have you tried

await browser.wait(async () =>
        await browser.driver.executeScript('return document.readyState;') === 'loading', 2000)
        .then(() => true, () => true);
await browser.wait(async () =>
        await browser.driver.executeScript('return document.readyState;') === 'complete', 5000)

回答2:

I have the following snippet for just the problem, I wait for an element to be displayed:

ElementFinder.prototype.secureIsDisplayed = function () {
return browser
.wait(EC.visibilityOf(this), actionTimeout)
.then(() => this.isDisplayed())
.catch(err => {
    throw new Error(`Expected ElementFinder ${this.locator()} to be displayed. ${err.toString()}`);
});
};

where actionTimeout is a const int and EC = protractor.ExpectedConditions you will need to import the file and call it like so:

import './asd.ts'
element(by.css('.myClass')). secureIsDisplayed()

I if you can find the last element that loads, or just get an element of a redirect it can do wonders. Cheers.

回答3:

Have you tried...

browser.executeScript("return window.jQuery.active").equals(0)

来源：https://stackoverflow.com/questions/60115462/how-to-make-automated-test-scripts-in-protractor-wait-until-the-page-is-loaded