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

feat(unit): add click test on animated target

Browse source
This commit is contained in:
Davy Duperron 2020-01-26 16:06:49 +01:00
parent 69c5b2a3b6
commit 5c938cc0b3
No known key found for this signature in database
GPG key ID: 302C85E3F19B7054
1 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
test/click.spec.js
View file

@ -374,5 +374,35 @@ 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);
}); });
it('should click on an animated button', async({page}) => {
const buttonSize = 50;
const containerWidth = 500;
const transition = 500;
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>
`);
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');
});
}); });
}; };