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>} * @returns {!Promise<boolean>}
*/ */
isIntersectingViewport() { isIntersectingViewport() {
return this.executionContext().evaluate( return this.executionContext().evaluate(async element => {
node => new Promise(resolve => { const visibleRatio = await new Promise(resolve => {
const callback = entries => { const observer = new IntersectionObserver(entries => {
resolve(entries[0].isIntersecting); resolve(entries[0].intersectionRatio);
observer.disconnect(); observer.disconnect();
}; });
const observer = new IntersectionObserver(callback); observer.observe(element);
});
observer.observe(node); return visibleRatio > 0;
}), }, this);
this
);
} }
} }

2
test/assets/offscreenbuttons.html
View File

@ -15,6 +15,7 @@
#btn7 { right: -70px; top: 175px; } #btn7 { right: -70px; top: 175px; }
#btn8 { right: -80px; top: 200px; } #btn8 { right: -80px; top: 200px; }
#btn9 { right: -90px; top: 225px; } #btn9 { right: -90px; top: 225px; }
#btn10 { right: -100px; top: 250px; }
</style> </style>
<button id=btn0>0</button> <button id=btn0>0</button>
<button id=btn1>1</button> <button id=btn1>1</button>
@ -26,6 +27,7 @@
<button id=btn7>7</button> <button id=btn7>7</button>
<button id=btn8>8</button> <button id=btn8>8</button>
<button id=btn9>9</button> <button id=btn9>9</button>
<button id=btn10>10</button>
<script> <script>
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
for (const button of Array.from(document.querySelectorAll('button'))) 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() { describe('ElementHandle.isIntersectingViewport', function() {
it('should return false if element is not visible in viewport', async({page, server}) => { it('should work', async({page, server}) => {
await page.setViewport({ width: 1000, height: 400 }); await page.goto(server.PREFIX + '/offscreenbuttons.html');
await page.setContent(` for (let i = 0; i < 11; ++i) {
<html> const button = await page.$('#btn' + i);
<head> // All but last button are visible.
<style> const visible = i < 10;
.scroll-container { expect(await button.isIntersectingViewport()).toBe(visible);
position: relative;
width: 600px;
background: green;
height: 150px;
overflow: hidden;
} }
.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'); await page.goto(server.PREFIX + '/offscreenbuttons.html');
const messages = []; const messages = [];
page.on('console', msg => messages.push(msg.text())); 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). // We might've scrolled to click a button - reset to (0, 0).
await page.evaluate(() => window.scrollTo(0, 0)); await page.evaluate(() => window.scrollTo(0, 0));
await page.click(`#btn${i}`); await page.click(`#btn${i}`);
@ -48,7 +48,8 @@ module.exports.addTests = function({testRunner, expect, DeviceDescriptors}) {
'button #6 clicked', 'button #6 clicked',
'button #7 clicked', 'button #7 clicked',
'button #8 clicked', 'button #8 clicked',
'button #9 clicked' 'button #9 clicked',
'button #10 clicked'
]); ]);
}); });