如何确保页面已在 React 站点上完成加载

Question

Is there a way to make sure that a web page, coded in React, has finished loading? The usual javascript tricks, don't seem to work for React, meaning that you cannot use safely these:

document.readyState == 'complete' && jQuery.active == 0

We are working on automated tests and because of this, we cannot have access to client side code, so we cannot or should create callbacks etc, in order to get the info we want. The easy way is to use thread sleep, but this is very unreliable, frustrating, and bad practice. Is there another way, like executing a js script that will return such information?

Answer 1

Is there a way to make sure that a web page, coded in React, has finished loading? The usual javascript tricks, don't seem to work for React, meaning that you cannot use safely these:

document.readyState == 'complete' && jQuery.active == 0

We are working on automated tests and because of this, we cannot have access to client side code, so we cannot or should create callbacks etc, in order to get the info we want. The easy way is to use thread sleep, but this is very unreliable, frustrating, and bad practice. Is there another way, like executing a js script that will return such information?

Answer 2

Is there a way to make sure that a web page, coded in React, has finished loading? The usual javascript tricks, don't seem to work for React, meaning that you cannot use safely these:

document.readyState == 'complete' && jQuery.active == 0

We are working on automated tests and because of this, we cannot have access to client side code, so we cannot or should create callbacks etc, in order to get the info we want. The easy way is to use thread sleep, but this is very unreliable, frustrating, and bad practice. Is there another way, like executing a js script that will return such information?

Answer 3

Just in case someone needs this...

The approach below is the best approach to solve your problem.

function Component() {
    const [loaded, setStatus] = useState(false);

    document.onreadystatechange = () => {
        setStatus(document.readyState === "complete");
    }
    return {loaded ? <Loaded />: <Loading />};
}