Capture screenshot of specific element using NodeJS and Browserstack

Question

Does anyone know if there's a way to use NodeJs to drive Browserstack and capture a screenshot of a specific element on the page?

Thanks!

score 2 · Answer 1 · edited May 23 '17 at 12:31

2

You can do it using PhantomJS.

Screenshot the entire page: Phantomjs - take screenshot of a web page

Screenshot cropped to the dimensions of a specific element: Crop screenshot to element in PhantomJS

More PhantomJS examples: https://github.com/ariya/phantomjs/wiki/Examples

edited May 23 '17 at 12:31

Community

1
1

answered Dec 24 '13 at 06:08

Mike Causer

8,196
2
43
63

Thanks! However, the reason I wanted to do it with Browserstack or Selenium is to get the true rendering of the page with differen browsers / rendering engines... – Danny Ackerman Dec 24 '13 at 06:20
2

Browserstack has an [example](http://www.browserstack.com/automate/node#enhancements-screenshots) of taking a full page screenshot. To capture a specific element you'd need to find the element, get it's position + dimensions and then crop the png screenshot. There are a few methods for cropping - you can "paste" the base64 png onto a canvas - see [node-canvas](https://github.com/LearnBoost/node-canvas/blob/master/examples/resize.js). You can use imagemagick or gmagick - see [gm](http://aheckmann.github.io/gm/). – Mike Causer Dec 24 '13 at 07:58
2

Browserstack also has a ["Screenshots API"](http://www.browserstack.com/screenshots/api). Does not appear to support cropping - you'd have to do that in a separate process. You cant get the element position/dimensions either. Does not sound like a suitable solution for you. – Mike Causer Dec 24 '13 at 08:00

score 0 · Answer 2 · answered Dec 27 '13 at 08:23

The below given links give a sample to capture screenshot of an element using php. You can use it as a reference to write code in Node. If you face any problem, please feel free to ask.

https://github.com/facebook/php-webdriver/wiki/Taking-Full-Screenshot-and-of-an-Element

score 0 · Answer 3 · answered Feb 21 '14 at 07:47

0

Exactly what you are looking for:

https://github.com/firstandthird/stackshots

answered Feb 21 '14 at 07:47

dontmentionthebackup

2,775
1
21
18

this doesn't allow screenshots of specific elements, just full pages – Alasdair McLeay May 13 '16 at 10:15

Capture screenshot of specific element using NodeJS and Browserstack

3 Answers3