test: screenshot on failure (#3053)

test/jest/fixtures.js

@@ -26,6 +26,8 @@ const { PlaywrightDispatcher } = require('../../lib/rpc/server/playwrightDispatc
 const { setUseApiName } = require('../../lib/progress');
 
 const browserName = process.env.BROWSER || 'chromium';
+const activeBrowsers = new Set();
+global.__activeBrowsers__ = activeBrowsers;
 
 module.exports = function registerFixtures(global) {
   global.registerWorkerFixture('parallelIndex', async ({}, test) => {
@@ -137,6 +139,7 @@ module.exports = function registerFixtures(global) {
 
   global.registerWorkerFixture('browser', async ({browserType, defaultBrowserOptions}, test) => {
     const browser = await browserType.launch(defaultBrowserOptions);
+    activeBrowsers.add(browser);
     try {
       await test(browser);
       if (browser.contexts().length !== 0) {
@@ -144,6 +147,7 @@ module.exports = function registerFixtures(global) {
         await Promise.all(browser.contexts().map(context => context.close()));
       }
     } finally {
+      activeBrowsers.delete(browser);
       await browser.close();
     }
   });

test/jest/playwrightEnvironment.js

@@ -114,15 +114,34 @@ class PlaywrightEnvironment extends NodeEnvironment {
     if (event.name === 'test_start') {
       const fn = event.test.fn;
       event.test.fn = async () => {
-        try {
+        return await this.fixturePool.resolveParametersAndRun(fn);
-          return await this.fixturePool.resolveParametersAndRun(fn);
-        } finally {
-          await this.fixturePool.teardownScope('test');
-        }
       };
     }
 
+    if (event.name === 'test_fn_success')
+      await this.fixturePool.teardownScope('test');
+
     if (event.name === 'test_fn_failure') {
+      let index = 0;
+      for (const browser of global.__activeBrowsers__ || []) {
+        for (const context of /** @type {import('../../').Browser} */ (browser).contexts()) {
+          const pages = context.pages();
+          const names = [];
+          let current = event.test;
+          while (current && current.name !== 'ROOT_DESCRIBE_BLOCK') {
+            names.push(current.name)
+            current = current.parent;
+          }
+          const fullName = names.reverse().join(' ')
+          await Promise.all(pages.map(async (page) => {
+            const filename = fullName.replace(/\s/g, '-') + '-' + index++ + '.png';
+            await page.screenshot({
+              path: path.join(this.global.testOptions.OUTPUT_DIR, filename)
+            });
+          }));
+        }
+      }
+      await this.fixturePool.teardownScope('test');
       await this.fixturePool.teardownScope('worker');
     }
   }