Change the way we load the page for LCP

[Miraeld]

Is your feature request related to a problem? Please describe.

It's not related to a problem, but more like an enhancement.
Right now, in the LCP tests, we are loading the page, and wait for 2 seconds before closing it (here).
I was thinking, as we implemented this for the SaaS to know when the script has finished to run if we could re-use it for the e2e.
As it adds an attribute to an element for the SaaS to detect the end of the script, we could re-use it to detect it on the e2e process as well.

Describe the solution you'd like

Detect the attributes the same way the SaaS does so we can avoid waiting for a period of time which could be not enough OR too long compare to the real time needed for the script to run.

Describe alternatives you've considered

Additional context

[Miraeld]

Scope a solution
To implement this feature, we must change one line:

wp-rocket-e2e/src/support/steps/lcp-beacon-script.ts

Line 56 in 64648aa

await this.page.waitForTimeout(2000);

to become:

await this.page.waitForFunction(
      'document.querySelector(\'[data-name="wpr-lcp-beacon"]\').getAttribute(\'beacon-completed\') === \'true\''
);

Development steps:

Effort estimation: XS

[jeawhanlee]

Instead of wrapping in a string we can define this in a arrow function to make the code better and easier to understand:
Maybe something like this:

await this.page.waitForFunction(() => {
    const beacon = document.querySelector('[data-name="wpr-lcp-beacon"]');
    return beacon && beacon.getAttribute('beacon-completed') === 'true';
});

Aside that LGTM.