feat(plugin): coverage with WebDriver - devtools (#4349)

Author: kobenguyent

lib/helper/WebDriver.js

@@ -642,6 +642,7 @@ class WebDriver extends Helper {
 
     if (this.options.automationProtocol) {
       this.puppeteerBrowser = await this.browser.getPuppeteer();
+      this.page = (await this.puppeteerBrowser.pages())[0];
     }
 
     return this.browser;
@@ -2731,7 +2732,6 @@ class WebDriver extends Helper {
     this.recording = true;
     this.recordedAtLeastOnce = true;
 
-    this.page = (await this.puppeteerBrowser.pages())[0];
     await this.page.setRequestInterception(true);
 
     this.page.on('request', (request) => {

lib/plugin/coverage.js

@@ -11,7 +11,7 @@ const defaultConfig = {
   outputDir: 'output/coverage',
 };
 
-const supportedHelpers = ['Puppeteer', 'Playwright'];
+const supportedHelpers = ['Puppeteer', 'Playwright', 'WebDriver'];
 
 const v8CoverageHelpers = {
   Playwright: {
@@ -61,6 +61,33 @@ const v8CoverageHelpers = {
       await coverageReport.add(coverageList);
     },
   },
+  WebDriver: {
+    startCoverage: async (page) => {
+      await Promise.all([
+        page.coverage.startJSCoverage({
+          resetOnNavigation: false,
+          includeRawScriptCoverage: true,
+        }),
+        page.coverage.startCSSCoverage({
+          resetOnNavigation: false,
+        }),
+      ]);
+    },
+    takeCoverage: async (page, coverageReport) => {
+      const [jsCoverage, cssCoverage] = await Promise.all([
+        page.coverage.stopJSCoverage(),
+        page.coverage.stopCSSCoverage(),
+      ]);
+      // to raw V8 script coverage
+      const coverageList = [...jsCoverage.map((it) => {
+        return {
+          source: it.text,
+          ...it.rawScriptCoverage,
+        };
+      }), ...cssCoverage];
+      await coverageReport.add(coverageList);
+    },
+  },
 };
 
 /**
@@ -109,11 +136,17 @@ module.exports = function (config) {
   const debug = debugModule(`codeceptjs:plugin:${helperName.toLowerCase()}Coverage`);
 
   const helper = helpers[helperName];
+
+  if (helperName === 'WebDriver' && !helper.config.devtoolsProtocol) throw Error('Coverage is currently supporting the WebDriver running with Devtools protocol.');
+
   const v8Helper = v8CoverageHelpers[helperName];
 
   const coverageOptions = {
     ...config,
   };
+
+  if (helperName === 'WebDriver') coverageOptions.coverageProvider = 'v8';
+
   const coverageReport = new CoverageReport(coverageOptions);
   coverageReport.cleanCache();
 

package.json

@@ -104,7 +104,7 @@
     "lodash.merge": "4.6.2",
     "mkdirp": "1.0.4",
     "mocha": "10.4.0",
-    "monocart-coverage-reports": "2.7.4",
+    "monocart-coverage-reports": "2.8.2",
     "ms": "2.1.3",
     "ora-classic": "5.4.2",
     "pactum": "3.6.7",
@@ -179,4 +179,4 @@
       "strict": false
     }
   }
-}
+}

test/acceptance/codecept.WebDriver.devtools.coverage.js

@@ -0,0 +1,49 @@
+const TestHelper = require('../support/TestHelper');
+
+module.exports.config = {
+  tests: './*_test.js',
+  timeout: 10000,
+  output: './output',
+  helpers: {
+    WebDriver: {
+      url: TestHelper.siteUrl(),
+      browser: 'Chromium',
+      windowSize: '500x700',
+      devtoolsProtocol: true,
+      waitForTimeout: 5000,
+      capabilities: {
+        chromeOptions: {
+          args: ['--headless', '--disable-gpu', '--window-size=500,700'],
+        },
+      },
+    },
+    ScreenshotSessionHelper: {
+      require: '../support/ScreenshotSessionHelper.js',
+      outputPath: './output',
+    },
+    Expect: {},
+  },
+  include: {},
+  mocha: {},
+  name: 'acceptance',
+  plugins: {
+    screenshotOnFail: {
+      enabled: true,
+    },
+    coverage: {
+      enabled: true,
+      debug: true,
+      name: 'CodeceptJS Coverage Report',
+      sourceFilter: '**/src/**',
+      sourcePath: {
+        'todomvc-react/': '',
+        'todomvc.com/examples/react/': '',
+      },
+      outputDir: 'output/coverage',
+    },
+  },
+  gherkin: {
+    features: './gherkin/*.feature',
+    steps: ['./gherkin/steps.js'],
+  },
+};

test/plugin/plugin_test.js

@@ -38,7 +38,23 @@ describe('CodeceptJS plugin', function () {
       expect(lines).toEqual(
         expect.arrayContaining([
           expect.stringContaining('writing output/coverage'),
-          expect.stringContaining('generated coverage reports: output/coverage/index.html'),
+          expect.stringContaining('generated coverage reports:'),
+          expect.stringContaining('output/coverage/index.html')
+        ]),
+      );
+      expect(err).toBeFalsy();
+      done();
+    });
+  });
+
+  it('should generate the coverage report - WebDriver - Devtools protocol', (done) => {
+    exec(`${config_run_config('codecept.WebDriver.devtools.coverage.js', '@coverage')} --debug`, (err, stdout) => {
+      const lines = stdout.split('\n');
+      expect(lines).toEqual(
+        expect.arrayContaining([
+          expect.stringContaining('writing output/coverage'),
+          expect.stringContaining('generated coverage reports:'),
+          expect.stringContaining('output/coverage/index.html')
         ]),
       );
       expect(err).toBeFalsy();