fix: request an animation frame to fix flaky clickablePoint test (#7587)

Sometimes an element has not been layed out yet and, in this case,
clickablePoint fails because backend cannot compute content quads.

Co-authored-by: Jan Scheffler <janscheffler@chromium.org>
This commit is contained in:
Alex Rudenko 2021-09-22 12:48:24 +02:00 committed by GitHub
parent df36a618f7
commit 7341d9fadd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -309,7 +309,9 @@ describe('JSHandle', function () {
<div style="cursor: pointer; width: 120px; height: 60px; margin: 30px; padding: 15px;"></div> <div style="cursor: pointer; width: 120px; height: 60px; margin: 30px; padding: 15px;"></div>
`; `;
}); });
await page.evaluate(async () => {
return new Promise((resolve) => window.requestAnimationFrame(resolve));
});
const divHandle = await page.$('div'); const divHandle = await page.$('div');
expect(await divHandle.clickablePoint()).toEqual({ expect(await divHandle.clickablePoint()).toEqual({
x: 45 + 60, // margin + middle point offset x: 45 + 60, // margin + middle point offset
@ -335,6 +337,9 @@ describe('JSHandle', function () {
<iframe style="border: none; margin: 0; padding: 0;" seamless sandbox srcdoc="<style>* { margin: 0; padding: 0;}</style><div style='cursor: pointer; width: 120px; height: 60px; margin: 30px; padding: 15px;' />"></iframe> <iframe style="border: none; margin: 0; padding: 0;" seamless sandbox srcdoc="<style>* { margin: 0; padding: 0;}</style><div style='cursor: pointer; width: 120px; height: 60px; margin: 30px; padding: 15px;' />"></iframe>
`; `;
}); });
await page.evaluate(async () => {
return new Promise((resolve) => window.requestAnimationFrame(resolve));
});
const frame = page.frames()[1]; const frame = page.frames()[1];
const divHandle = await frame.$('div'); const divHandle = await frame.$('div');
expect(await divHandle.clickablePoint()).toEqual({ expect(await divHandle.clickablePoint()).toEqual({