How to take full web page screenshot using webdriverIO command?

Question

I am using browser.saveDocumentScreenshot('folder/filename.png') I am getting error as browser.saveDocumentScreenshot is not a function

Answer 1

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()
    })
})