From c6cacc567eacc66c022fc1bfdfc39aa81de0bdb0 Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Tue, 4 Jun 2024 16:20:54 +0800
Subject: [PATCH 01/13] update scripts execution

---
 .github/workflows/call-run-tests.yml |  2 +-
 .github/workflows/donation-tests.yml |  2 +-
 .gitignore                           |  1 +
 README.md                            | 60 +++++++++++---------------
 executeTests.js                      | 52 +++++++++++++++++++++++
 package-lock.json                    | 63 +++++++++++++---------------
 package.json                         | 45 +++-----------------
 7 files changed, 113 insertions(+), 112 deletions(-)
 create mode 100644 executeTests.js

diff --git a/.github/workflows/call-run-tests.yml b/.github/workflows/call-run-tests.yml
index 3d9718d4..dddf0257 100644
--- a/.github/workflows/call-run-tests.yml
+++ b/.github/workflows/call-run-tests.yml
@@ -21,7 +21,7 @@ jobs:
         run: npx playwright install --with-deps
 
       - name: Run Playwright tests
-        run: ./run-tests.sh
+        run: npm run test
 
       - uses: actions/upload-artifact@v3
         if: always()
diff --git a/.github/workflows/donation-tests.yml b/.github/workflows/donation-tests.yml
index 993d68a1..94a5893d 100644
--- a/.github/workflows/donation-tests.yml
+++ b/.github/workflows/donation-tests.yml
@@ -26,4 +26,4 @@ jobs:
         run: npx playwright install --with-deps
 
       - name: Run Donation Tests
-        run: npm run test:donation
+        run: npm run test donation
diff --git a/.gitignore b/.gitignore
index f6a317df..a3cf0813 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ node_modules/
 /playwright-report
 /playwright/.cache
 /playwright/.auth
+/playwright-summary
 
 .env
 *.err
diff --git a/README.md b/README.md
index 819214dd..37216fc2 100644
--- a/README.md
+++ b/README.md
@@ -2,62 +2,51 @@
 
 # End to end tests for Archive.org using [Playwright](https://playwright.dev/)
 
+
 ## (Optional) BrowserStack Local Setup
 
-- login to BrowserStack and retrieve the account username and access key, see documentation [here](https://www.browserstack.com/docs/automate/playwright/getting-started/nodejs/test-runner)
+- Login to BrowserStack and retrieve the account username and access key, see documentation [here](https://www.browserstack.com/docs/automate/playwright/getting-started/nodejs/test-runner)
 
 
-## Running tests locally
+## Local Setup
 
-- install dependencies:
+- Install dependencies:
 
     `npm i`
 
-- install Playwright browser libs:
+- Install Playwright browser libs:
 
     `npx playwright install`
 
-- run all the tests in headless mode and generate 1 whole test report:
-
-    `npm run test`
+- Create a `.env` file by copying the contents from `.env.sample` and add the respective values you want to use for testing
 
-- run all the tests in headless mode by each category and generate test report by category:
+    - this is required to run tests with loggedIn flows
 
-    `./run-tests.sh`
 
-- run all the tests in headed mode (this will load multiple browsers):
+## Running tests
 
-    `npm run test:headed`
+- Run all tests: `npm run test`
 
-- create a `.env` file by copying the contents from `.env.sample` and add the respective values you want to use for testing
+- Run test by category (sample):
 
+    - This will run a custom script that can take different shell arguments/parameters for the following (arguments arrangement can be jumbled or not in proper order):
+        
+        - test category (by folder structure): 
+            - `about, av, books, collection, details, donation, etc...`
+            - default value: `all`
 
-## Running individual tests by category (headless mode)
+        - test execution mode: 
+            - `headless/headed`
+            - default value: `headless`
 
-- run about tests: `npm run test:about`
-- run av tests: `npm run test:av`
-- run books tests: `npm run test:books`
-- run collection tests: `npm run test:collection`
-- run details tests: `npm run test:details`
-- run home tests: `npm run test:home`
-- run login tests: `npm run test:login`
-- run music tests: `npm run test:music`
-- run search tests: `npm run test:search`
-- run profile tests: `npm run test:profile`
+        - browser: 
+            - `chromium, firefox, webkit`
+            - default value: `chromium`
 
+    - Sample:
 
-## Running individual tests by category (headed mode)
-
-- run about tests: `npm run test:about:headed`
-- run av tests: `npm run test:av:headed`
-- run books tests: `npm run test:books:headed`
-- run collection tests: `npm run test:collection:headed`
-- run details tests: `npm run test:details:headed`
-- run home tests: `npm run test:home:headed`
-- run login tests: `npm run test:login:headed`
-- run music tests: `npm run test:music:headed`
-- run search tests: `npm run test:search:headed`
-- run profile tests: `npm run test:profile:headed`
+        - run all "books" tests in headless mode: `npm run test books`
+        - run all "about" tests in headed mode webkit browser: `npm run test about headed webkit`
 
 
 ## Running tests using VSCode Playwright plugin
@@ -82,7 +71,6 @@
 
 - run: `npm run show:report`
 
-
 ## Reference guide for writing tests
 
 - https://playwright.dev/docs/pom
diff --git a/executeTests.js b/executeTests.js
new file mode 100644
index 00000000..1dc97c28
--- /dev/null
+++ b/executeTests.js
@@ -0,0 +1,52 @@
+const { execSync } = require('child_process');
+
+const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);
+
+function runTest(category = 'all', headed = false, browser = 'chromium') {
+  // Construct the npm run test command based on parameters
+  let command = `CATEGORY=${category} npx playwright test`;
+
+  if (category !== 'all') {
+    command += ` tests/${category}`;
+  }
+
+  if (headed) {
+    command += ` --headed`;
+  }
+
+  if (browser !== 'chromium') {
+    command += ` --project='Desktop - ${capitalizeFirstLetter(browser)}'`;
+  }
+
+  // Execute the command
+  try {
+    console.log(`Executing command: ${command}`);
+    const output = execSync(command, { stdio: 'inherit' });
+    if (output !== null) {
+      console.log(output.toString());
+    }
+  } catch (error) {
+    console.log('error: ', error);
+    console.error(error.stderr ? error.stderr.toString() : error.toString());
+    process.exit(1);
+  }
+}
+
+// Extract parameters from command line arguments
+const args = process.argv.slice(2);
+let category = 'all';
+let headed = false;
+let browser = 'chromium';
+
+// Iterate through arguments to parse them
+args.forEach(arg => {
+  if (arg === 'headed') {
+    headed = true;
+  } else if (arg === 'chromium' || arg === 'firefox' || arg === 'webkit') {
+    browser = arg;
+  } else {
+    category = arg;
+  }
+});
+
+runTest(category, headed, browser);
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 48caf170..24bf6b8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,14 +9,13 @@
       "version": "1.0.0",
       "license": "ISC",
       "devDependencies": {
-        "@playwright/test": "^1.41.2",
+        "@playwright/test": "^1.44.1",
         "@types/node": "^20.11.17",
         "browserstack-local": "^1.4.8",
         "dotenv": "^16.0.3",
         "eslint": "^8.44.0",
         "eslint-config-prettier": "^8.8.0",
         "husky": "^8.0.3",
-        "playwright": "^1.41.2",
         "prettier": "^3.0.0"
       }
     },
@@ -154,12 +153,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz",
-      "integrity": "sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz",
+      "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.41.2"
+        "playwright": "1.44.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1070,12 +1069,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.2.tgz",
-      "integrity": "sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz",
+      "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.41.2"
+        "playwright-core": "1.44.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1087,10 +1086,10 @@
         "fsevents": "2.3.2"
       }
     },
-    "node_modules/playwright/node_modules/playwright-core": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.2.tgz",
-      "integrity": "sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==",
+    "node_modules/playwright-core": {
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz",
+      "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -1491,12 +1490,12 @@
       }
     },
     "@playwright/test": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz",
-      "integrity": "sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz",
+      "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==",
       "dev": true,
       "requires": {
-        "playwright": "1.41.2"
+        "playwright": "1.44.1"
       }
     },
     "@types/node": {
@@ -1518,8 +1517,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "agent-base": {
       "version": "6.0.2",
@@ -1733,8 +1731,7 @@
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-scope": {
       "version": "7.2.0",
@@ -2182,23 +2179,21 @@
       }
     },
     "playwright": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.2.tgz",
-      "integrity": "sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz",
+      "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==",
       "dev": true,
       "requires": {
         "fsevents": "2.3.2",
-        "playwright-core": "1.41.2"
-      },
-      "dependencies": {
-        "playwright-core": {
-          "version": "1.41.2",
-          "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.2.tgz",
-          "integrity": "sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==",
-          "dev": true
-        }
+        "playwright-core": "1.44.1"
       }
     },
+    "playwright-core": {
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz",
+      "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==",
+      "dev": true
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
diff --git a/package.json b/package.json
index e7ab4a72..ae95497c 100644
--- a/package.json
+++ b/package.json
@@ -5,37 +5,11 @@
   "main": "index.js",
   "scripts": {
     "show:report": "npx http-server ./playwright-report",
-    "test": "CATEGORY=all npx playwright test",
+    "test": "node executeTests.js",
     "test:codegen": "npx playwright codegen",
-    "test:chromium": "CATEGORY=allnpx playwright test --project=chromium",
     "test:debug": "CATEGORY=all npx playwright test --debug",
     "test:trace": "CATEGORY=all npx playwright test --config=./playwright.config.ts --trace on",
     "test:ui": "CATEGORY=all npx playwright test --ui",
-    "test:headed": "CATEGORY=all npx playwright test --headed",
-    "test:about": "CATEGORY=about npx playwright test tests/about",
-    "test:av": "CATEGORY=av npx playwright test tests/av",
-    "test:books": "CATEGORY=books npx playwright test tests/books",
-    "test:collection": "CATEGORY=collection npx playwright test tests/collection",
-    "test:details": "CATEGORY=details npx playwright test tests/details",
-    "test:details-lending-bar": "CATEGORY=details npx playwright test tests/details/lending-bar",
-    "test:home": "CATEGORY=home npx playwright test tests/home",
-    "test:login": "CATEGORY=login npx playwright test tests/login",
-    "test:music": "CATEGORY=music npx playwright test tests/music",
-    "test:search": "CATEGORY=search npx playwright test tests/search",
-    "test:profile": "CATEGORY=profile npx playwright test tests/profile",
-    "test:about:headed": "CATEGORY=about npx playwright test tests/about --headed",
-    "test:av:headed": "CATEGORY=av npx playwright test tests/av --headed",
-    "test:books:headed": "CATEGORY=books npx playwright test tests/books --headed",
-    "test:collection:headed": "CATEGORY=collection npx playwright test tests/collection --headed",
-    "test:details:headed": "CATEGORY=details npx playwright test tests/details --headed",
-    "test:details-lending-bar:headed": "CATEGORY=details npx playwright test tests/details/lending-bar --headed",
-    "test:home:headed": "CATEGORY=home npx playwright test tests/home --headed",
-    "test:login:headed": "CATEGORY=login npx playwright test tests/login --headed",
-    "test:music:headed": "CATEGORY=music npx playwright test tests/music --headed",
-    "test:search:headed": "CATEGORY=search npx playwright test tests/search --headed",
-    "test:profile:headed": "CATEGORY=profile npx playwright test tests/profile --headed",
-    "test:donation:headed": "CATEGORY=donation npx playwright test tests/donation --headed",
-    "test:donation": "CATEGORY=donation npx playwright test tests/donation",
     "format": "prettier --write \"tests/**/*.ts\"",
     "lint": "prettier --check \"tests/**/*.ts\"",
     "typecheck": "node node_modules/typescript/bin/tsc --noEmit",
@@ -45,14 +19,13 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.41.2",
+    "@playwright/test": "^1.44.1",
     "@types/node": "^20.11.17",
     "browserstack-local": "^1.4.8",
     "dotenv": "^16.0.3",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "husky": "^8.0.3",
-    "playwright": "^1.41.2",
     "prettier": "^3.0.0"
   },
   "eslintConfig": {
@@ -66,22 +39,14 @@
     ],
     "rules": {
       "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error"
-      ],
+      "@typescript-eslint/no-unused-vars": 2,
       "no-shadow": "off",
-      "@typescript-eslint/no-shadow": [
-        "error"
-      ],
+      "@typescript-eslint/no-shadow": 2,
       "class-methods-use-this": "off",
       "import/no-unresolved": "off",
       "import/extensions": [
         "off",
-        "ignorePackages",
-        {
-          "js": "never",
-          "ts": "never"
-        }
+        "ignorePackages"
       ],
       "no-unsafe-optional-chaining": "warn",
       "default-param-last": "warn"

From 8b579e48e46a507422bac7e5cb570ec141bdbfdd Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Wed, 5 Jun 2024 09:05:07 +0800
Subject: [PATCH 02/13] update script and README

---
 README.md       | 75 ++++++++++++++++++++++++++++++++++++++++---------
 executeTests.js | 73 ++++++++++++++++++++++++++++-------------------
 package.json    |  3 --
 3 files changed, 105 insertions(+), 46 deletions(-)

diff --git a/README.md b/README.md
index 37216fc2..777fd3ed 100644
--- a/README.md
+++ b/README.md
@@ -27,26 +27,73 @@
 
 - Run all tests: `npm run test`
 
-- Run test by category (sample):
+- Run tests by category:
 
-    - This will run a custom script that can take different shell arguments/parameters for the following (arguments arrangement can be jumbled or not in proper order):
+    - This will run a custom script that can take different shell arguments/parameters for the following:
+        > Note:
+        >   - The arrangement/order for passing of arguments can be jumbled for flexibility
+        >   - The script is somewhat patterned with the current Playwright commands that uses `--` convention
+        >   - It's important to add `--` convention in CLI to separate the arguments from the `npm script` to be passed to the custom script
         
-        - test category (by folder structure): 
-            - `about, av, books, collection, details, donation, etc...`
-            - default value: `all`
+        - Test category (by folder structure):
+            - It will run all tests if you didn't specify the test category you want to test
+            - This can only execute 1 category in 1 command
+            - Refer to the folder names in `tests` directory (`tests/*`), except for `tests/page-objects`
+            - Sample parameters: `about, av, books, collection, details, donation, home, login, music, profile, search`
+            - Sample execution:
 
-        - test execution mode: 
-            - `headless/headed`
-            - default value: `headless`
+                `npm run test about`
 
-        - browser: 
-            - `chromium, firefox, webkit`
-            - default value: `chromium`
+                `npm run test books`
 
-    - Sample:
+                `npm run test donation`
 
-        - run all "books" tests in headless mode: `npm run test books`
-        - run all "about" tests in headed mode webkit browser: `npm run test about headed webkit`
+                `npm run test profile`
+
+        - Test execution mode:
+            - The tests will run in headless mode by __default__ which will execute the tests in terminal only
+            - Headed mode will spawn a browser window in the screen and execute the tests
+            - Accepted parameters: `--headed`
+            - Sample execution:
+
+                `npm run test -- about --headed`
+
+                `npm run test about -- --headed`
+
+        - Test execution - [debug mode](https://playwright.dev/docs/running-tests#debug-tests-with-the-playwright-inspector):
+            - This will spawn a browser window and Playwright Inspector window in the screen which will help on inspecting the whole test execution flow step by step
+            - Accepted parameters: `--debug`
+            - Sample execution:
+
+                `npm run test -- about --debug`
+
+                `npm run test about -- --debug`
+
+        - Test execution - [UI mode](https://playwright.dev/docs/running-tests#debug-tests-in-ui-mode):
+            - This will spawn a browser window and Playwright Inspector window in the screen which will help on inspecting the whole test execution flow step by step
+            - Accepted parameters: `--ui`
+            - Sample execution:
+
+                `npm run test -- about --ui`
+
+        - Test execution with [Trace viewer](https://playwright.dev/docs/trace-viewer) mode:
+            - Trace viewer will record the test run which will be included in the Playwright report
+            - It is disabled by default, you can enable it with the command below
+            - Accepted parameters: `trace`
+            - Sample execution:
+
+                `npm run test about trace`
+
+        - Test execution by browser:
+            - Tests will run in all browsers by default if you didn't specify the browser
+            - Accepted parameters: `chromium, firefox, webkit`
+            - Sample execution:
+
+                `npm run test about chromium`
+
+                `npm run test about chromium -- --debug`
+
+                `npm run test about chromium -- --headed`
 
 
 ## Running tests using VSCode Playwright plugin
diff --git a/executeTests.js b/executeTests.js
index 1dc97c28..c80307fe 100644
--- a/executeTests.js
+++ b/executeTests.js
@@ -2,23 +2,27 @@ const { execSync } = require('child_process');
 
 const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);
 
-function runTest(category = 'all', headed = false, browser = 'chromium') {
-  // Construct the npm run test command based on parameters
-  let command = `CATEGORY=${category} npx playwright test`;
+const buildCommand = (options) => {
+  let command = `CATEGORY=${options.category} npx playwright test`;
 
-  if (category !== 'all') {
-    command += ` tests/${category}`;
+  if (options.category !== 'all') {
+    command += ` tests/${options.category}`;
   }
 
-  if (headed) {
-    command += ` --headed`;
+  if (options.trace) {
+    command += ' --trace on';
   }
 
-  if (browser !== 'chromium') {
-    command += ` --project='Desktop - ${capitalizeFirstLetter(browser)}'`;
+  if (options.browser) {
+    command += ` --project='Desktop - ${capitalizeFirstLetter(options.browser)}'`;
   }
 
-  // Execute the command
+  command += options.additionalArgs.map(arg => ` ${arg}`).join('');
+
+  return command;
+}
+
+const executeCommand = (command) => {
   try {
     console.log(`Executing command: ${command}`);
     const output = execSync(command, { stdio: 'inherit' });
@@ -26,27 +30,38 @@ function runTest(category = 'all', headed = false, browser = 'chromium') {
       console.log(output.toString());
     }
   } catch (error) {
-    console.log('error: ', error);
-    console.error(error.stderr ? error.stderr.toString() : error.toString());
+    console.error('Error:', error.stderr ? error.stderr.toString() : error.toString());
     process.exit(1);
   }
 }
 
-// Extract parameters from command line arguments
-const args = process.argv.slice(2);
-let category = 'all';
-let headed = false;
-let browser = 'chromium';
-
-// Iterate through arguments to parse them
-args.forEach(arg => {
-  if (arg === 'headed') {
-    headed = true;
-  } else if (arg === 'chromium' || arg === 'firefox' || arg === 'webkit') {
-    browser = arg;
-  } else {
-    category = arg;
-  }
-});
+const parseArguments = (args) => {
+  let category = 'all';
+  let trace = false;
+  let browser = '';
+  const additionalArgs = [];
+
+  args.forEach(arg => {
+    if (arg.startsWith('--')) {
+      additionalArgs.push(arg);
+    } else if (arg === 'trace') {
+      trace = true;
+    } else if (['chromium', 'firefox', 'webkit'].includes(arg)) {
+      browser = arg;
+    } else {
+      category = arg;
+    }
+  });
+
+  return { category, browser, trace, additionalArgs };
+}
 
-runTest(category, headed, browser);
\ No newline at end of file
+const executeTests = ({ category, browser, trace, additionalArgs }) => {
+  const options = { category, browser, trace, additionalArgs };
+  const command = buildCommand(options);
+  executeCommand(command);
+}
+
+const args = process.argv.slice(2);
+const parsedArgs = parseArguments(args);
+executeTests(parsedArgs);
diff --git a/package.json b/package.json
index ae95497c..191cbc5d 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,6 @@
     "show:report": "npx http-server ./playwright-report",
     "test": "node executeTests.js",
     "test:codegen": "npx playwright codegen",
-    "test:debug": "CATEGORY=all npx playwright test --debug",
-    "test:trace": "CATEGORY=all npx playwright test --config=./playwright.config.ts --trace on",
-    "test:ui": "CATEGORY=all npx playwright test --ui",
     "format": "prettier --write \"tests/**/*.ts\"",
     "lint": "prettier --check \"tests/**/*.ts\"",
     "typecheck": "node node_modules/typescript/bin/tsc --noEmit",

From ce34d48b11e6240c553354d0390b844e214c6f52 Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Sat, 8 Jun 2024 09:10:14 +0800
Subject: [PATCH 03/13] add grep command for test execution

---
 README.md       | 17 +++++++++++++++--
 executeTests.js | 37 +++++++++++++++++++++++++++++--------
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 777fd3ed..9b61cb1d 100644
--- a/README.md
+++ b/README.md
@@ -91,9 +91,22 @@
 
                 `npm run test about chromium`
 
-                `npm run test about chromium -- --debug`
+                `npm run test about firefox -- --debug`
 
-                `npm run test about chromium -- --headed`
+                `npm run test about webkit -- --headed`
+
+        - Test execution by test title:
+            - This command will grep for test title specified in `.spec.ts` test description
+            - This param is annotated as `-g`; similar to how Playwright does it
+            - Tests will run in all browsers by default if you didn't specify the browser
+            - This can be combined with other commands if needed
+            - Sample execution:
+
+                `npm run test -- -g "TV has borrow button"`
+
+                `npm run test -- -g "Canonical About page has correct title and text" chromium`
+
+                `npm run test -- -g "Canonical About page has correct title and text" --debug`
 
 
 ## Running tests using VSCode Playwright plugin
diff --git a/executeTests.js b/executeTests.js
index c80307fe..029a58b3 100644
--- a/executeTests.js
+++ b/executeTests.js
@@ -5,7 +5,7 @@ const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);
 const buildCommand = (options) => {
   let command = `CATEGORY=${options.category} npx playwright test`;
 
-  if (options.category !== 'all') {
+  if (options.category !== 'all' && options.category !== 'grep') {
     command += ` tests/${options.category}`;
   }
 
@@ -17,7 +17,9 @@ const buildCommand = (options) => {
     command += ` --project='Desktop - ${capitalizeFirstLetter(options.browser)}'`;
   }
 
-  command += options.additionalArgs.map(arg => ` ${arg}`).join('');
+  command += options.additionalArgs.map(arg => {
+    return (arg.startsWith('-g')) ? ` ${arg} "${options.title}"` : ` ${arg}`;
+  }).join(''); 
 
   return command;
 }
@@ -36,28 +38,47 @@ const executeCommand = (command) => {
 }
 
 const parseArguments = (args) => {
-  let category = 'all';
+  let categories = [
+    'about',
+    'av',
+    'books',
+    'collection',
+    'details',
+    'donation',
+    'home',
+    'login',
+    'music',
+    'profile',
+    'search'
+  ];
   let trace = false;
   let browser = '';
+  let category = '';
+  let title = '';
   const additionalArgs = [];
 
   args.forEach(arg => {
-    if (arg.startsWith('--')) {
+    if(arg.startsWith('-g')) {
+      additionalArgs.push(arg);
+      category = 'grep';
+    } else if (arg.startsWith('--')) {
       additionalArgs.push(arg);
     } else if (arg === 'trace') {
       trace = true;
     } else if (['chromium', 'firefox', 'webkit'].includes(arg)) {
       browser = arg;
-    } else {
+    } else if (categories.includes(arg)){
       category = arg;
+    } else {
+      title = arg;
     }
   });
 
-  return { category, browser, trace, additionalArgs };
+  return { category, browser, trace, title, additionalArgs };
 }
 
-const executeTests = ({ category, browser, trace, additionalArgs }) => {
-  const options = { category, browser, trace, additionalArgs };
+const executeTests = ({ category, browser, trace, title, additionalArgs }) => {
+  const options = { category, browser, trace, title, additionalArgs };
   const command = buildCommand(options);
   executeCommand(command);
 }

From 43ac4aa45cde21f94a53197854b3ebe92b3772ff Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Tue, 11 Jun 2024 10:23:40 +0800
Subject: [PATCH 04/13] use self-hosted

---
 .github/workflows/call-run-tests.yml | 31 +++++++++++++++-------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/.github/workflows/call-run-tests.yml b/.github/workflows/call-run-tests.yml
index dddf0257..60b9b28c 100644
--- a/.github/workflows/call-run-tests.yml
+++ b/.github/workflows/call-run-tests.yml
@@ -4,15 +4,18 @@ on: workflow_call
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
+    container:
+      # https://github.com/internetarchive/dyno
+      image: ghcr.io/internetarchive/dyno:main
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          cache: 'npm'
+      # - uses: actions/setup-node@v3
+      #   with:
+      #     node-version: 20
+      #     cache: 'npm'
 
       - name: Install dependencies
         run: npm ci
@@ -21,11 +24,11 @@ jobs:
         run: npx playwright install --with-deps
 
       - name: Run Playwright tests
-        run: npm run test
-
-      - uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 1
+        run: npm run test 
+
+      # - uses: actions/upload-artifact@v3
+      #   if: always()
+      #   with:
+      #     name: playwright-report
+      #     path: playwright-report/
+      #     retention-days: 1

From 6bb9ca05c1ca046980d520bf8075666f9415fe87 Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Tue, 11 Jun 2024 10:36:14 +0800
Subject: [PATCH 05/13] check env

---
 .github/workflows/call-run-tests.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/call-run-tests.yml b/.github/workflows/call-run-tests.yml
index 60b9b28c..a8135cc4 100644
--- a/.github/workflows/call-run-tests.yml
+++ b/.github/workflows/call-run-tests.yml
@@ -17,6 +17,11 @@ jobs:
       #     node-version: 20
       #     cache: 'npm'
 
+      - name: Check npm version installed
+        run: |
+          npm -v
+          npx -v
+
       - name: Install dependencies
         run: npm ci
 

From ef5ef99cc7832004cb465e49bd7da4ff53b51c0e Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Tue, 11 Jun 2024 10:46:18 +0800
Subject: [PATCH 06/13] update env

---
 .github/workflows/call-run-tests.yml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/call-run-tests.yml b/.github/workflows/call-run-tests.yml
index a8135cc4..7969cf6e 100644
--- a/.github/workflows/call-run-tests.yml
+++ b/.github/workflows/call-run-tests.yml
@@ -12,10 +12,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      # - uses: actions/setup-node@v3
-      #   with:
-      #     node-version: 20
-      #     cache: 'npm'
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
 
       - name: Check npm version installed
         run: |

From 03a0ea2f6536a26c53128a80a6530ceb27334688 Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Tue, 11 Jun 2024 16:32:55 +0800
Subject: [PATCH 07/13] update env to install playwright deps

---
 .github/workflows/call-run-tests.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/call-run-tests.yml b/.github/workflows/call-run-tests.yml
index 7969cf6e..35ebe962 100644
--- a/.github/workflows/call-run-tests.yml
+++ b/.github/workflows/call-run-tests.yml
@@ -23,7 +23,9 @@ jobs:
           npx -v
 
       - name: Install dependencies
-        run: npm ci
+        run: |
+          npm ci
+          npm install -D @playwright/test@latest
 
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps

From bcd13ae2ee432d97864c792ba3156d454a7a3a33 Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Tue, 11 Jun 2024 16:40:36 +0800
Subject: [PATCH 08/13] update env to install playwright browser

---
 .github/workflows/call-run-tests.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/call-run-tests.yml b/.github/workflows/call-run-tests.yml
index 35ebe962..b76ebd7e 100644
--- a/.github/workflows/call-run-tests.yml
+++ b/.github/workflows/call-run-tests.yml
@@ -28,7 +28,7 @@ jobs:
           npm install -D @playwright/test@latest
 
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: npx playwright install # --with-deps
 
       - name: Run Playwright tests
         run: npm run test 

From e47f4985800225077dc8dc3d7d41c6956955651d Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Fri, 14 Jun 2024 09:46:23 +0800
Subject: [PATCH 09/13] update custom script and README

---
 README.md                  | 126 ++++++++++++++++++++-----------------
 executeTests.js            |  88 --------------------------
 package-lock.json          |  16 +++++
 package.json               |   5 +-
 scripts/executeTests.js    |  72 +++++++++++++++++++++
 scripts/generateCommand.js |  47 ++++++++++++++
 6 files changed, 208 insertions(+), 146 deletions(-)
 delete mode 100644 executeTests.js
 create mode 100644 scripts/executeTests.js
 create mode 100644 scripts/generateCommand.js

diff --git a/README.md b/README.md
index 9b61cb1d..cc4836d5 100644
--- a/README.md
+++ b/README.md
@@ -27,86 +27,98 @@
 
 - Run all tests: `npm run test`
 
-- Run tests by category:
+- Run tests using `generate` command:
 
-    - This will run a custom script that can take different shell arguments/parameters for the following:
-        > Note:
-        >   - The arrangement/order for passing of arguments can be jumbled for flexibility
-        >   - The script is somewhat patterned with the current Playwright commands that uses `--` convention
-        >   - It's important to add `--` convention in CLI to separate the arguments from the `npm script` to be passed to the custom script
-        
-        - Test category (by folder structure):
-            - It will run all tests if you didn't specify the test category you want to test
-            - This can only execute 1 category in 1 command
-            - Refer to the folder names in `tests` directory (`tests/*`), except for `tests/page-objects`
-            - Sample parameters: `about, av, books, collection, details, donation, home, login, music, profile, search`
-            - Sample execution:
+    - See `scripts/generateCommand.js`, update the arguments that starts at `line:36`
 
-                `npm run test about`
+    - Run the command: `npm run generate:command`, run the generated by the command
 
-                `npm run test books`
+- Run tests using custom execute script:
 
-                `npm run test donation`
+    > Note:
+    >   - This will run a custom script that can take different shell script arguments/parameters for the following:
+    >   - The arrangement/order for passing of arguments can be jumbled for flexibility
+    >   - It's important to add `--` convention in CLI after the `npm command`
+    >       - It will separate npm-specific arguments from the arguments that are intended for the nodejs script
+    >       - Without `--`, it will not pass the arguments properly
 
-                `npm run test profile`
 
-        - Test execution mode:
-            - The tests will run in headless mode by __default__ which will execute the tests in terminal only
-            - Headed mode will spawn a browser window in the screen and execute the tests
-            - Accepted parameters: `--headed`
-            - Sample execution:
+    - __Test category (by folder structure)__:
+        - It will run all tests if you didn't specify the test category you want to test
+        - This argument is annotated as `--test`
+        - This can only execute 1 category in 1 command
+        - Refer to the folder names in `tests` directory (`tests/*`), except for `tests/page-objects`
+        - Sample parameters: `about, av, books, collection, details, donation, home, login, music, profile, search`
+        - Sample execution:
 
-                `npm run test -- about --headed`
+            `npm run execute -- --test=about`
 
-                `npm run test about -- --headed`
+            `npm run execute -- --test=books`
 
-        - Test execution - [debug mode](https://playwright.dev/docs/running-tests#debug-tests-with-the-playwright-inspector):
-            - This will spawn a browser window and Playwright Inspector window in the screen which will help on inspecting the whole test execution flow step by step
-            - Accepted parameters: `--debug`
-            - Sample execution:
+            `npm run execute -- --test=donation`
 
-                `npm run test -- about --debug`
+            `npm run execute -- --test=profile`
 
-                `npm run test about -- --debug`
+    - __Test execution mode__:
+        - The tests will run in headless mode by __default__ which will execute the tests in terminal only
+        - This argument is annotated as `--headed`
+        - Headed mode will spawn a browser window in the screen and execute the tests
+        - Sample execution:
 
-        - Test execution - [UI mode](https://playwright.dev/docs/running-tests#debug-tests-in-ui-mode):
-            - This will spawn a browser window and Playwright Inspector window in the screen which will help on inspecting the whole test execution flow step by step
-            - Accepted parameters: `--ui`
-            - Sample execution:
+            `npm run execute -- --test=about --headed`
 
-                `npm run test -- about --ui`
+            `npm run execute -- --headed --test=about`
 
-        - Test execution with [Trace viewer](https://playwright.dev/docs/trace-viewer) mode:
-            - Trace viewer will record the test run which will be included in the Playwright report
-            - It is disabled by default, you can enable it with the command below
-            - Accepted parameters: `trace`
-            - Sample execution:
+    - __Test execution - [debug mode](https://playwright.dev/docs/running-tests#debug-tests-with-the-playwright-inspector)__:
+        - This will spawn a browser window and Playwright Inspector window in the screen which will help on inspecting the whole test execution flow step by step
+        - This argument is annotated as `--debug`
+        - Sample execution:
 
-                `npm run test about trace`
+            `npm run execute -- --test=about --debug`
 
-        - Test execution by browser:
-            - Tests will run in all browsers by default if you didn't specify the browser
-            - Accepted parameters: `chromium, firefox, webkit`
-            - Sample execution:
+            `npm run execute -- --debug --test=books`
 
-                `npm run test about chromium`
+    - __Test execution - [UI mode](https://playwright.dev/docs/running-tests#debug-tests-in-ui-mode)__:
+        - This will spawn a browser window and Playwright Inspector window in the screen which will help on inspecting the whole test execution flow step by step
+        - This argument is annotated as `--ui`
+        - Sample execution:
 
-                `npm run test about firefox -- --debug`
+            `npm run execute -- --test=about --ui`
 
-                `npm run test about webkit -- --headed`
+    - __Test execution with [Trace viewer](https://playwright.dev/docs/trace-viewer) mode__:
+        - Trace viewer will record the test run which will be included in the Playwright report
+        - This argument is annotated as `--trace`
+        - It is disabled by default, you can enable it with the command below
+        - Accepted parameters: `trace`
+        - Sample execution:
 
-        - Test execution by test title:
-            - This command will grep for test title specified in `.spec.ts` test description
-            - This param is annotated as `-g`; similar to how Playwright does it
-            - Tests will run in all browsers by default if you didn't specify the browser
-            - This can be combined with other commands if needed
-            - Sample execution:
+            `npm run execute -- --test=about --trace`
 
-                `npm run test -- -g "TV has borrow button"`
+    - __Test execution by browser__:
+        - Tests will run in all browsers by default if you didn't specify the browser
+        - This argument is annotated as `--browser`
+        - Accepted parameters: `chromium, firefox, webkit`
+        - Sample execution:
 
-                `npm run test -- -g "Canonical About page has correct title and text" chromium`
+            `npm run execute -- --test=about --browser=chromium`
 
-                `npm run test -- -g "Canonical About page has correct title and text" --debug`
+            `npm run execute -- --test=about --browser=firefox --debug`
+
+            `npm run execute -- --test=about --browser=webkit --headed`
+
+    - __Test execution by test title__:
+        - This command will grep for test title specified in `.spec.ts` test description
+        - This argument is annotated as `--title`
+        - The custom script will treat it as the `-g` parameter or run as a `grep` command like how Playwright does it
+        - Tests will run in all browsers by default if you didn't specify the browser
+        - This can be combined with other commands if needed
+        - Sample execution:
+
+            `npm run execute -- --title="TV has borrow button"`
+
+            `npm run execute -- --title="Canonical About page has correct title and text" --browser=chromium`
+
+            `npm run execute -- --title="Canonical About page has correct title and text" --debug`
 
 
 ## Running tests using VSCode Playwright plugin
diff --git a/executeTests.js b/executeTests.js
deleted file mode 100644
index 029a58b3..00000000
--- a/executeTests.js
+++ /dev/null
@@ -1,88 +0,0 @@
-const { execSync } = require('child_process');
-
-const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);
-
-const buildCommand = (options) => {
-  let command = `CATEGORY=${options.category} npx playwright test`;
-
-  if (options.category !== 'all' && options.category !== 'grep') {
-    command += ` tests/${options.category}`;
-  }
-
-  if (options.trace) {
-    command += ' --trace on';
-  }
-
-  if (options.browser) {
-    command += ` --project='Desktop - ${capitalizeFirstLetter(options.browser)}'`;
-  }
-
-  command += options.additionalArgs.map(arg => {
-    return (arg.startsWith('-g')) ? ` ${arg} "${options.title}"` : ` ${arg}`;
-  }).join(''); 
-
-  return command;
-}
-
-const executeCommand = (command) => {
-  try {
-    console.log(`Executing command: ${command}`);
-    const output = execSync(command, { stdio: 'inherit' });
-    if (output !== null) {
-      console.log(output.toString());
-    }
-  } catch (error) {
-    console.error('Error:', error.stderr ? error.stderr.toString() : error.toString());
-    process.exit(1);
-  }
-}
-
-const parseArguments = (args) => {
-  let categories = [
-    'about',
-    'av',
-    'books',
-    'collection',
-    'details',
-    'donation',
-    'home',
-    'login',
-    'music',
-    'profile',
-    'search'
-  ];
-  let trace = false;
-  let browser = '';
-  let category = '';
-  let title = '';
-  const additionalArgs = [];
-
-  args.forEach(arg => {
-    if(arg.startsWith('-g')) {
-      additionalArgs.push(arg);
-      category = 'grep';
-    } else if (arg.startsWith('--')) {
-      additionalArgs.push(arg);
-    } else if (arg === 'trace') {
-      trace = true;
-    } else if (['chromium', 'firefox', 'webkit'].includes(arg)) {
-      browser = arg;
-    } else if (categories.includes(arg)){
-      category = arg;
-    } else {
-      title = arg;
-    }
-  });
-
-  return { category, browser, trace, title, additionalArgs };
-}
-
-const executeTests = ({ category, browser, trace, title, additionalArgs }) => {
-  const options = { category, browser, trace, title, additionalArgs };
-  const command = buildCommand(options);
-  executeCommand(command);
-}
-
-const args = process.argv.slice(2);
-const parsedArgs = parseArguments(args);
-executeTests(parsedArgs);
diff --git a/package-lock.json b/package-lock.json
index 24bf6b8e..2c285f66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "eslint": "^8.44.0",
         "eslint-config-prettier": "^8.8.0",
         "husky": "^8.0.3",
+        "minimist": "^1.2.8",
         "prettier": "^3.0.0"
       }
     },
@@ -952,6 +953,15 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -2089,6 +2099,12 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index 191cbc5d..3f1f3f05 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,9 @@
   "main": "index.js",
   "scripts": {
     "show:report": "npx http-server ./playwright-report",
-    "test": "node executeTests.js",
+    "test": "CATEGORY=all npx playwright test",
+    "execute": "node scripts/executeTests.js",
+    "generate:command": "node scripts/generateCommand.js",
     "test:codegen": "npx playwright codegen",
     "format": "prettier --write \"tests/**/*.ts\"",
     "lint": "prettier --check \"tests/**/*.ts\"",
@@ -23,6 +25,7 @@
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "husky": "^8.0.3",
+    "minimist": "^1.2.8",
     "prettier": "^3.0.0"
   },
   "eslintConfig": {
diff --git a/scripts/executeTests.js b/scripts/executeTests.js
new file mode 100644
index 00000000..5a648a64
--- /dev/null
+++ b/scripts/executeTests.js
@@ -0,0 +1,72 @@
+const { execSync } = require('child_process');
+
+const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);
+
+const buildCommand = (options) => {
+  const { category, trace, headed, debug, ui, title, browser, platform } = options;
+
+  let command = `CATEGORY=${category} npx playwright test`;
+
+  if (category !== 'all' && category !== 'grep') {
+    command += ` tests/${category}`;
+  }
+
+  if (trace) command += ' --trace on';
+  if (headed) command += ' --headed';
+  if (debug) command += ' --debug';
+  if (ui) command += ' --ui';
+  if (title) command += ` -g "${title}"`;
+  if (browser) {
+    const capitalizedBrowser = capitalizeFirstLetter(browser);
+    const capitalizedPlatform = capitalizeFirstLetter(platform);
+    command += ` --project='${capitalizedPlatform} - ${capitalizedBrowser}'`;
+  }
+
+  return command;
+}
+
+const parseArguments = (args) => {
+  const validCategories = ['about', 'av', 'books', 'collection', 'details', 'donation', 'home', 'login', 'music', 'profile', 'search'];
+  const validBrowserDevices = ['chromium', 'firefox', 'webkit'];
+  const validPlatforms = ['mobile', 'desktop'];
+
+  const { test: testCategory, browser, title, headed, trace, debug, ui, device } = args;
+
+  let category = testCategory && validCategories.includes(testCategory) ? testCategory : 'all';
+  let selectedBrowser = validBrowserDevices.includes(browser) ? browser : '';
+  let platform = validPlatforms.includes(device) ? device : 'desktop';
+
+  if (title) category = 'grep';
+
+  return {
+    category,
+    browser: selectedBrowser,
+    title,
+    headed: !!headed,
+    trace: !!trace,
+    debug: !!debug,
+    ui: !!ui,
+    platform
+  };
+}
+
+const executeCommand = (command) => {
+  try {
+    console.log(`Executing command: ${command}`);
+    const output = execSync(command, { stdio: 'inherit' });
+    if (output !== null) {
+      console.log(output.toString());
+    }
+  } catch (error) {
+    console.error('Error:', error.stderr ? error.stderr.toString() : error.toString());
+    process.exit(1);
+  }
+}
+
+const executeTests = (options) => {
+  executeCommand(buildCommand(options));
+}
+
+const args = require('minimist')(process.argv.slice(2));
+const parsedArgs = parseArguments(args);
+executeTests(parsedArgs);
diff --git a/scripts/generateCommand.js b/scripts/generateCommand.js
new file mode 100644
index 00000000..07226704
--- /dev/null
+++ b/scripts/generateCommand.js
@@ -0,0 +1,47 @@
+const generateCommand = (args) => {
+  // Format the arguments into a command string
+  const commandArgs = Object.entries(args)
+    .filter(([_, value]) => {
+      // Remove blank arguments
+      if (value === '' || value === undefined || value === false) {
+        return false;
+      }
+      return true;
+    })
+    .map(([key, value]) => {
+      if (typeof value === 'boolean') {
+        return value ? `--${key}` : '';
+      } else {
+        // If the argument is a title, surround it with ""
+        if (key === 'title') {
+          return `--${key}="${value}"`;
+        } else {
+          return `--${key}=${value}`;
+        }
+      }
+    })
+    .join(' '); // Join the arguments with a space
+
+  // Return the formatted command
+  return `npm run execute -- ${commandArgs}`;
+};
+
+/**
+ * Test category options: 'about', 'av', 'books', 'collection', 'details', 'donation', 'home', 'login', 'music', 'profile', 'search'
+ * Browser options: 'chromium', 'firefox', 'webkit'
+ * Device options: 'mobile', 'desktop'
+ * Title: '<test case title description; see *.spec.ts files to get the titles>'
+ */
+const sampleArgs = {
+  test: 'books',
+  browser: 'chromium', // default/blank: all browsers
+  title: '',
+  headed: false,
+  trace: false,
+  debug: false,
+  ui: true,
+  device: '' // default/blank: desktop
+};
+
+const sampleCommand = generateCommand(sampleArgs);
+console.log('Generated command:', sampleCommand);

From 58e1ffb3d07cfc30603f6b63a8453d9bc9fd63f4 Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Fri, 14 Jun 2024 09:58:32 +0800
Subject: [PATCH 10/13] update README

---
 README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/README.md b/README.md
index cc4836d5..ab7e794f 100644
--- a/README.md
+++ b/README.md
@@ -138,6 +138,11 @@
 - run command format: `npx playwright test <test-file-path> --debug`
 - sample: `npx playwright test tests/search/search-layout.spec.ts --debug`
 
+## Running specific test case title:
+
+- run command format: `npx playwright test -g "<test-case-title>"`
+- sample: `npx playwright test -g "TV has borrow button"`
+
 
 ## View tests execution result
 

From 71a11ae30811b2a10529f04ec8667bfc1eb6fd6d Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Fri, 14 Jun 2024 09:59:40 +0800
Subject: [PATCH 11/13] update yml

---
 .github/workflows/call-run-tests.yml | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/.github/workflows/call-run-tests.yml b/.github/workflows/call-run-tests.yml
index b76ebd7e..abad6161 100644
--- a/.github/workflows/call-run-tests.yml
+++ b/.github/workflows/call-run-tests.yml
@@ -4,10 +4,7 @@ on: workflow_call
 
 jobs:
   test:
-    runs-on: self-hosted
-    container:
-      # https://github.com/internetarchive/dyno
-      image: ghcr.io/internetarchive/dyno:main
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4

From 30072032a50fe57a896843ec87ce32f83a064c28 Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Fri, 14 Jun 2024 10:00:38 +0800
Subject: [PATCH 12/13] update yml files

---
 .github/workflows/call-run-tests.yml | 4 ++--
 .github/workflows/donation-tests.yml | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/call-run-tests.yml b/.github/workflows/call-run-tests.yml
index abad6161..712e1767 100644
--- a/.github/workflows/call-run-tests.yml
+++ b/.github/workflows/call-run-tests.yml
@@ -25,12 +25,12 @@ jobs:
           npm install -D @playwright/test@latest
 
       - name: Install Playwright Browsers
-        run: npx playwright install # --with-deps
+        run: npx playwright install --with-deps
 
       - name: Run Playwright tests
         run: npm run test 
 
-      # - uses: actions/upload-artifact@v3
+      # - uses: actions/upload-artifact@v4
       #   if: always()
       #   with:
       #     name: playwright-report
diff --git a/.github/workflows/donation-tests.yml b/.github/workflows/donation-tests.yml
index 94a5893d..12ffdc98 100644
--- a/.github/workflows/donation-tests.yml
+++ b/.github/workflows/donation-tests.yml
@@ -26,4 +26,4 @@ jobs:
         run: npx playwright install --with-deps
 
       - name: Run Donation Tests
-        run: npm run test donation
+        run: npm run execute -- --test=donation

From 41cb5e2944cac67e328103104dbcd0407a67fd89 Mon Sep 17 00:00:00 2001
From: clau <1281581+dualcnhq@users.noreply.github.com>
Date: Thu, 27 Jun 2024 10:55:58 +0800
Subject: [PATCH 13/13] update README

---
 README.md                  | 267 +++++++++++++++++++++++--------------
 package.json               |   5 +-
 scripts/generateCommand.js |   2 +-
 3 files changed, 169 insertions(+), 105 deletions(-)

diff --git a/README.md b/README.md
index ab7e794f..4e0eca5b 100644
--- a/README.md
+++ b/README.md
@@ -12,113 +12,157 @@
 
 - Install dependencies:
 
-    `npm i`
+    ```bash
+    npm i
+    ```
 
 - Install Playwright browser libs:
 
-    `npx playwright install`
+    ```bash
+    npx playwright install
+    ```
+
+- Create a `.env` file by copying the contents from `.env.sample` and add the respective values you want to use for testing. This is required to run tests with loggedIn flows
 
-- Create a `.env` file by copying the contents from `.env.sample` and add the respective values you want to use for testing
 
-    - this is required to run tests with loggedIn flows
+## Run all tests
+
+- Run command:
+
+    ```bash
+    npm run test
+    ```
+
+
+## Running Tests with Custom Parameters
+
+- To run a custom script with flexible shell script arguments/parameters, follow these steps:
+
+    1. **Command Structure:**
+        - Ensure to use the `--` convention after the npm command to separate npm-specific arguments from those intended for the Node.js script
+        - Without `--`, arguments may not pass correctly to the script
+
+    2. **Flexibility in Argument Order:**
+        - You can pass script arguments in any order to suit your needs for flexibility and customization
+
+
+    ### Test Category (by Folder Structure)
+
+    - Running tests from specific categories in the `tests` directory (except `tests/page-objects`):
+    - If no category is specified, all tests will run by default.
+    - Parameter: `--test`
+    - Example usage:
+        ```bash
+        npm run test -- --test=about
+        npm run test -- --test=books
+        npm run test -- --test=donation
+        npm run test -- --test=profile
+        ```
+
+    ### Test Execution Modes
+
+    - **Headed Mode:**
+        - Executes tests with a browser window visible on screen.
+        - Parameter: `--headed`
+        - Example usage:
+            ```bash
+            npm run test -- --test=about --headed
+            npm run test -- --headed --test=about
+            ```
+
+    - **Debug Mode:**
+        - Executes tests with Playwright Inspector for step-by-step debugging.
+        - Parameter: `--debug`
+        - Example usage:
+            ```bash
+            npm run test -- --test=about --debug
+            npm run test -- --debug --test=books
+            ```
 
+    - **UI Mode:**
+        - Executes tests with Playwright Inspector for UI-based debugging.
+        - Parameter: `--ui`
+        - Example usage:
+            ```bash
+            npm run test -- --test=about --ui
+            ```
 
-## Running tests
+    - **Trace Viewer Mode:**
+        - Records test runs for inclusion in the Playwright report.
+        - Parameter: `--trace`
+        - Example usage:
+            ```bash
+            npm run test -- --test=about --trace
+            ```
 
-- Run all tests: `npm run test`
+    ### Test Execution by Browser
 
-- Run tests using `generate` command:
+    - Running tests in specific browsers:
+    - By default, tests run in all available browsers.
+    - Parameter: `--browser`
+    - Accepted parameters: `chromium`, `firefox`, `webkit`
+    - Example usage:
+        ```bash
+        npm run test -- --test=about --browser=chromium
+        npm run test -- --test=about --browser=firefox --debug
+        npm run test -- --test=about --browser=webkit --headed
+        ```
 
-    - See `scripts/generateCommand.js`, update the arguments that starts at `line:36`
+    ### Test Execution by Test Title
 
-    - Run the command: `npm run generate:command`, run the generated by the command
+    - Running tests matching specific test case titles:
+    - Searches for test titles within `.spec.ts` files.
+    - Parameter: `--title`
+    - Example usage:
+        ```bash
+        npm run test -- --title="TV has borrow button"
+        npm run test -- --title="Canonical About page has correct title and text" --browser=chromium
+        npm run test -- --title="Canonical About page has correct title and text" --debug
+        ```
 
-- Run tests using custom execute script:
+    ### Use helper function to generate custom test commands
 
-    > Note:
-    >   - This will run a custom script that can take different shell script arguments/parameters for the following:
-    >   - The arrangement/order for passing of arguments can be jumbled for flexibility
-    >   - It's important to add `--` convention in CLI after the `npm command`
-    >       - It will separate npm-specific arguments from the arguments that are intended for the nodejs script
-    >       - Without `--`, it will not pass the arguments properly
+    - To generate and execute custom test commands using the `generateCommand.js` script, follow these steps:
 
-
-    - __Test category (by folder structure)__:
-        - It will run all tests if you didn't specify the test category you want to test
-        - This argument is annotated as `--test`
-        - This can only execute 1 category in 1 command
-        - Refer to the folder names in `tests` directory (`tests/*`), except for `tests/page-objects`
-        - Sample parameters: `about, av, books, collection, details, donation, home, login, music, profile, search`
-        - Sample execution:
-
-            `npm run execute -- --test=about`
-
-            `npm run execute -- --test=books`
-
-            `npm run execute -- --test=donation`
-
-            `npm run execute -- --test=profile`
-
-    - __Test execution mode__:
-        - The tests will run in headless mode by __default__ which will execute the tests in terminal only
-        - This argument is annotated as `--headed`
-        - Headed mode will spawn a browser window in the screen and execute the tests
-        - Sample execution:
-
-            `npm run execute -- --test=about --headed`
-
-            `npm run execute -- --headed --test=about`
-
-    - __Test execution - [debug mode](https://playwright.dev/docs/running-tests#debug-tests-with-the-playwright-inspector)__:
-        - This will spawn a browser window and Playwright Inspector window in the screen which will help on inspecting the whole test execution flow step by step
-        - This argument is annotated as `--debug`
-        - Sample execution:
-
-            `npm run execute -- --test=about --debug`
-
-            `npm run execute -- --debug --test=books`
-
-    - __Test execution - [UI mode](https://playwright.dev/docs/running-tests#debug-tests-in-ui-mode)__:
-        - This will spawn a browser window and Playwright Inspector window in the screen which will help on inspecting the whole test execution flow step by step
-        - This argument is annotated as `--ui`
-        - Sample execution:
-
-            `npm run execute -- --test=about --ui`
-
-    - __Test execution with [Trace viewer](https://playwright.dev/docs/trace-viewer) mode__:
-        - Trace viewer will record the test run which will be included in the Playwright report
-        - This argument is annotated as `--trace`
-        - It is disabled by default, you can enable it with the command below
-        - Accepted parameters: `trace`
-        - Sample execution:
-
-            `npm run execute -- --test=about --trace`
-
-    - __Test execution by browser__:
-        - Tests will run in all browsers by default if you didn't specify the browser
-        - This argument is annotated as `--browser`
-        - Accepted parameters: `chromium, firefox, webkit`
-        - Sample execution:
-
-            `npm run execute -- --test=about --browser=chromium`
-
-            `npm run execute -- --test=about --browser=firefox --debug`
-
-            `npm run execute -- --test=about --browser=webkit --headed`
-
-    - __Test execution by test title__:
-        - This command will grep for test title specified in `.spec.ts` test description
-        - This argument is annotated as `--title`
-        - The custom script will treat it as the `-g` parameter or run as a `grep` command like how Playwright does it
-        - Tests will run in all browsers by default if you didn't specify the browser
-        - This can be combined with other commands if needed
-        - Sample execution:
-
-            `npm run execute -- --title="TV has borrow button"`
-
-            `npm run execute -- --title="Canonical About page has correct title and text" --browser=chromium`
-
-            `npm run execute -- --title="Canonical About page has correct title and text" --debug`
+    - **Setup script configuration:**
+        - Ensure you have `generateCommand.js` configured with the desired parameters (`test`, `browser`, `title`, `headed`, `trace`, `debug`, `ui`, `device`)
+    
+        - Adjust these parameters as needed for your specific testing scenarios
+
+        Example configuration:
+        ```javascript
+        const sampleArgs = {
+            test: 'books',
+            browser: 'chromium', // Options: 'chromium', 'firefox', 'webkit'; default: all browsers
+            title: '', // Specify a test case title within ""
+            headed: false, // Set to true for headed mode
+            trace: false, // Set to true to enable trace mode
+            debug: false, // Set to true to enable debug mode
+            ui: true, // Set to true to enable UI mode
+            device: '' // Options: 'mobile', 'desktop'; default: desktop
+        };
+        ```
+
+    - **Generating custom test command:**
+
+        - Run the script to generate a command string that includes the specified parameters:
+
+            ```bash
+            npm run generate-command
+            ```
+
+        - This will output a generated command that can be used to execute specific tests based on your configuration:
+
+            ```bash
+            ➜ npm run generate:command
+
+            > iaux-e2e-playwright-tests@1.0.0 generate:command
+            > node scripts/generateCommand.js
+
+            Generated command: npm run test -- --test=books --browser=chromium --ui
+            ```
+
+        - Copy the generated command and execute it in your terminal to run tests with the specified configurations
 
 
 ## Running tests using VSCode Playwright plugin
@@ -128,25 +172,46 @@
 
 ## Running specific test spec by file:
 
-- run command format: `npx playwright test <test-file-path>`
-- sample: `npx playwright test tests/search/search-layout.spec.ts`
-- headed: `npx playwright test tests/search/search-layout.spec.ts --headed`
+- Command format: `npx playwright test <test-file-path>`
 
+- Sample (headless): 
+    ```bash
+    npx playwright test tests/search/search-layout.spec.ts
+    ```
+
+- Sample (headed): 
+    ```bash
+    npx playwright test tests/search/search-layout.spec.ts --headed
+    ```
 
 ## Running specific test spec by file in debug mode:
 
-- run command format: `npx playwright test <test-file-path> --debug`
-- sample: `npx playwright test tests/search/search-layout.spec.ts --debug`
+- Command format: `npx playwright test <test-file-path> --debug`
+
+- Sample: 
+    ```bash
+    npx playwright test tests/search/search-layout.spec.ts --debug
+    ```
+
 
 ## Running specific test case title:
 
-- run command format: `npx playwright test -g "<test-case-title>"`
-- sample: `npx playwright test -g "TV has borrow button"`
+- Command format: `npx playwright test -g "<test-case-title>"`
+
+- Sample: 
+    ```bash
+    npx playwright test -g "TV has borrow button"
+    ```
 
 
 ## View tests execution result
 
-- run: `npm run show:report`
+- Run command: 
+    
+    ```bash
+    npm run show:report
+    ```
+
 
 ## Reference guide for writing tests
 
diff --git a/package.json b/package.json
index 3f1f3f05..88a1d50f 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,8 @@
   "main": "index.js",
   "scripts": {
     "show:report": "npx http-server ./playwright-report",
-    "test": "CATEGORY=all npx playwright test",
-    "execute": "node scripts/executeTests.js",
-    "generate:command": "node scripts/generateCommand.js",
+    "test": "node scripts/executeTests.js",
+    "generate-command": "node scripts/generateCommand.js",
     "test:codegen": "npx playwright codegen",
     "format": "prettier --write \"tests/**/*.ts\"",
     "lint": "prettier --check \"tests/**/*.ts\"",
diff --git a/scripts/generateCommand.js b/scripts/generateCommand.js
index 07226704..af519c9a 100644
--- a/scripts/generateCommand.js
+++ b/scripts/generateCommand.js
@@ -23,7 +23,7 @@ const generateCommand = (args) => {
     .join(' '); // Join the arguments with a space
 
   // Return the formatted command
-  return `npm run execute -- ${commandArgs}`;
+  return `npm run test -- ${commandArgs}`;
 };
 
 /**