WebdriverIO - Take full-page screenshot

Asked 5/5, 2016 at 16:22 Answered 29/1, 2019 at 18:38

Solved selenium selenium-webdriver automated-tests webdriver-io wdio-v4

I'm trying to take a screenshot of the full page using WebdriverIO.

I've read that the best method is to use WebdriverCSS to enhance my WebdriverIO flows. WebdriverCSS automatically screenshots the entire page??

The problem is that WebdriverCSS is not working for me. I think it's because it is not yet compatible with [email protected].

Is there any way to make it work or another solution that I could use?

My code: (which is producing nothing but undefined values in the callback)

// Initialize WebdriverCSS for `client` instance
require('webdrivercss').init(driver, {
    // example options
    screenshotRoot: '../../screenshots',
    failedComparisonsRoot: '../../screenshots/diffs',
    misMatchTolerance: 0.05
});

// ...
// driver gets initialized and url opened
// ...

driver.webdrivercss('page', {
  name: 'body',
  elem: 'body'
}, function(err, res) {
  // here the values of err and res are always undefined
})
.saveScreenshot('../../screenshots/webdrivercsstest.png');
// the screenshot works, but it's not full page

!EDIT: This is a known BUG in Chromium which most likely will not be fixed. Please see this LINK for more details.

Halleyhalli answered 5/5, 2016 at 16:22 Comment(3)

Hey @mags! Probably this isn't of interest to you anymore, but I posted a working way to achieve this easily for others visiting the question. – Charkha 28/12, 2018 at 22:43

Also for clarification, that blogpost & the wording can be a bit misleading... it isn't for the Selenium, or Driver teams (gheckodriver, chromedriver, etc.) to implement such a feature. Apart from the obvious rendering issues, which still stand... it's logical that this should only be done at a high-level framework level (e.g: WebdriverIO, Puppeteer). – Charkha 28/12, 2018 at 22:44

Selenium is (quoting the docs) a user-centric web-testing framework. Adding something a user can't do, like look at an entire page without scrolling (duh!) isn't something the team will ever do. Everything in Selenium is implemented in regard to this. (text is added letter-by-letter, as a user would type it, first element is always clicked first, like a user would, you cannot click an element you cannot see, like a user would). You get the idea... – Charkha 28/12, 2018 at 22:50

This can probably be done in quite a handful of ways, but the most straight forward way would be via the wdio-screenshot WebdriverIO plugin.

Install the plugin: npm install --save-dev wdio-screenshot
Enable the plugin in the wdio.conf.js file in the plugings object: plugins: { 'wdio-screenshot': {} }
Inside your test, add the following step (for a document(full-page screenshot): browser.saveDocumentScreenshot('<screenShotsPath>/screenshotName.png');

> The full-page screenshot looks like this for an Instagram feed attempt. (left the screenshot inline for obvious reasons)

!Note-001: If you don't want your screenshot to look like that, then I recommend you use some waitUntil to guarantee your content has loaded & rendered successfully.
!Note-002: wdio-screenshot supports 3 types of screenshots (viewport (standard), document (full-page) & element (element-targeted)).

Charkha answered 28/12, 2018 at 22:30 Comment(8)

I got this error TypeError: browser.saveDocumentScreenshot is not a function at H:\webdriver\webdriverio-test\test.js:17:16 at process._tickCallback (internal/process/next_tick.js:68:7) – Nairobi 13/2, 2019 at 12:33

how to check is plugin loaded or not? – Nairobi 13/2, 2019 at 12:35

ok, it seems like wdio-screenshot doesn't work with webdriverio v5 – Nairobi 13/2, 2019 at 12:38

@SergeyL, hmm... yeah, this was surely executed on a [email protected]. I'll try to update the answer with the v5 way in the near future. Thanks for pointing that out man! – Charkha 13/2, 2019 at 12:43

@SergeyL Try browser.saveScreenshot – Imbalance 21/5, 2020 at 16:9

@Charkha I have already seen that. Using the accepted green tick answer. But I when I am using browser.saveDocumentScreenshot('folder/filename.png') I am getting error as browser.saveDocumentScreenshot is not a function – Amalberga 6/10, 2020 at 20:28

Got this error too.. Seems wdio-screenshot is a crap lol – Gavriella 28/10, 2020 at 3:0

This link npmjs.com/package/wdio-screenshot shows how to use three types of screenshots. browser.saveDocumentScreenshot([fileName], [{options}]), what is the correct way of writing filename and option while using the command? – Amalberga 28/10, 2020 at 19:33

@mags : I see that you need screenshots to understand the failure points. I would like to share what i use for screenshots.

Integrate allure report to the wdio.conf file like this reporterOptions: { allure: { outputDir: "allure-results" },
Install allure using npm install @wdio/allure-reporter --save-dev
After you execute your test suite, run this command to generate allure results allure generate ./allure-results --clean
Once the above command execution is complete, run the command allure open.
Now for any test failed, allure will also show you the screenshot captured. Please see a sample screenshot attached

Informant answered 29/1, 2019 at 18:38 Comment(3)

Allure generates a view-port screenshot. OP was looking for a way to capture a screenshot of the entire document. Anyways, it seems that OP is no longer interested in the fate of this question. – Charkha 29/1, 2019 at 21:14

@Seema Nair, No need to write anything on hooks? – Imbalance 21/5, 2020 at 16:10

Hey !! thanks for this comment. I was using allure but never saw the screenshot thing in the dashboard. Thanks for this answer. It saved a lot of hours :) – Matlick 28/1, 2022 at 6:40

-1

have you tried passing a higher div id and take a screen shot of that

browser
    .init()
    .url("https://search.yahoo.com")
    .webdrivercss('startpage',[
            {
                name: 'fullpage',
                elem: '#purple-syc'
            }

edit: I am also able to see full page screenhot when doing

.saveScreenshot('./webdrivercss.png');

use .scroll('#myElement') to scroll and take screen shot again

Dehumidifier answered 6/5, 2016 at 23:13 Comment(6)

Do you get a full screenshot in Chrome? I'm using Chrome 50.0.2661.86 (64-bit). I've heard that some browsers produce full screenshots and some don't. – Halleyhalli 8/5, 2016 at 4:1

@Halleyhalli yes, I get full page screen shot in chrome as shown above. here is how to use chrome, in case you need. – Dehumidifier 8/5, 2016 at 17:33

@Halleyhalli my chrome version - 50.0.2661.86 (64-bit) – Dehumidifier 8/5, 2016 at 17:40

hmm. I don't think you are getting a full page screenshot. Looks like you're just getting the viewport from the picture you posted. – Halleyhalli 9/5, 2016 at 5:19

@Halleyhalli increase viewportor scrolldown to specific position. – Dehumidifier 9/5, 2016 at 14:11

Hey @mags! Did you get to try my solution? It's quick and easy. Cheers! – Charkha 2/1, 2019 at 14:1

Recommended topics

Hot tags