github/puppeteer
0
0
Fork 0
mirror of https://github.com/puppeteer/puppeteer synced 2024-06-14 14:02:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: cleanup ElementHandle.isIntersectingViewport (#2874)

Browse Source 
This patch:
- simplifies test reusing the `offscreenbuttons.html` asset
- aligns IntersectionObserver usage with the one we have for
  `ElementHandle._scrollIntoViewIfNeeded`.
This commit is contained in:
Andrey Lushnikov 2018-07-11 21:04:36 -07:00 committed by GitHub
parent 12bc1e1a62
commit 254bc80811
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/ElementHandle.js
View File

@ -359,18 +359,16 @@ class ElementHandle extends JSHandle {
* @returns {!Promise<boolean>}
*/
isIntersectingViewport() {
return this.executionContext().evaluate(
node => new Promise(resolve => {
const callback = entries => {
resolve(entries[0].isIntersecting);
return this.executionContext().evaluate(async element => {
const visibleRatio = await new Promise(resolve => {
const observer = new IntersectionObserver(entries => {
resolve(entries[0].intersectionRatio);
observer.disconnect();
};
const observer = new IntersectionObserver(callback);
observer.observe(node);
}),
this
);
});
observer.observe(element);
});
return visibleRatio > 0;
}, this);
}
}

2
test/assets/offscreenbuttons.html
View File

@ -15,6 +15,7 @@
#btn7 { right: -70px; top: 175px; }
#btn8 { right: -80px; top: 200px; }
#btn9 { right: -90px; top: 225px; }
#btn10 { right: -100px; top: 250px; }
</style>
<button id=btn0>0</button>
<button id=btn1>1</button>
@ -26,6 +27,7 @@
<button id=btn7>7</button>
<button id=btn8>8</button>
<button id=btn9>9</button>
<button id=btn10>10</button>
<script>
window.addEventListener('DOMContentLoaded', () => {
for (const button of Array.from(document.querySelectorAll('button')))

53
test/elementhandle.spec.js
View File

@ -198,52 +198,15 @@ module.exports.addTests = function({testRunner, expect}) {
});
});
describe('ElementHandle.isVisible', function() {
it('should return false if element is not visible in viewport', async({page, server}) => {
await page.setViewport({ width: 1000, height: 400 });
await page.setContent(`
<html>
<head>
<style>
.scroll-container {
position: relative;
width: 600px;
background: green;
height: 150px;
overflow: hidden;
describe('ElementHandle.isIntersectingViewport', function() {
it('should work', async({page, server}) => {
await page.goto(server.PREFIX + '/offscreenbuttons.html');
for (let i = 0; i < 11; ++i) {
const button = await page.$('#btn' + i);
// All but last button are visible.
const visible = i < 10;
expect(await button.isIntersectingViewport()).toBe(visible);
}
.red {
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 150px;
background: red;
}
.blue {
position: absolute;
top: 0;
right: -160px;
height: 150px;
width: 150px;
background: blue;
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="red"></div>
<div class="blue"></div>
</div>
</body>
</html>
`);
const box = await page.$('.red');
const blue = await page.$('.blue');
expect(await box.isIntersectingViewport()).toBe(true);
expect(await blue.isIntersectingViewport()).toBe(false);
});
});

5
test/input.spec.js
View File

@ -33,7 +33,7 @@ module.exports.addTests = function({testRunner, expect, DeviceDescriptors}) {
await page.goto(server.PREFIX + '/offscreenbuttons.html');
const messages = [];
page.on('console', msg => messages.push(msg.text()));
for (let i = 0; i < 10; ++i) {
for (let i = 0; i < 11; ++i) {
// We might've scrolled to click a button - reset to (0, 0).
await page.evaluate(() => window.scrollTo(0, 0));
await page.click(`#btn${i}`);
@ -48,7 +48,8 @@ module.exports.addTests = function({testRunner, expect, DeviceDescriptors}) {
'button #6 clicked',
'button #7 clicked',
'button #8 clicked',
'button #9 clicked'
'button #9 clicked',
'button #10 clicked'
]);
});