add DOM elements for sync with puppeteer browser automation - #minor

[mki-c2c]

Experimentation with headless chrome printing via puppeteer has brought the need to detect the end of rendering.

The webviewer acan 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]

web-mapviewer    Run #3611

Run Properties:   Passed #3611  •  7a71502ad3: touch file to force CI redeployment

Project	web-mapviewer
Run status	Passed #3611
Run duration	04m 59s
Commit	7a71502ad3: touch file to force CI redeployment
Committer	Moritz Kirmse
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	21
Skipped	0
Passing	210