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');
expect(await page.evaluate('window.clicked')).toBe(true);
});
xit('should click on an animated button', async({page}) => {
const buttonSize = 50;
xit('should fail to click a button animated via CSS animations and setInterval', async({page}) => {
// 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 transition = 500;
const transition = 100;
await page.setContent(`
<html>
<body>
<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>
</div>
</body>
<script>
const animateLeft = () => {
const button = document.querySelector('#button');
document.querySelector('#button').style.left = button.style.left === '0px' ? '${containerWidth - buttonSize}px' : '0px';
};
window.clicked = 0;
window.setTimeout(animateLeft, 0);
window.setInterval(animateLeft, ${transition});
</script>
</html>
<html>
<body>
<div style="border: 1px solid black; height: 50px; overflow: auto; width: ${containerWidth}px;">
<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>
</body>
<script>
window.atLeft = true;
const animateLeft = () => {
const button = document.querySelector('button');
button.style.left = window.atLeft ? '${containerWidth - buttonSize}px' : '0px';
console.log('set ' + button.style.left);
window.atLeft = !window.atLeft;
};
window.clicked = 0;
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');
expect(await page.evaluate('window.clicked')).toBe(1);
expect(await page.evaluate('document.querySelector("#button").style.left')).toBe(`${containerWidth - buttonSize}px`);
await new Promise(resolve => setTimeout(resolve, 500));
await page.click('button');
expect(await page.evaluate('window.clicked')).toBe(2);
expect(await page.evaluate('document.querySelector("#button").style.left')).toBe('0px');
await page.evaluate(transition => {
window.setInterval(animateLeft, transition);
animateLeft();
}, transition);
const error1 = await page.click('button', { timeout: 250 }).catch(e => e);
expect(await page.evaluate('window.clicked')).toBe(0);
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');
});
});