How to take full web page screenshot using webdriverIO command?

If you want support of all browser and devices use https://github.com/wswebcreation/wdio-image-comparison-service

Alternately, with WebdriverIO 6 (maybe with 5 as well) it's possible to use Puppeteer commands. With Puppeteer, it's possible to take full-page screenshots, see https://github.com/puppeteer/puppeteer/blob/v5.3.1/docs/api.md#pagescreenshotoptions

// Mocha example describe('Screenshot', () => { // replace with beforeAll in Jasmine! before(() => { // add command to reuse easily everywhere in the project // https://webdriver.io/docs/customcommands.html browser.addCommand('takeFullPageScreenshot', function (options = {}) { // Puppeteer commands should be wrapped with browser.call // because they return Promises // https://webdriver.io/docs/api/browser/call.html return browser.call(async () => { // https://webdriver.io/docs/api/browser/getPuppeteer.html const puppeteer = await browser.getPuppeteer() // now we interact with Puppeteer API // https://github.com/puppeteer/puppeteer/blob/v5.3.1/docs/api.md#browserpages const pages = await puppeteer.pages() // https://github.com/puppeteer/puppeteer/blob/v5.3.1/docs/api.md#pagescreenshotoptions return pages[0].screenshot({ ...options, fullPage: true }) }) }) }) it('should take full page screenshot', () => { browser.url('https://stackoverflow.com/questions/64242220/how-to-take-full-web-page-screenshot-using-webdriverio-command') // somehow wait for page to load expect($('.user-details')).toBeVisible() // take screenshot and save to file browser.takeFullPageScreenshot({ path: './screenshot.png' }) // take screenshot but don't save to file const screenshot = browser.takeFullPageScreenshot() }) })