Stabilize invoice-period responsive layout assertion (#254)

Wait for WebKit to settle responsive layout boxes before asserting tablet and mobile positioning.
This commit is contained in:
Jeppe B
2026-08-03 12:54:45 +02:00
committed by GitHub
parent f4816124c2
commit 3639527b0e
+17 -12
View File
@@ -1334,10 +1334,16 @@ async function expandTreeNode(page, key) {
async function getBoundingBox(locator, label) {
await expect(locator).toBeVisible();
const box = await locator.boundingBox();
if (!box) {
throw new Error(`${label} did not produce a bounding box`);
}
let box = null;
await expect
.poll(
async () => {
box = await locator.boundingBox();
return box !== null;
},
{ message: `${label} did not produce a bounding box` }
)
.toBe(true);
return box;
}
@@ -1490,20 +1496,19 @@ test.describe("Invoicing period tab", () => {
await expect(page.getByTestId("invoicing-period-customer-4002")).toBeVisible();
await page.setViewportSize({ width: 820, height: 1180 });
const tabletDetailBox = await page.getByTestId("invoicing-period-review-detail").boundingBox();
const tabletQueueBox = await page.locator(".period-review-queue").boundingBox();
expect(tabletDetailBox).not.toBeNull();
expect(tabletQueueBox).not.toBeNull();
const tabletDetailBox = await getBoundingBox(
page.getByTestId("invoicing-period-review-detail"),
"tablet review detail"
);
const tabletQueueBox = await getBoundingBox(page.locator(".period-review-queue"), "tablet review queue");
expect(tabletDetailBox.y).toBeLessThan(tabletQueueBox.y);
await expect
.poll(() => page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth))
.toBe(true);
await page.setViewportSize({ width: 390, height: 844 });
const detailBox = await page.getByTestId("invoicing-period-review-detail").boundingBox();
const queueBox = await page.locator(".period-review-queue").boundingBox();
expect(detailBox).not.toBeNull();
expect(queueBox).not.toBeNull();
const detailBox = await getBoundingBox(page.getByTestId("invoicing-period-review-detail"), "mobile review detail");
const queueBox = await getBoundingBox(page.locator(".period-review-queue"), "mobile review queue");
expect(detailBox.y).toBeLessThan(queueBox.y);
await expect
.poll(() => page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth))