Screenshot is smaller than viewport setting

[fdagostino]

I'm trying to take an screenshot of 375x667 (in order to simulate an iPhone 6 capture) with the code below, but the screenshot is taken as a wrong size of 359x608 and also is showing scrollbar (can scrollbar be hidden?)

Enviroment:

• Windows 10
• Node v6.2.2
• Nightmare.version: 2.5.3

var Nightmare = require('nightmare');
var nightmare = Nightmare({ show: false })

nightmare
  .useragent('Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1')
  .viewport(375, 667)
  .wait()
  .goto('http://www.google.com')
  .wait()
  .screenshot('test.png')
  .end()
  .then(function (result) {
    console.log('Nightmare.version: ' + Nightmare.version);
  })
  .catch(function (error) {
    console.error('Error:', error);
  })

Image Generated

Thanks,
FD

[notsunohito]

try

var nightmare = Nightmare({
  frame: false,
  useContentSize: true
})

[fdagostino]

Thanks Shuichiro, this solves the screenshot size issue.
Now is taking the screenshot at 375x667 but the scrollbar is still shown
and included in this size.
Is there any way to hide the scrollbar? Or any way to add the width of the
scrollbar so I can take screenshot of 375+scrolllbar_widthx667?

El Thursday, July 14, 2016, Shuichiro Kamiya notifications@github.com
escribió:

try

Nightmare({
frame: false,
useContentSize: true
})

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#726 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQ2_jEDy5tpcZULaSkMTUBapjCKIdp8Iks5qVuk5gaJpZM4JMpQS
.

[rosshinkley]

I don't think you can hide the scrollbars with Electron before DOM ready.

Out of curiosity, could you use -webkit-scrollbar set to display:none to hide the scrollbar? It will still be there before dom-ready, but I think you can hide it:

nightmare
  .goto('http://example.com')
  .evaluate(function() {
    var s = document.styleSheets[0];
    s.insertRule('::-webkit-scrollbar { display:none; }');
  })
  .viewport(100, 100)
  .then(function() {
    console.log('done');
  });

Would something like that work for you?

[fdagostino]

Beautiful! this seems to work!

2016-07-15 0:24 GMT-03:00 Ross Hinkley notifications@github.com:

I don't think you can hide the scrollbars with Electron before DOM ready
electron/electron#3534.

Out of curiosity, could you use -webkit-scrollbar set to display:none to
hide the scrollbar? It will still be there before dom-ready, but I think
you can hide it:

nightmare
.goto('http://example.com')
.evaluate(function() {
var s = document.styleSheets[0];
s.insertRule('::-webkit-scrollbar { display:none; }');
})
.viewport(100, 100)
.then(function() {
console.log('done');
});

Would something like that work for you?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#726 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQ2_jGl4epxTK-CA02B5N2URHulBBRR_ks5qVv1pgaJpZM4JMpQS
.

[rosshinkley]

Closing as this seems to be resolved.

[stevenvachon]

frame, show and useContentSize are not documented in the readme and do not appear to do anything with v2.6.1

[rosshinkley]

They are not documented in the readme because they are not internal to Nightmare, they're internal to Electron's BrowserWindow.

What do you mean "don't appear to do anything"?

[stevenvachon]

@rosshinkley They did not auto-size the viewport to the content. Instead I had to do all of this:

function calculateContentHeight() {
  function getNumericalStyle(element, property) {
    return parseFloat( window.getComputedStyle(element,null).getPropertyValue(property) );
  }

  var html = document.documentElement;
  var body = document.body;

  var bodyMarginBottom  = getNumericalStyle(body, "margin-bottom");
  var bodyMarginTop     = getNumericalStyle(body, "margin-top");
  var htmlMarginBottom  = getNumericalStyle(html, "margin-bottom");
  var htmlMarginTop     = getNumericalStyle(html, "margin-top");

  var bodyPaddingBottom = getNumericalStyle(body, "padding-bottom");
  var bodyPaddingTop    = getNumericalStyle(body, "padding-top");
  var htmlPaddingBottom = getNumericalStyle(html, "padding-bottom");
  var htmlPaddingTop    = getNumericalStyle(html, "padding-top");

  var margins  = bodyMarginBottom  + bodyMarginTop  + htmlMarginBottom  + htmlMarginTop;
  var paddings = bodyPaddingBottom + bodyPaddingTop + htmlPaddingBottom + htmlPaddingTop;

  return html.offsetHeight + Math.round(margins + paddings);
}


var browser = new Nightmare();

browser
.goto("etc")
.viewport(1000, 0)  // for getting the actual height of short content
.then(() => browser.evaluate(calculateContentHeight))
.then(contentHeight => browser.viewport(1000, contentHeight))
.then(() => browser.wait(50))  // wait for correct calculations (?) -- Semaphore CI was failing without this, but local Ubuntu and OSX were fine
.then(() => browser.screenshot())