add DOM elements for sync with puppeteer browser automation

[mki-c2c]

Experimentation with headless chrome printing via puppeteer has brought the need to detect the end of rendering in both raster layers (OL) and vector tile layers (maplibre)

The webviewer can be opened in an automated browser window (headless) via puppeteer:

const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: {width, height, deviceScaleFactor},
    executablePath: '/usr/bin/google-chrome',
    args: [
        "--no-sandbox",
    ]
});
const page = await browser.newPage();
await page.goto(webviewer_url);

Puppeteer can monitor the DOM and wait until the sync elements appear in the document:

await page.waitForFunction(
    "document.getElementById('maplibre_complete') && document.getElementById('openlayer_complete')",
    {timeout: 10000}
).catch(()=>console.log('timeout after 10s, the web page has not finished rendering'))

Test link

[cypress]

---

Test summary

0 • 129 • 19 • 35

---

Run details

Project	web-mapviewer
Status	Failed
Commit	7df88a4
Started	Aug 20, 2024 4:05 PM
Ended	Aug 20, 2024 4:38 PM
Duration	32:58 💡
OS	Linux Ubuntu -
Browser	Electron 118

View run in Cypress Cloud ➡️

---

Failures

	tests/cypress/tests-e2e/drawing.cy.js		10
1	Drawing module tests > Drawing mode/tools > can create marker/icons and edit them
2	Drawing module tests > KML management > deletes the drawing when confirming the delete modal
3	Drawing module tests > KML management > manages the KML layer in the layer list / URL params correctly
4	Drawing module tests > KML management > keeps the KML after a page reload, and creates a copy if it is then edited
5	Drawing module tests > KML management > manages the KML layer correctly if it comes attached with an adminId at startup
6	Drawing module tests > KML management > manages the KML layer correctly if it comes attached with an adminId at startup from a legacy URL
7	Drawing module tests > others > doesn't save an empty drawing (if not modified)
8	Drawing module tests > others > can export the drawing/profile in multiple formats
9	Drawing module tests > others > generates short links when sharing a drawing
10	Drawing module tests > others > shows a profile of a line/measure coming from service-alti data
This comment includes only the first 10 test failures. See all 129 failures in the Cypress Cloud.

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Cloud