fix: e2e testing not working in CI (#421)

* fix: correct browseer tooling not running in test mode

* ci: correct pre-install requirements

* fix: clear reporter folder clash error

* fix: e2e CI missing dependencies error

Co-authored-by: TED Vortex <ted.vortex@gmail.com>

.gitignore

@@ -276,9 +276,3 @@ build
 **/__snapshots__
 .env*
 !.env
-
-#local history folder
-/.history
-/test-results/
-/playwright-report/
-/playwright/.cache/

package.json

@@ -27,6 +27,7 @@
     "types:auto-check": "npm run types:auto-add -- --dry",
     "preinstall": "npx @open-sauced/check-engines",
     "prestart": "npx @open-sauced/check-engines",
+    "pretest": "npm run test:e2e-install",
     "push": "npx @open-sauced/conventional-commit",
     "start": "npx vite",
     "build": "npx tsc && npx vite build",
@@ -35,11 +36,15 @@
     "build:analyze": "npm run build -- --mode report",
     "build:svgo": "npx svgo src/**/*.svg --config ./.svgorc.cjs",
     "build:squoosh": "node .squoosh.mjs '{src,public}/**/*.{jpg,jpeg,png,gif}'",
-    "test": "npx vitest",
-    "test:watch": "npm run test -- --watch",
-    "test:all": "npm run test -- --silent --watchAll=false",
-    "test:coverage": "npx vitest run --coverage",
-    "test:e2e": "npx playwright test",
+    "test": "npm run test:all && npm run test:e2e",
+    "test:vitest": "npx vitest",
+    "test:watch": "npm run test:vitest -- --watch",
+    "test:all": "npm run test:vitest -- --silent --watch=false",
+    "test:coverage": "npm run test:vitest -- --coverage",
+    "test:playwright": "npx playwright",
+    "test:e2e-install": "npm run test:playwright -- install && npx playwright install-deps",
+    "test:e2e": "npm run test:playwright -- test",
+    "test:e2e-report": "npm run test:playwright -- show-report",
     "lint": "npx eslint . --report-unused-disable-directives",
     "format": "npm run lint -- --fix"
   },

playwright.config.ts

@@ -1,17 +1,11 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
-  testDir: './src/e2e',
+  testDir: './src/e2e-tests',
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
   expect: {
@@ -30,7 +24,12 @@ const config: PlaywrightTestConfig = {
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [
+    ['html', {
+      outputFolder: 'coverage/e2e-html',
+      open: "on-failure",
+    }]
+  ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
@@ -95,7 +94,7 @@ const config: PlaywrightTestConfig = {
   ],
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  // outputDir: 'test-results/',
+  outputDir: 'coverage/e2e-artifacts',
 
   /* Run your local dev server before starting the tests */
   webServer: {