test(screencast): use public API for pixel tests (#3858)

browsers.json

@@ -13,7 +13,7 @@
     },
     {
       "name": "webkit",
-      "revision": "1343",
+      "revision": "1344",
       "download": true
     }
   ]

test/screencast.spec.ts

@@ -122,7 +122,9 @@ class VideoPlayer {
       if (ended)
         throw new Error('All frames are empty');
       const pixels = await this.pixels();
-      if (!pixels.every(p => p === 255))
+      // Quick check if all pixels are almost white. In Firefox blank page is not
+      // truly white so whe check approximately.
+      if (!pixels.every(p => p > 245))
         return;
     }
   }
@@ -159,14 +161,17 @@ class VideoPlayer {
 
 describe('screencast', suite => {
   suite.slow();
-  suite.skip(options.WIRE);
 }, () => {
-  it('should capture static page', async ({page, tmpDir, videoPlayer, toImpl}) => {
+  it('should capture static page', async ({browser, videoPlayer}) => {
-    const videoFile = path.join(tmpDir, 'v.webm');
+    const context = await browser.newContext({ _recordVideos: true, _videoSize: { width: 320, height: 240 } });
+    const page = await context.newPage();
+    const video = await page.waitForEvent('_videostarted') as any;
+
     await page.evaluate(() => document.body.style.backgroundColor = 'red');
-    await toImpl(page)._delegate.startScreencast({outputFile: videoFile, width: 320, height: 240});
     await new Promise(r => setTimeout(r, 1000));
-    await toImpl(page)._delegate.stopScreencast();
+    await page.close();
+
+    const videoFile = await video.path();
     expect(fs.existsSync(videoFile)).toBe(true);
 
     await videoPlayer.load(videoFile);
@@ -183,14 +188,18 @@ describe('screencast', suite => {
 
   it('should capture navigation', (test, parameters) => {
     test.flaky();
-  }, async ({page, tmpDir, server, videoPlayer, toImpl}) => {
+  }, async ({browser, server, videoPlayer}) => {
-    const videoFile = path.join(tmpDir, 'v.webm');
+    const context = await browser.newContext({ _recordVideos: true, _videoSize: { width: 1280, height: 720 } });
+    const page = await context.newPage();
+    const video = await page.waitForEvent('_videostarted') as any;
+
     await page.goto(server.PREFIX + '/background-color.html#rgb(0,0,0)');
-    await toImpl(page)._delegate.startScreencast({outputFile: videoFile, width: 320, height: 240});
     await new Promise(r => setTimeout(r, 1000));
     await page.goto(server.CROSS_PROCESS_PREFIX + '/background-color.html#rgb(100,100,100)');
     await new Promise(r => setTimeout(r, 1000));
-    await toImpl(page)._delegate.stopScreencast();
+    await page.close();
+
+    const videoFile = await video.path();
     expect(fs.existsSync(videoFile)).toBe(true);
 
     await videoPlayer.load(videoFile);
@@ -212,14 +221,18 @@ describe('screencast', suite => {
 
   it('should capture css transformation', (test, parameters) => {
     test.fail(options.WEBKIT(parameters) && WIN, 'Does not work on WebKit Windows');
-  }, async ({page, tmpDir, server, videoPlayer, toImpl}) => {
+  }, async ({browser, server, videoPlayer}) => {
-    const videoFile = path.join(tmpDir, 'v.webm');
+    const size = {width: 320, height: 240};
     // Set viewport equal to screencast frame size to avoid scaling.
-    await page.setViewportSize({width: 320, height: 240});
+    const context = await browser.newContext({ _recordVideos: true, _videoSize: size, viewport: size });
+    const page = await context.newPage();
+    const video = await page.waitForEvent('_videostarted') as any;
+
     await page.goto(server.PREFIX + '/rotate-z.html');
-    await toImpl(page)._delegate.startScreencast({outputFile: videoFile, width: 320, height: 240});
     await new Promise(r => setTimeout(r, 1000));
-    await toImpl(page)._delegate.stopScreencast();
+    await page.close();
+
+    const videoFile = await video.path();
     expect(fs.existsSync(videoFile)).toBe(true);
 
     await videoPlayer.load(videoFile);
@@ -299,12 +312,17 @@ describe('screencast', suite => {
     await browser.close();
   });
 
-  it('should scale frames down to the requested size ', async ({page, videoPlayer, tmpDir, server, toImpl}) => {
+  it('should scale frames down to the requested size ', async ({browser, videoPlayer, server}) => {
-    await page.setViewportSize({width: 640, height: 480});
+    const context = await browser.newContext({
-    const videoFile = path.join(tmpDir, 'v.webm');
+      viewport: {width: 640, height: 480},
+      // Set size to 1/2 of the viewport.
+      _recordVideos: true,
+      _videoSize: { width: 320, height: 240 },
+    });
+    const page = await context.newPage();
+    const video = await page.waitForEvent('_videostarted') as any;
+
     await page.goto(server.PREFIX + '/checkerboard.html');
-    // Set size to 1/2 of the viewport.
-    await toImpl(page)._delegate.startScreencast({outputFile: videoFile, width: 320, height: 240});
     // Update the picture to ensure enough frames are generated.
     await page.$eval('.container', container => {
       container.firstElementChild.classList.remove('red');
@@ -314,7 +332,9 @@ describe('screencast', suite => {
       container.firstElementChild.classList.add('red');
     });
     await new Promise(r => setTimeout(r, 1000));
-    await toImpl(page)._delegate.stopScreencast();
+    await page.close();
+
+    const videoFile = await video.path();
     expect(fs.existsSync(videoFile)).toBe(true);
 
     await videoPlayer.load(videoFile);