我正在尝试使用WebdriverIO截取整个页面的屏幕截图。
我读过,最好的方法是使用WebdriverCSS增强我的WebdriverIO流。WebdriverCSS自动截图整个页面?
问题是WebdriverCSS对我不起作用。我认为是因为它尚未与兼容webdriverio@3.0.x。
webdriverio@3.0.x
有什么办法可以使它起作用,或者可以使用其他解决方案?
我的代码: ( 这是生产什么,但在回调中未定义的值 )
// 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: 这是Chromium中的一个已知BUG,很可能不会修复。请参阅此链接以获取更多详细信息。
这可能有很多种方法,但是最直接的方法是通过 wdio屏幕快照 WebdriverIO插件。
npm install --save-dev wdio-screenshot
wdio.conf.js
plugings
plugins: { 'wdio-screenshot': {} }
browser.saveDocumentScreenshot('<screenShotsPath>/screenshotName.png');
> 全页面截图看起来像 这样 一个Instagram的饲料尝试。( 出于明显原因,将屏幕截图留在了内联中 )
!Note-001: 如果您不希望屏幕截图看起来像这样,那么我建议您使用一些 waitUntil 来确保您的内容已 成功加载和呈现 。
!Note-002: wdio-screenshot支持3种类型的屏幕截图( 视口 (标准), 文档 (整页)和 元素 (针对元素))。
wdio-screenshot