chore(integration): Improve Playwright logging (#2243)

* chore(repo): Use other playwright reporters

* chore(repo): Use colored text & not bg

* chore(repo): Remove white from choices

* chore(repo): Add bright colors

integration/models/applicationConfig.ts

@@ -16,7 +16,7 @@ export const applicationConfig = () => {
   const files = new Map<string, string>();
   const scripts: Scripts = { dev: 'npm run dev', serve: 'npm run serve', build: 'npm run build', setup: 'npm i' };
   const envFormatters = { public: (key: string) => key, private: (key: string) => key };
-  const logger = createLogger({ prefix: 'appConfig', color: 'bgYellow' });
+  const logger = createLogger({ prefix: 'appConfig', color: 'yellow' });
   const dependencies = new Map<string, string>();
 
   const self = {

integration/playwright.config.ts

@@ -19,7 +19,7 @@ export const common: PlaywrightTestConfig = {
   timeout: process.env.CI ? 90000 : 30000,
   maxFailures: process.env.CI ? 1 : undefined,
   workers: process.env.CI ? numAvailableWorkers : '70%',
-  reporter: [[process.env.CI ? 'html' : 'line', { open: 'never' }]] as any,
+  reporter: process.env.CI ? 'line' : 'list',
   use: {
     trace: 'on-first-retry',
     bypassCSP: true, // We probably need to limit this to specific tests

integration/scripts/logger.ts

@@ -1,23 +1,36 @@
 /* eslint-disable turbo/no-undeclared-env-vars */
 import { default as chalk } from 'chalk';
 
-const getRandomChalkBgColor = () => {
-  const colors = ['bgRed', 'bgGreen', 'bgYellow', 'bgBlue', 'bgMagenta', 'bgCyan', 'bgWhite'];
+const getRandomChalkColor = () => {
+  const colors = [
+    'red',
+    'green',
+    'yellow',
+    'blue',
+    'magenta',
+    'cyan',
+    'redBright',
+    'greenBright',
+    'yellowBright',
+    'blueBright',
+    'magentaBright',
+    'cyanBright',
+  ];
   return colors[Math.floor(Math.random() * colors.length)];
 };
 
 type CreateLoggerOptions = { prefix: string; color?: string };
 export const createLogger = (opts: CreateLoggerOptions) => {
   const { color, prefix } = opts;
-  const prefixBgColor = color || getRandomChalkBgColor();
+  const prefixColor = color || getRandomChalkColor();
   return {
     info: (msg: string) => {
       if (process.env.DEBUG) {
-        console.info(`${chalk[prefixBgColor](`[${prefix}]`)} ${msg}`);
+        console.info(`${chalk[prefixColor](`[${prefix}]`)} ${msg}`);
       }
     },
     child: (childOpts: CreateLoggerOptions) => {
-      return createLogger({ prefix: `${prefix} :: ${childOpts.prefix}`, color: prefixBgColor });
+      return createLogger({ prefix: `${prefix} :: ${childOpts.prefix}`, color: prefixColor });
     },
   };
 };