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.
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.
npm install --save-dev wdio-screenshot
wdio.conf.js
file in the plugings
object: plugins: { 'wdio-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)).