Created
March 3, 2018 15:29
-
-
Save emmiep/cd35de612412ac6a283613a438e6acfa to your computer and use it in GitHub Desktop.
Use puppeteer to get coordinates of an element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Puppeteer = require('puppeteer'); | |
(async () => { | |
const browser = await Puppeteer.launch(); | |
const page = await browser.newPage(); | |
await page.goto('https://example.com'); | |
const header = await page.$('h1'); | |
const rect = await page.evaluate((header) => { | |
const {top, left, bottom, right} = header.getBoundingClientRect(); | |
return {top, left, bottom, right}; | |
}, header); | |
console.log(rect); | |
await browser.close(); | |
})(); |
can use https://github.com/GoogleChrome/puppeteer/blob/v2.0.0/docs/api.md#elementhandleboundingbox for this
Thank you this saved me alot of time.
I'm afraid this script is incorrect, as .getBoundingClientRect() returns 8 elements, and the first 4 are (left, top, width, height), check here.
I'm afraid this script is incorrect, as .getBoundingClientRect() returns 8 elements, and the first 4 are (left, top, width, height), check here.
I don't really remember creating this gist, but I think I was only interested in those 4 values. If you want all the values you can of course return the entire thing instead.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
can use https://github.com/GoogleChrome/puppeteer/blob/v2.0.0/docs/api.md#elementhandleboundingbox for this