We're trying to debug an issue we're seeing between TestCafé and Chrome in that (for a base use case) we're seeing extra pixels added to the height of the element being used to make a snapshot. I'm going to assume that this is due to our element being taller than we think but in the Chrome debugger, the height of the element looks to be correct, whereas in the snapshot it's not.
I've looked over the TestCafé source a bit (from both directions: from the takeElementScreenshot method down and from the pngJS code up) but have been unable to pinpoint exactly where the size of the snapshot to take is extracted (calculated) from the selector passed into takeElementScreenshot.
Can someone please point me to the right place in the source code where this is happening? Thanks.
First, the data is taken from the element located in the upper left-hand corner of the document: https://github.com/DevExpress/testcafe/blob/master/src/client/driver/command-executors/browser-manipulation/index.js#L50
Then, it is converted to values relative to the visible part of the document: https://github.com/DevExpress/testcafe/blob/master/src/client/driver/command-executors/browser-manipulation/ensure-crop-options.js
There, the pixel coordinates for cutting are calculated: https://github.com/DevExpress/testcafe/blob/master/src/screenshots/crop.js