WebdriverIO - Take full-page screenshot

Question

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.

Answer 1

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.

1. Install the plugin: npm install --save-dev wdio-screenshot
2. Enable the plugin in the wdio.conf.js file in the plugings object: plugins: { 'wdio-screenshot': {} }
3. 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)).

Answer 2

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

1. Integrate allure report to the wdio.conf file like this reporterOptions: { allure: { outputDir: "allure-results" },

2. Install allure using npm install @wdio/allure-reporter --save-dev

3. After you execute your test suite, run this command to generate allure results allure generate ./allure-results --clean

4. Once the above command execution is complete, run the command allure open.

5. Now for any test failed, allure will also show you the screenshot captured. Please see a sample screenshot attached