CODEWITHSUNDEEP
javascriptseleniumnightwatch.jswebpage-screenshot
James Ford
James Ford

Reputation: 1563

How can I take a screenshot of only the visible elements of a page in Nightwatch.js?

I can successfully capture an entire webpage using Nightwatch.js, using the following code snippet:

module.exports = {
    'open the page': function (browser) {
        browser
            .url('http://localhost')
            .waitForElementVisible('body', 1000)
            .resizeWindow(320, 480)
            .saveScreenshot('./screenshot/mobile/login.png');
    }
}

In my scenario, the page I'm opening contains a lot of content which would scroll off the bottom of the page. My captures with the code above are coming out at 320x1200 pixels, and I want them to just come out at 320x480 pixels.

I want to capture only the 'above the fold' elements of the screen, and not the entire webpage, which seems to be the default. How can I achieve this?

Upvotes: 0

Views: 1375

Answers (1)

xnakos
xnakos

Reputation: 10196

Requiring a functionality like the one you describe (but using Python, Selenium, and PhantomJS), I ended up saving the screenshot as is and then cropping the saved image using a separate tool (some ImageMagick wrapper). In your case, png-crop could be the solution (https://www.npmjs.com/package/png-crop). When, for instance, you specify a window of 320px width and 480px height, the saved screenshot could very well have a width of 320px and a height of 2500px, depending on how "tall" the page is. You could then proceed to crop the saved image to an image of 320px width and 480px height, keeping the upper part of the image.

Upvotes: 0

Related Questions