4

I'm trying to take a screenshot of the full page using WebdriverIO.

I've read that the best method is to use WebdriverCSS to enhance my WebdriverIO flows. WebdriverCSS automatically screenshots the entire page??

The problem is that WebdriverCSS is not working for me. I think it's because it is not yet compatible with webdriverio@3.0.x.

Is there any way to make it work or another solution that I could use?

My code: (which is producing nothing but undefined values in the callback) 

// 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: This is a known BUG in Chromium which most likely will not be fixed. Please see this LINK for more details.

iamdanchiv
  • 3,828
  • 4
  • 32
  • 40
mags
  • 506
  • 5
  • 22
  • Hey @mags! Probably this isn't of interest to you anymore, but I posted a working way to achieve this easily for others visiting the question. – iamdanchiv Dec 28 '18 at 22:43
  • Also for clarification, that blogpost & the wording can be a bit misleading... it isn't for the Selenium, or Driver teams (*gheckodriver*, *chromedriver*, *etc.*) to implement such a feature. Apart from the obvious rendering issues, which still stand... it's logical that this should only be done at a high-level framework level (e.g: WebdriverIO, Puppeteer). – iamdanchiv Dec 28 '18 at 22:44
  • Selenium is (quoting the docs) ***a user-centric web-testing framework***. Adding something a user **can't do**, like look at an entire page without scrolling (*duh!*) isn't something the team will ever do. Everything in Selenium is implemented in regard to this. (*text is added letter-by-letter*, as a user would type it, *first element is always clicked first*, like a user would, *you cannot click an element you cannot see*, like a user would). You get the idea... – iamdanchiv Dec 28 '18 at 22:50

4 Answers4

6

This can probably be done in quite a handful of ways, but the most straight forward way would be via the wdio-screenshot WebdriverIO plugin.

  1. Install the plugin: npm install --save-dev wdio-screenshot
  2. Enable the plugin in the wdio.conf.js file in the plugings object: plugins: { 'wdio-screenshot': {} }
  3. Inside your test, add the following step (for a document(full-page screenshot): browser.saveDocumentScreenshot('<screenShotsPath>/screenshotName.png');

> The full-page screenshot looks like this for an Instagram feed attempt. (left the screenshot inline for obvious reasons)

  • !Note-001: If you don't want your screenshot to look like that, then I recommend you use some waitUntil to guarantee your content has loaded & rendered successfully.

  • !Note-002: wdio-screenshot supports 3 types of screenshots (viewport (standard), document (full-page) & element (element-targeted)).

iamdanchiv
  • 3,828
  • 4
  • 32
  • 40
  • I got this error TypeError: browser.saveDocumentScreenshot is not a function at H:\webdriver\webdriverio-test\test.js:17:16 at process._tickCallback (internal/process/next_tick.js:68:7) – Sergey L Feb 13 '19 at 12:33
  • how to check is plugin loaded or not? – Sergey L Feb 13 '19 at 12:35
  • ok, it seems like wdio-screenshot doesn't work with webdriverio v5 – Sergey L Feb 13 '19 at 12:38
  • @SergeyL, hmm... yeah, this was surely executed on a `webdriverio@4.x.x`. I'll try to update the answer with the **v5** way in the near future. Thanks for pointing that out man! – iamdanchiv Feb 13 '19 at 12:43
  • @SergeyL Try browser.saveScreenshot – Ashok kumar Ganesan May 21 '20 at 16:09
  • @iamdanchiv I have already seen that. Using the accepted green tick answer. But I when I am using browser.saveDocumentScreenshot('folder/filename.png') I am getting error as browser.saveDocumentScreenshot is not a function – Anjani Kumar Oct 06 '20 at 20:28
  • Got this error too.. Seems wdio-screenshot is a crap lol – newBike Oct 28 '20 at 03:00
  • This link https://www.npmjs.com/package/wdio-screenshot shows how to use three types of screenshots. browser.saveDocumentScreenshot([fileName], [{options}]), what is the correct way of writing filename and option while using the command? – Anjani Kumar Oct 28 '20 at 19:33
1

@mags : I see that you need screenshots to understand the failure points. I would like to share what i use for screenshots.

  1. Integrate allure report to the wdio.conf file like this reporterOptions: { allure: { outputDir: "allure-results" },

  2. Install allure using npm install @wdio/allure-reporter --save-dev

  3. After you execute your test suite, run this command to generate allure results allure generate ./allure-results --clean

  4. Once the above command execution is complete, run the command allure open.

  5. Now for any test failed, allure will also show you the screenshot captured. Please see a sample screenshot attachedenter image description here

Seema Nair
  • 119
  • 7
  • 1
    Allure generates **a view-port screenshot**. OP was looking for a way to capture a screenshot of **the entire document**. Anyways, it seems that OP is no longer interested in the fate of this question. – iamdanchiv Jan 29 '19 at 21:14
  • @Seema Nair, No need to write anything on hooks? – Ashok kumar Ganesan May 21 '20 at 16:10
1

In WebdriverIO v6 you can take screenshots with Puppeteer. I've answered here https://stackoverflow.com/a/64286853/2475987

Cheers!

Mike G.
  • 3,512
  • 3
  • 14
  • 16
  • https://github.com/wswebcreation/wdio-image-comparison-service for cross browser and cross device – Mike G. Oct 11 '20 at 13:27
  • thank you, yes, I used the comparison service. Can be difficult to set up by it worked. – mags Oct 12 '20 at 15:37
-1

have you tried passing a higher div id and take a screen shot of that

browser
    .init()
    .url("https://search.yahoo.com")
    .webdrivercss('startpage',[
            {
                name: 'fullpage',
                elem: '#purple-syc'
            }

edit: I am also able to see full page screenhot when doing

.saveScreenshot('./webdrivercss.png');

yahoo home page

use .scroll('#myElement') to scroll and take screen shot again

user1207289
  • 2,575
  • 4
  • 26
  • 54
  • Do you get a full screenshot in Chrome? I'm using Chrome 50.0.2661.86 (64-bit). I've heard that some browsers produce full screenshots and some don't. – mags May 08 '16 at 04:01
  • @mags yes, I get full page screen shot in chrome as shown above. [here](http://stackoverflow.com/questions/37010103/webdriverio-browsermob/37011601#37011601) is how to use chrome, in case you need. – user1207289 May 08 '16 at 17:33
  • @mags my chrome version - 50.0.2661.86 (64-bit) – user1207289 May 08 '16 at 17:40
  • 1
    hmm. I don't think you are getting a full page screenshot. Looks like you're just getting the viewport from the picture you posted. – mags May 09 '16 at 05:19
  • @mags increase `viewport`or `scrolldown` to specific position. – user1207289 May 09 '16 at 14:11
  • Hey @mags! Did you get to try my solution? It's quick and easy. Cheers! – iamdanchiv Jan 02 '19 at 14:01