Capture full-height screenshots from Browserstack with Nightwatch

Question

I want to capture full-height screenshots from a Nightwatch test, using Browserstack - I can capture the visible screen, but not the entire document.

I've tried this:

browser.execute(function () {
    // get document dimensions
}, [], function (result) {
    // browser.resizeWindow(to value sent as result)
    browser.saveScreenshot('filename.png');
});

but while the resulting image has the correct width, the height is limited to (I think) the resolution of the browser opened in Browserstack.

Is it possible to achieve this?

This is a very interesting question. At my work we are using Nightwatch with Browser stack for functional/regression/cross-browser testing. But we also developed internal tool based on using Puppeteer to take screenshot on different environments and compare them with other Diff tool. — Lyserty, Dec 11 '18 at 22:45

score 0 · Answer 1 · answered Dec 09 '16 at 09:49

0

I believe this is a limitation of the browser itself. For example, when testing on Chrome 29+ via Selenium, you will only be able to capture the visible area of the webpage displayed.

Are you able to capture a full page screenshot when running the test on the same browser locally on your machine? If yes, then you need to check this with BrowserStack. If it works locally then it should work on BrowserStack.

answered Dec 09 '16 at 09:49

SeleCoder

41
1
1
3

I've done it locally using phantomjs, works fine, but targeting a WebKit browser on Browserstack doesn't. I have a feeling it may be a deliberate limitation on Browserstack's part, given they offer a screenshot API, for a price. Maybe not wanting to cannibalize their own product... – Nathan Dec 09 '16 at 10:18
Might have to do capture, scroll, capture then stitch the results together – Nathan Dec 09 '16 at 10:19

score 0 · Answer 2 · answered Jan 09 '17 at 10:53

I solved this by doing 2 things:

Add a high resolution values to my nightwatch.json:


    "yourPlatformName": {
        "desiredCapabilities": {
            "resolution": "1200x3000"
            //...
        }
    }

Activate (uncomment) browser.resizeWindow() in your code to resizes the current window before making a capture:


     browser.execute(function () {
            // get document dimensions
        }, [], function (result) {
            // browser.resizeWindow(to value sent as result)
           browser.resizeWindow(1200, 3000);
           browser.saveScreenshot('filename.png');
    });

For me the size 1200x3000 is enough to capture the entire document. Try to increase those values and tests to meet your needs.

Interesting solution, your "get document dimensions" comment make me thing of more flexible approach. Usually the width of page can be fixed by height may very from page to page. It would be useful for `saveScreenshot` to adopt to current page height. — Lyserty, Dec 11 '18 at 23:00

Capture full-height screenshots from Browserstack with Nightwatch

2 Answers2