wip: fix CI Playwright test timeout

- Add serve package for static file serving - Modify fixture-server.js to serve React build + API fixtures - Update playwright.config.ts to use combined server on port 8001 - Add npm build step to CircleCI before Playwright tests Tests still fail locally - React app renders blank page. Debugging needed to identify missing API endpoints.
2026-01-10 09:34:38 -06:00
8 changed files with 700 additions and 68 deletions
@@ -25,6 +25,9 @@ jobs:
          key: npm-deps-{{ checksum "package-lock.json" }}
          paths:
            - node_modules
+      - run:
+          name: Build React app
+          command: npm run build
      - run:
          name: Run Playwright e2e tests
          command: npx playwright test
@@ -0,0 +1,38 @@
+# PLAN: Fix CI Playwright Tests
+
+## Goal
+
+Fix Playwright e2e tests failing in CircleCI due to webserver timeout.
+
+## Problem
+
+The React dev server (`npm start`) times out in CI because webpack compilation takes >120s in the Playwright Docker container.
+
+## Approach
+
+Combine the fixture server to serve both:
+1. Static React build (from `build/` directory)
+2. API fixtures (from `src/test/resources/fixtures/`)
+
+This eliminates the need for a proxy and speeds up startup.
+
+## Changes Made
+
+1. **package.json** - Added `serve` package (may not be needed now)
+2. **e2e/fixture-server.js** - Added static file serving for React build
+3. **playwright.config.ts** - Simplified to use single server on port 8001
+4. **.circleci/config.yml** - Added `npm run build` step before tests
+
+## Current Status: IN PROGRESS
+
+Tests still fail locally - React app renders blank page. Need to debug:
+- Check if all required API endpoints are mocked
+- Verify static file paths resolve correctly
+- Check browser console for JS errors
+
+## Next Steps
+
+1. Run fixture server manually, open browser, check console errors
+2. Compare working Selenium setup to see what's different
+3. May need to add more API endpoint stubs to fixture-server.js
+4. Test with `npx playwright test --debug` for interactive debugging
@@ -6,51 +6,71 @@

 ## Current Status

-All work complete. CI passing. Snapshot published.
+**IN PROGRESS:** Fixing CI Playwright test failures.

-**Latest Commits:**
- `bb6d0dd` - docs: update session state after Playwright integration complete
- `b72e0f6` - feat(test): integrate Playwright e2e tests (#127)
+The `publish_snapshot` workflow (pipeline #1361) failed because the React dev server times out in CI (120s not enough for webpack compilation).
+
+## What Was Done This Session
+
+1. Diagnosed CI failure - webserver timeout in `playwright_tests` job
+2. Added `serve` package for static file serving
+3. Modified `e2e/fixture-server.js` to serve both static React build AND API fixtures
+4. Updated `playwright.config.ts` to use single combined server
+5. Updated `.circleci/config.yml` to run `npm run build` before tests
+6. Tests still fail locally - React app renders blank page (debugging needed)
+
+## Files Modified (Uncommitted)
+
+- `package.json` - Added serve dependency
+- `package-lock.json` - Updated
+- `e2e/fixture-server.js` - Added static file serving
+- `playwright.config.ts` - Simplified to single server
+- `.circleci/config.yml` - Added build step
+
+## Next Steps (Resume Here)
+
+1. **Debug blank page issue:**
+   - Run `node e2e/fixture-server.js` manually
+   - Open http://localhost:8001 in browser
+   - Check browser console for JavaScript errors
+   - May need to add missing API endpoint stubs
+
+2. **Compare with Selenium setup:**
+   - Selenium tests work - check what's different
+   - Look at `QSeleniumJavalin.java` for endpoint list
+
+3. **Test with Playwright debug mode:**
+   - `npx playwright test --debug`
+   - Step through to see what requests fail
+
+4. **Once tests pass locally:**
+   - Commit and push
+   - Monitor CI pipeline

 ## Test Status

 | Suite | Tests | Status |
 |-------|-------|--------|
-| Playwright e2e | 26 | PASS |
+| Playwright e2e | 26 | FAILING (blank page) |
 | Selenium fixture-based | 115 | PASS |
 | Java unit | 3 | PASS |
-| Selenium full-server | 19 | Blocked (infrastructure) |
-
-## CI/CD Status
-
- `publish_snapshot` workflow: PASS
- Snapshot JAR published to registry
- GitHub discussion #340 updated with release notes
-
-## Recent Work Completed
-
- PR #127: Playwright e2e test integration
- Unified `run-tests.sh` script for all test execution
- CircleCI Playwright job added to pipeline
- Old feature branches cleaned up (v1/v2 theme branches deleted)
-
-## Active Plans
-
-None - all plans complete.
-
-## Next Steps
-
-No pending work. Ready for new tasks.

 ## Quick Reference

 ```bash
-# Run all tests
-./run-tests.sh
+# Build React app (required before Playwright tests)
+npm run build

-# Run Playwright only
-./run-tests.sh --playwright
+# Run fixture server manually for debugging
+node e2e/fixture-server.js

-# Run Selenium only
-./run-tests.sh --selenium
+# Run Playwright in debug mode
+npx playwright test --debug
+
+# Run single test
+npx playwright test --grep "primaryColor"
 ```
+
+## Plan Document
+
+See `docs/PLAN-ci-playwright-fix.md` for detailed approach.
@@ -4,7 +4,17 @@

 ## Active Tasks

-None - all tasks complete.
+### Fix CI Playwright Tests (IN PROGRESS)
+
+- [x] Added `serve` package for static file serving
+- [x] Updated playwright.config.ts to use combined server approach
+- [x] Updated CircleCI to pre-build React app before tests
+- [x] Modified fixture-server.js to serve static files
+- [ ] **Debug why React app renders blank page**
+- [ ] Test locally with `--debug` flag
+- [ ] Check browser console for JS errors
+- [ ] Verify all required API endpoints are mocked
+- [ ] Push fix once tests pass locally

 ## Completed (Recent)

@@ -12,28 +22,18 @@ None - all tasks complete.
 - [x] **Playwright tests integrated** - 26 tests from v1 branch
 - [x] **run-tests.sh improved** - Unified script for Playwright + Selenium
 - [x] **CircleCI config updated** - Playwright job added to pipelines
- [x] **Snapshot published** - publish_snapshot workflow passed
- [x] **Old branches cleaned up** - Deleted v1/v2 theme branches
- [x] **GitHub discussion updated** - Added QFMD changes to #340
-
-## Completed (Prior)
-
- [x] Pluggable themes system (PR #125)
- [x] CSS selectors system (PR #125)
- [x] Virtual fields support (PR #123)
- [x] Form adjusters (PR #122)
- [x] CookiesProvider fix
- [x] chromedriver fix

 ## Test Status

 | Suite | Tests | Status |
 |-------|-------|--------|
-| Playwright e2e | 26 | PASS |
+| Playwright e2e | 26 | FAILING (blank page) |
 | Selenium fixture-based | 115 | PASS |
 | Java unit | 3 | PASS |
 | Selenium full-server | 19 | Blocked (infrastructure) |

 ## Known Issues

+- CI Playwright tests fail - webserver timeout (being fixed)
+- React app renders blank in combined fixture server (debugging)
 - `seleniumwithqapplication` tests hang locally (require full QQQ backend)
@@ -1,7 +1,11 @@
 /**
- * Simple fixture server for Playwright e2e tests.
- * Serves fixture JSON files from src/test/resources/fixtures/
- * mimicking the Javalin mock server used in Selenium tests.
+ * Combined fixture server for Playwright e2e tests.
+ * Serves:
+ * 1. Static React build from build/ directory
+ * 2. Fixture JSON files from src/test/resources/fixtures/
+ *
+ * This allows e2e tests to run against a production build
+ * without needing a proxy between frontend and API.
 */
 const http = require('http');
 const fs = require('fs');
@@ -9,10 +13,29 @@ const path = require('path');

 const PORT = process.env.FIXTURE_PORT || 8001;
 const FIXTURES_DIR = path.join(__dirname, '..', 'src', 'test', 'resources', 'fixtures');
+const BUILD_DIR = path.join(__dirname, '..', 'build');

 // Determine which metaData fixture to serve based on env var
 const FIXTURE_NAME = process.env.THEME_FIXTURE || 'withFullCustomTheme';

+// MIME types for static file serving
+const MIME_TYPES = {
+   '.html': 'text/html',
+   '.js': 'application/javascript',
+   '.css': 'text/css',
+   '.json': 'application/json',
+   '.png': 'image/png',
+   '.jpg': 'image/jpeg',
+   '.jpeg': 'image/jpeg',
+   '.gif': 'image/gif',
+   '.svg': 'image/svg+xml',
+   '.ico': 'image/x-icon',
+   '.woff': 'font/woff',
+   '.woff2': 'font/woff2',
+   '.ttf': 'font/ttf',
+   '.map': 'application/json'
+};
+
 function loadFixture(relativePath) {
   const fixturePath = path.join(FIXTURES_DIR, relativePath);
   if (fs.existsSync(fixturePath)) {
@@ -32,6 +55,39 @@ function serve404(res, pathname) {
   res.end(JSON.stringify({ error: 'Not found', path: pathname }));
 }

+function serveStaticFile(res, pathname) {
+   // Map pathname to file in build directory
+   let filePath = path.join(BUILD_DIR, pathname);
+
+   // For SPA routing, serve index.html for non-file paths
+   if (!path.extname(pathname)) {
+      filePath = path.join(BUILD_DIR, 'index.html');
+   }
+
+   // Check if file exists
+   if (!fs.existsSync(filePath)) {
+      // Fall back to index.html for SPA routing
+      filePath = path.join(BUILD_DIR, 'index.html');
+   }
+
+   if (!fs.existsSync(filePath)) {
+      return false;
+   }
+
+   const ext = path.extname(filePath);
+   const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+
+   try {
+      const content = fs.readFileSync(filePath);
+      res.writeHead(200, { 'Content-Type': contentType });
+      res.end(content);
+      return true;
+   } catch (err) {
+      console.error(`Error reading file ${filePath}:`, err);
+      return false;
+   }
+}
+
 const server = http.createServer((req, res) => {
   // Enable CORS for local development
   res.setHeader('Access-Control-Allow-Origin', '*');
@@ -157,6 +213,11 @@ const server = http.createServer((req, res) => {
      return;
   }

+   // Try serving static file (for React build)
+   if (serveStaticFile(res, pathname)) {
+      return;
+   }
+
   // Default 404
   serve404(res, pathname);
 });
@@ -79,6 +79,7 @@
        "eslint-plugin-import": "2.25.4",
        "eslint-plugin-react": "7.28.0",
        "react-scripts": "5.0.1",
+        "serve": "^14.2.5",
        "typescript": "4.9.4"
      }
    },
@@ -6543,6 +6544,13 @@
      "dev": true,
      "license": "Apache-2.0"
    },
+    "node_modules/@zeit/schemas": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.36.0.tgz",
+      "integrity": "sha512-7kjMwcChYEzMKjeex9ZFXkt1AyNov9R5HZtjBKVsmVpw7pa7ZtlCGvCBC2vnnXctaYN+aRI61HjIqeetZW5ROg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/abab": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -6742,6 +6750,16 @@
        "ajv": "^8.8.2"
      }
    },
+    "node_modules/ansi-align": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
+      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.1.0"
+      }
+    },
    "node_modules/ansi-escapes": {
      "version": "4.3.2",
      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -6859,6 +6877,27 @@
      "integrity": "sha512-SlI+nLMQDzCZfS39ihzjGp3JNBQfJXyMi6cg9tkLOCPVErgFsUIAEdO9IezR7kbP5Xd0ozcPNQBkf9TO5cHgWw==",
      "license": "BSD-2-Clause"
    },
+    "node_modules/arch": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
+      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/arg": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -7606,6 +7645,146 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/boxen": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz",
+      "integrity": "sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-align": "^3.0.1",
+        "camelcase": "^7.0.0",
+        "chalk": "^5.0.1",
+        "cli-boxes": "^3.0.0",
+        "string-width": "^5.1.2",
+        "type-fest": "^2.13.0",
+        "widest-line": "^4.0.1",
+        "wrap-ansi": "^8.0.1"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/camelcase": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz",
+      "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/chalk": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
    "node_modules/brace-expansion": {
      "version": "1.1.12",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -7907,6 +8086,22 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/chalk-template": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
+      "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk-template?sponsor=1"
+      }
+    },
    "node_modules/char-regex": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -8074,6 +8269,37 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/cli-boxes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
+      "integrity": "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/clipboardy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz",
+      "integrity": "sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "arch": "^2.2.0",
+        "execa": "^5.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/cliui": {
      "version": "8.0.1",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -9049,6 +9275,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -9521,6 +9757,13 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -12985,6 +13228,19 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/is-port-reachable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-port-reachable/-/is-port-reachable-4.0.0.tgz",
+      "integrity": "sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/is-potential-custom-element-name": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -16535,6 +16791,13 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/path-is-inside": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)"
+    },
    "node_modules/path-key": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -18451,6 +18714,32 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/react": {
      "version": "18.0.0",
      "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
@@ -19208,6 +19497,30 @@
        "node": ">=4"
      }
    },
+    "node_modules/registry-auth-token": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
+      "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "rc": "^1.1.6",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/registry-url": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
+      "integrity": "sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "rc": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/regjsgen": {
      "version": "0.8.0",
      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
@@ -19931,6 +20244,108 @@
        "randombytes": "^2.1.0"
      }
    },
+    "node_modules/serve": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.5.tgz",
+      "integrity": "sha512-Qn/qMkzCcMFVPb60E/hQy+iRLpiU8PamOfOSYoAHmmF+fFFmpPpqa6Oci2iWYpTdOUM3VF+TINud7CfbQnsZbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@zeit/schemas": "2.36.0",
+        "ajv": "8.12.0",
+        "arg": "5.0.2",
+        "boxen": "7.0.0",
+        "chalk": "5.0.1",
+        "chalk-template": "0.4.0",
+        "clipboardy": "3.0.0",
+        "compression": "1.8.1",
+        "is-port-reachable": "4.0.0",
+        "serve-handler": "6.1.6",
+        "update-check": "1.5.4"
+      },
+      "bin": {
+        "serve": "build/main.js"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/serve-handler": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.6.tgz",
+      "integrity": "sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.0.0",
+        "content-disposition": "0.5.2",
+        "mime-types": "2.1.18",
+        "minimatch": "3.1.2",
+        "path-is-inside": "1.0.2",
+        "path-to-regexp": "3.3.0",
+        "range-parser": "1.2.0"
+      }
+    },
+    "node_modules/serve-handler/node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/serve-handler/node_modules/content-disposition": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-handler/node_modules/mime-db": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+      "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-handler/node_modules/mime-types": {
+      "version": "2.1.18",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+      "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "~1.33.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-handler/node_modules/path-to-regexp": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.3.0.tgz",
+      "integrity": "sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/serve-handler/node_modules/range-parser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+      "integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/serve-index": {
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
@@ -20033,6 +20448,36 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/serve/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/serve/node_modules/chalk": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz",
+      "integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -21906,6 +22351,17 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/update-check": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.4.tgz",
+      "integrity": "sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "registry-auth-token": "3.3.2",
+        "registry-url": "3.1.0"
+      }
+    },
    "node_modules/uri-js": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -22546,6 +23002,69 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/widest-line": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",
+      "integrity": "sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/widest-line/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/widest-line/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/widest-line/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
    "node_modules/word-wrap": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -101,18 +101,19 @@
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
    "@playwright/test": "^1.57.0",
-    "concurrently": "^8.2.0",
    "@svgr/webpack": "6.5.1",
    "@types/chroma-js": "2.1.3",
    "@types/faker": "5.5.9",
    "@types/react-table": "7.7.9",
    "@typescript-eslint/eslint-plugin": "5.10.2",
    "@typescript-eslint/parser": "5.10.2",
+    "concurrently": "^8.2.0",
    "eslint": "8.8.0",
    "eslint-import-resolver-typescript": "2.5.0",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-react": "7.28.0",
    "react-scripts": "5.0.1",
+    "serve": "^14.2.5",
    "typescript": "4.9.4"
  },
  "overrides": {
@@ -9,10 +9,9 @@ export default defineConfig({
  reporter: [['html', { open: 'never' }], ['list']],
  timeout: 60000,
  use: {
-    baseURL: 'https://localhost:3001',
+    baseURL: 'http://localhost:8001',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
-    ignoreHTTPSErrors: true,
  },
  projects: [
    {
@@ -20,19 +19,10 @@ export default defineConfig({
      use: { ...devices['Desktop Chrome'] },
    },
  ],
-  webServer: [
-    {
-      command: 'node e2e/fixture-server.js',
-      url: 'http://localhost:8001/metaData',
-      reuseExistingServer: true,
-      timeout: 10000,
-    },
-    {
-      command: 'HTTPS=true PORT=3001 REACT_APP_PROXY_LOCALHOST_PORT=8001 npm start',
-      url: 'https://localhost:3001',
-      reuseExistingServer: true,
-      timeout: 120000,
-      ignoreHTTPSErrors: true,
-    },
-  ],
+  webServer: {
+    command: 'node e2e/fixture-server.js',
+    url: 'http://localhost:8001',
+    reuseExistingServer: !process.env.CI,
+    timeout: 30000,
+  },
 });