Introduce a getRect utility function for the integration tests

Over time the number of integration tests that get the rectangle for a
given selector has increased quite a bit, and the code to do so has
consequently become duplicated.

This commit refactors the integration tests to move the rectangle
fetching code to a single place, which reduces the code by over 400
lines and makes the individual tests simpler.
This commit is contained in:
Tim van der Meij 2024-05-23 17:53:58 +02:00
parent 0c562f0a98
commit 145d66090f
No known key found for this signature in database
GPG key ID: 8C3FD2925A5F2762
6 changed files with 136 additions and 467 deletions

View file

@ -124,6 +124,15 @@ function getSelector(id) {
return `[data-element-id="${id}"]`;
}
async function getRect(page, selector) {
// In Chrome something is wrong when serializing a `DomRect`,
// so we extract the values and return them ourselves.
return page.$eval(selector, el => {
const { x, y, width, height } = el.getBoundingClientRect();
return { x, y, width, height };
});
}
function getQuerySelector(id) {
return `document.querySelector('${getSelector(id)}')`;
}
@ -427,10 +436,7 @@ async function firstPageOnTop(page) {
}
async function hover(page, selector) {
const rect = await page.$eval(selector, el => {
const { x, y, width, height } = el.getBoundingClientRect();
return { x, y, width, height };
});
const rect = await getRect(page, selector);
await page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2);
}
@ -589,6 +595,7 @@ export {
getEditorSelector,
getFirstSerialized,
getQuerySelector,
getRect,
getSelectedEditors,
getSelector,
getSerialized,