Enable test coverage for playwright tests.

.github/workflows/ci.yml

@@ -161,6 +161,7 @@ jobs:
     env:
       NODE_TLS_REJECT_UNAUTHORIZED: 0
       AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      COVERAGE: 1
     strategy:
       fail-fast: false
       matrix:
@@ -217,6 +218,8 @@ jobs:
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
       - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=3
+      - name: "Generate code coverage report for shard ${{ matrix['shardIndex'] }}"
+        run: npx nyc report --reporter=html --reporter=text --report-dir=coverage/shard-${{ matrix.shardIndex }}
       - name: Upload blob report to GitHub Actions Artifacts
         if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v4
@@ -224,6 +227,13 @@ jobs:
           name: blob-report-${{ matrix.shardIndex }}
           path: blob-report
           retention-days: 1
+      - name: Upload coverage report to GitHub Actions Artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report-${{ matrix.shardIndex }}
+          path: coverage/shard-${{ matrix.shardIndex }}
+          retention-days: 1
 
   merge-playwright-reports:
     name: "Merge Playwright Reports"
@@ -255,4 +265,4 @@ jobs:
         with:
           name: html-report--attempt-${{ github.run_attempt }}
           path: playwright-report
-          retention-days: 14
+          retention-days: 14

.gitignore

@@ -22,3 +22,5 @@ src/Localization/Keys.generated.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.nyc_output/
+coverage-e2e/

package.json

@@ -171,10 +171,12 @@
     "@webpack-cli/serve": "2.0.5",
     "babel-jest": "29.7.0",
     "babel-loader": "8.1.0",
+    "babel-plugin-istanbul": "7.0.1",
     "brace-expansion": "1.1.12",
     "buffer": "5.1.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "create-file-webpack": "1.0.2",
+    "cross-env": "10.1.0",
     "css-loader": "6.8.1",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.8",
@@ -204,6 +206,7 @@
     "mini-css-extract-plugin": "2.1.0",
     "monaco-editor-webpack-plugin": "7.1.0",
     "node-fetch": "2.6.7",
+    "nyc": "18.0.0",
     "prettier": "3.0.3",
     "process": "0.11.10",
     "querystring-es3": "0.2.1",
@@ -238,6 +241,9 @@
     "test": "rimraf coverage && jest",
     "test:debug": "jest --runInBand",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
+    "test:e2e:coverage": "cross-env COVERAGE=1 npx playwright test",
+    "test:e2e:coverage:report": "nyc report --reporter=html --reporter=text --report-dir=coverage-e2e",
+    "start:coverage": "cross-env COVERAGE=1 webpack serve --mode development",
     "test:file": "jest --coverage=false",
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
@@ -271,6 +277,22 @@
     "url": "https://github.com/Azure/cosmos-explorer/issues"
   },
   "homepage": "https://github.com/Azure/cosmos-explorer",
+  "nyc": {
+    "report-dir": "coverage-e2e",
+    "temp-dir": ".nyc_output",
+    "include": [
+      "src/**"
+    ],
+    "exclude": [
+      "node_modules",
+      "test"
+    ],
+    "reporter": [
+      "text",
+      "html",
+      "lcov"
+    ]
+  },
   "prettier": {
     "printWidth": 120,
     "endOfLine": "auto"

test/cassandra/container.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 

test/coverage.ts

@@ -0,0 +1,68 @@
+/**
+ * Custom Playwright fixture that collects Istanbul code coverage after each test.
+ *
+ * When the app is built with COVERAGE=1 (which enables babel-plugin-istanbul),
+ * the bundled code exposes `window.__coverage__`. This fixture grabs that object
+ * after every test and writes it to `.nyc_output/` so `nyc report` can merge and
+ * render a coverage report.
+ *
+ * Usage: In spec files, replace
+ *   import { test, expect } from "@playwright/test";
+ * with
+ *   import { test, expect } from "../coverage";   // adjust relative path
+ */
+import { test as base, Browser, expect, Frame, Locator, Page } from "@playwright/test";
+import * as crypto from "crypto";
+import * as fs from "fs";
+import * as path from "path";
+
+const nycOutputDir = path.join(__dirname, "..", ".nyc_output");
+
+/**
+ * Try to pull `window.__coverage__` from every frame in the page.
+ * The app loads inside an iframe in testExplorer.html, so we check
+ * both the main page and all child frames.
+ */
+async function collectCoverage(page: Page): Promise<Record<string, unknown> | null> {
+  // Try main frame first
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cov = await page.evaluate(() => (window as Record<string, any>).__coverage__);
+    if (cov && Object.keys(cov).length > 0) {
+      return cov as Record<string, unknown>;
+    }
+  } catch {
+    // page may have been closed already
+  }
+
+  // Try child frames (the explorer often runs inside an iframe)
+  for (const frame of page.frames()) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const cov = await frame.evaluate(() => (window as Record<string, any>).__coverage__);
+      if (cov && Object.keys(cov).length > 0) {
+        return cov as Record<string, unknown>;
+      }
+    } catch {
+      // frame may be detached
+    }
+  }
+
+  return null;
+}
+
+const test = base.extend({
+  page: async ({ page }, use) => {
+    await use(page);
+
+    const coverage = await collectCoverage(page);
+    if (coverage) {
+      fs.mkdirSync(nycOutputDir, { recursive: true });
+      const id = crypto.randomBytes(8).toString("hex");
+      fs.writeFileSync(path.join(nycOutputDir, `coverage-${id}.json`), JSON.stringify(coverage));
+    }
+  },
+});
+
+export { Browser, expect, Frame, Locator, Page, test };
+export type { Page as PageType };

test/gremlin/container.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 

test/mongo/container.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 

test/mongo/document.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { setupCORSBypass } from "../CORSBypass";
 import { CommandBarButton, DataExplorer, DocumentsTab, TestAccount } from "../fx";

test/mongo/pagination.spec.ts

@@ -1,6 +1,6 @@
-import { expect, test } from "@playwright/test";
 import { setupCORSBypass } from "../CORSBypass";
-import { DataExplorer, QueryTab, TestAccount, CommandBarButton, Editor } from "../fx";
+import { expect, test } from "../coverage";
+import { CommandBarButton, DataExplorer, Editor, QueryTab, TestAccount } from "../fx";
 import { serializeMongoToJson } from "../testData";
 
 const databaseId = "test-e2etests-mongo-pagination";

test/sql/container.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 

test/sql/containercopy/offlineMigration.spec.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { expect, Frame, Locator, Page, test } from "@playwright/test";
 import { truncateName } from "../../../src/Explorer/ContainerCopy/CopyJobUtils";
+import { expect, Frame, Locator, Page, test } from "../../coverage";
 import {
   ContainerCopy,
   getAccountName,

test/sql/containercopy/onlineMigration.spec.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { expect, Frame, Locator, Page, test } from "@playwright/test";
+import { expect, Frame, Locator, Page, test } from "../../coverage";
 import {
   ContainerCopy,
   getAccountName,

test/sql/containercopy/permissionsScreen.spec.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { expect, Frame, Locator, Page, test } from "@playwright/test";
 import { set } from "lodash";
+import { expect, Frame, Locator, Page, test } from "../../coverage";
 import { ContainerCopy, getAccountName, TestAccount } from "../../fx";
 
 const VISIBLE_TIMEOUT_MS = 30 * 1000;

test/sql/document.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { existsSync, mkdtempSync, rmdirSync, unlinkSync, writeFileSync } from "fs";
 import { tmpdir } from "os";

test/sql/indexAdvisor.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test, type Page } from "@playwright/test";
+import { expect, test, type Page } from "../coverage";
 
 import { CommandBarButton, DataExplorer, TestAccount } from "../fx";
 import { createTestSQLContainer, TestContainerContext } from "../testData";

test/sql/query.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { CommandBarButton, DataExplorer, Editor, QueryTab, TestAccount } from "../fx";
 import { TestContainerContext, TestItem, createTestSQLContainer } from "../testData";

test/sql/resourceToken.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
 import { CosmosClient, PermissionMode } from "@azure/cosmos";

test/sql/scaleAndSettings/changePartitionKey.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../../coverage";
 import { DataExplorer, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scaleAndSettings/computedProperties.spec.ts

@@ -1,5 +1,5 @@
-import { expect, Page, test } from "@playwright/test";
 import * as DataModels from "../../../src/Contracts/DataModels";
+import { expect, Page, test } from "../../coverage";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scaleAndSettings/dataMasking.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test, type Page } from "@playwright/test";
+import { expect, test, type Page } from "../../coverage";
 import { DataExplorer, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scaleAndSettings/scale.spec.ts

@@ -1,4 +1,4 @@
-import { Browser, expect, Locator, Page, test } from "@playwright/test";
+import { Browser, expect, Locator, Page, test } from "../../coverage";
 import {
   CommandBarButton,
   DataExplorer,

test/sql/scaleAndSettings/settings.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../../coverage";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scaleAndSettings/sharedThroughput.spec.ts

@@ -1,4 +1,4 @@
-import { Locator, expect, test } from "@playwright/test";
+import { Locator, expect, test } from "../../coverage";
 import {
   CommandBarButton,
   DataExplorer,

test/sql/scripts/storedProcedure.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../../coverage";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scripts/trigger.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../../coverage";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scripts/userDefinedFunction.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../../coverage";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/selfServeExample.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 import { DataExplorer, TestAccount } from "../fx";
 
 test("Self Serve", async ({ page, browserName }) => {

test/tables/container.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 

webpack.config.js

@@ -64,17 +64,27 @@ const htmlRule = {
   ],
 };
 
-// We compile our own code with ts-loader
+// We compile our own code with ts-loader (or babel-loader with istanbul when COVERAGE=1)
 const typescriptRule = {
   test: /\.tsx?$/,
-  use: [
+  use: process.env.COVERAGE
-    {
+    ? [
-      loader: "ts-loader",
+        {
-      options: {
+          loader: "babel-loader",
-        transpileOnly: true,
+          options: {
-      },
+            presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript"],
-    },
+            plugins: [["istanbul", { extension: [".ts", ".tsx"] }]],
-  ],
+          },
+        },
+      ]
+    : [
+        {
+          loader: "ts-loader",
+          options: {
+            transpileOnly: true,
+          },
+        },
+      ],
   exclude: /node_modules/,
 };
 
@@ -103,7 +113,10 @@ module.exports = function (_env = {}, argv = {}) {
     envVars.NODE_ENV = "development";
     envVars.AZURE_CLIENT_SECRET = AZURE_CLIENT_SECRET || null;
     envVars.RESOURCE_GROUP = RESOURCE_GROUP;
-    typescriptRule.use[0].options.compilerOptions = { target: "ES2018" };
+    // compilerOptions is a ts-loader option; skip it when using babel-loader for coverage
+    if (!process.env.COVERAGE) {
+      typescriptRule.use[0].options.compilerOptions = { target: "ES2018" };
+    }
   }
 
   const entry = {