如何使用 webdriverIO 命令截取完整的网页截图? [英] How to take full web page screenshot using webdriverIO command?

问题描述

我正在使用 browser.saveDocumentScreenshot('folder/filename.png') 我收到错误，因为 browser.saveDocumentScreenshot 不是一个函数

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

推荐答案

如果您希望支持所有浏览器和设备，请使用 https://github.com/wswebcreation/wdio-image-comparison-service

If you want support of all browser and devices use 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

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

这篇关于如何使用 webdriverIO 命令截取完整的网页截图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！