Как сделать снимок экрана всего веб-страницы с помощью команды webdriverIO?

Question

Я использую browser.saveDocumentScreenshot('folder/filename.png') Я получаю сообщение об ошибке, поскольку browser.saveDocumentScreenshot не является функцией

Answer 1

Если вам нужна поддержка всех браузеров и устройств, используйте https://github.com/wswebcreation/wdio-image-comparison-service

С другой стороны, с WebdriverIO 6 (возможно, с 5) можно использовать команды Puppeteer. С Puppeteer можно делать снимки экрана на всю страницу, см. 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://stackru.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()
    })
})