Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

test: update animation click test (#1053)

Browse source
This commit is contained in:
Dmitry Gozman 2020-02-18 14:30:56 -08:00 committed by GitHub
parent 1ee657823e
commit 1805acd5d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
test/click.spec.js
View file

@ -403,35 +403,51 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROMI
await page.click('button'); await page.click('button');
expect(await page.evaluate('window.clicked')).toBe(true); expect(await page.evaluate('window.clicked')).toBe(true);
}); });
xit('should click on an animated button', async({page}) => { xit('should fail to click a button animated via CSS animations and setInterval', async({page}) => {
const buttonSize = 50; // This test has a setInterval that consistently animates a button.
// It checks that we detect the button to be continuously animating, and never try to click it.
// This test exposes two issues:
// - Chromium headless does not issue rafs between first and second animateLeft() calls.
// - Chromium and WebKit keep element bounds the same when for 2 frames when changing left to a new value.
const buttonSize = 10;
const containerWidth = 500; const containerWidth = 500;
const transition = 500; const transition = 100;
await page.setContent(` await page.setContent(`
<html> <html>
<body> <body>
<div style="border: 1px solid black; height: 50px; overflow: auto; width: ${containerWidth}px;"> <div style="border: 1px solid black; height: 50px; overflow: auto; width: ${containerWidth}px;">
<button id="button" style="height: ${buttonSize}px; width: ${buttonSize}px; transition: left ${transition}ms linear 0s; left: 0; position: relative" onClick="window.clicked++">hi</button> <button style="border: none; height: ${buttonSize}px; width: ${buttonSize}px; transition: left ${transition}ms linear 0s; left: 0; position: relative" onClick="window.clicked++"></button>
</div> </div>
</body> </body>
<script> <script>
const animateLeft = () => { window.atLeft = true;
const button = document.querySelector('#button'); const animateLeft = () => {
document.querySelector('#button').style.left = button.style.left === '0px' ? '${containerWidth - buttonSize}px' : '0px'; const button = document.querySelector('button');
}; button.style.left = window.atLeft ? '${containerWidth - buttonSize}px' : '0px';
window.clicked = 0; console.log('set ' + button.style.left);
window.setTimeout(animateLeft, 0); window.atLeft = !window.atLeft;
window.setInterval(animateLeft, ${transition}); };
</script> window.clicked = 0;
</html> const dump = () => {
const button = document.querySelector('button');
const clientRect = button.getBoundingClientRect();
const rect = { x: clientRect.top, y: clientRect.left, width: clientRect.width, height: clientRect.height };
requestAnimationFrame(dump);
};
dump();
</script>
</html>
`); `);
await page.click('button'); await page.evaluate(transition => {
expect(await page.evaluate('window.clicked')).toBe(1); window.setInterval(animateLeft, transition);
expect(await page.evaluate('document.querySelector("#button").style.left')).toBe(`${containerWidth - buttonSize}px`); animateLeft();
await new Promise(resolve => setTimeout(resolve, 500)); }, transition);
await page.click('button'); const error1 = await page.click('button', { timeout: 250 }).catch(e => e);
expect(await page.evaluate('window.clicked')).toBe(2); expect(await page.evaluate('window.clicked')).toBe(0);
expect(await page.evaluate('document.querySelector("#button").style.left')).toBe('0px'); expect(error1.message).toContain('timeout 250ms exceeded');
const error2 = await page.click('button', { timeout: 250 }).catch(e => e);
expect(await page.evaluate('window.clicked')).toBe(0);
expect(error2.message).toContain('timeout 250ms exceeded');
}); });
}); });