thunderstrike/puppeteer
thunderstrike/puppeteer
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(elementhandle): introduce elementHandle.isIntersectingViewport() method. (#2673)

Browse Source 
This patch introduces  `elementHandle.isIntersectingViewport()` method returns
true if element is visible in the viewport.

Fixes #2629.
This commit is contained in:
Bogdan Ponomarenko 2018-07-12 03:51:04 +03:00 committed by Andrey Lushnikov
parent 4f8d00e64e
commit 96c558d544
3 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/api.md
View File

@ -220,6 +220,7 @@
* [elementHandle.getProperties()](#elementhandlegetproperties) * [elementHandle.getProperties()](#elementhandlegetproperties)
* [elementHandle.getProperty(propertyName)](#elementhandlegetpropertypropertyname) * [elementHandle.getProperty(propertyName)](#elementhandlegetpropertypropertyname)
* [elementHandle.hover()](#elementhandlehover) * [elementHandle.hover()](#elementhandlehover)
* [elementHandle.isIntersectingViewport()](#elementhandleisintersectingviewport)
* [elementHandle.jsonValue()](#elementhandlejsonvalue) * [elementHandle.jsonValue()](#elementhandlejsonvalue)
* [elementHandle.press(key[, options])](#elementhandlepresskey-options) * [elementHandle.press(key[, options])](#elementhandlepresskey-options)
* [elementHandle.screenshot([options])](#elementhandlescreenshotoptions) * [elementHandle.screenshot([options])](#elementhandlescreenshotoptions)
@ -2548,6 +2549,9 @@ Fetches a single property from the objectHandle.
This method scrolls element into view if needed, and then uses [page.mouse](#pagemouse) to hover over the center of the element. This method scrolls element into view if needed, and then uses [page.mouse](#pagemouse) to hover over the center of the element.
If the element is detached from DOM, the method throws an error. If the element is detached from DOM, the method throws an error.
#### elementHandle.isIntersectingViewport()
- returns: <[Promise]<[boolean]>> Resolves to true if the element is visible in the current viewport.
#### elementHandle.jsonValue() #### elementHandle.jsonValue()
- returns: <[Promise]<[Object]>> - returns: <[Promise]<[Object]>>

18
lib/ElementHandle.js
View File

@ -354,6 +354,24 @@ class ElementHandle extends JSHandle {
} }
return result; return result;
} }
/**
* @returns {!Promise<boolean>}
*/
isIntersectingViewport() {
return this.executionContext().evaluate(
node => new Promise(resolve => {
const callback = entries => {
resolve(entries[0].isIntersecting);
observer.disconnect();
};
const observer = new IntersectionObserver(callback);
observer.observe(node);
}),
this
);
}
} }
function computeQuadArea(quad) { function computeQuadArea(quad) {

49
test/elementhandle.spec.js
View File

@ -198,6 +198,55 @@ 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;
}
.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);
});
});
describe('ElementHandle.screenshot', function() { describe('ElementHandle.screenshot', function() {
it('should work', async({page, server}) => { it('should work', async({page, server}) => {
await page.setViewport({width: 500, height: 500}); await page.setViewport({width: 500, height: 500});