test: add device scale factor screenshot tests (#1660)

test/golden-utils.js

@@ -56,7 +56,7 @@ function compareImages(actualBuffer, expectedBuffer, mimeType) {
     };
   }
   const diff = new PNG({width: expected.width, height: expected.height});
-  const count = pixelmatch(expected.data, actual.data, diff.data, expected.width, expected.height, {threshold: 0.1});
+  const count = pixelmatch(expected.data, actual.data, diff.data, expected.width, expected.height, {threshold: 0.15});
   return count > 0 ? { diff: PNG.sync.write(diff) } : null;
 }
 

test/screenshot.spec.js

@@ -18,7 +18,7 @@
 /**
  * @type {PageTestSuite}
  */
-module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM, WEBKIT}) {
+module.exports.describe = function({testRunner, expect, product, playwright, FFOX, CHROMIUM, WEBKIT, LINUX }) {
   const {describe, xdescribe, fdescribe} = testRunner;
   const {it, fit, xit, dit} = testRunner;
   const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;
@@ -217,6 +217,14 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM,
         expect(screenshot).toBeInstanceOf(Buffer);
       }
     });
+    it.fail(WEBKIT)('should work with device scale factor', async({browser, server}) => {
+      const context = await browser.newContext({ viewport: { width: 320, height: 480 }, deviceScaleFactor: 2 });
+      const page = await context.newPage();
+      await page.goto(server.PREFIX + '/grid.html');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toBeGolden('screenshot-device-scale-factor.png');
+      await context.close();
+    });
   });
 
   describe('ElementHandle.screenshot', function() {
@@ -386,6 +394,16 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM,
       expect(screenshot).toBeGolden('screenshot-element-mobile.png');
       await context.close();
     });
+    it.fail(WEBKIT && LINUX).skip(FFOX)('should work with device scale factor', async({browser, server}) => {
+      const context = await browser.newContext({ viewport: { width: 320, height: 480 }, deviceScaleFactor: 2 });
+      const page = await context.newPage();
+      await page.goto(server.PREFIX + '/grid.html');
+      await page.evaluate(() => window.scrollBy(50, 100));
+      const elementHandle = await page.$('.box:nth-of-type(3)');
+      const screenshot = await elementHandle.screenshot();
+      expect(screenshot).toBeGolden('screenshot-element-mobile-dsf.png');
+      await context.close();
+    });
     it('should work for an element with an offset', async({page}) => {
       await page.setContent('<div style="position:absolute; top: 10.3px; left: 20.4px;width:50.3px;height:20.2px;border:1px solid black;"></div>');
       const elementHandle = await page.$('div');