frontend: Add playwright app test

Add working scripts

Signed-off-by: Vincent T <[email protected]>

Author: vyncent-t

app/e2e-tests/README.md

@@ -0,0 +1,69 @@
+# e2e test for local playwright app mode
+
+Currently we have the original e2e tests for the web mode in the `e2e-tests` directory. We are adding new tests for the app mode in the `app-e2e-tests` directory for local testing. Unlike the other tests, these tests do not require a token to run so the setup is as followed:
+
+## Running app mode tests
+
+## Setup
+
+- Before running the tests, be sure to have an instance of Minikube running with the name `minikube`
+
+### Running the tests
+
+To run the tests for the app mode, follow the steps below:
+
+- cd into the e2e-tests directory within the headlamp repository
+  `cd headlamp/app/e2e-tests`
+
+- npm install the needed packages
+  `npm install`
+
+- run the following command
+  `npm run test-app`
+  (optional: include `-- --headed` to run the tests in headed mode)
+  (optional: include `-- --ui` to run the tests in ui mode)
+
+## Running web mode tests
+
+Running the tests for the web mode requires the backend and frontend to be running. Follow the steps below to run the tests for the web mode:
+
+Note: You may encouter issues switching from the app mode tests to the web mode tests. If you do, search for any running headlamp server processes and end them before running the web mode tests or app mode tests.
+
+## Setup
+
+- Before running the tests, be sure to have an instance of Minikube running with the name `minikube`
+
+### Backend
+
+To run the tests for the web mode, you will need to have the backend running. Follow the steps below to run the backend:
+
+- cd into the headlamp directory in a singular terminal
+  `cd headlamp`
+
+- run the following command
+  `make backend` followed by `make run-backend`
+
+### Frontend
+
+To run the tests for the web mode, you will need to have the frontend running. Follow the steps below to run the frontend:
+
+- cd into the headlamp directory in a separate terminal
+  `cd headlamp/frontend`
+
+- run the following command
+  `make frontend` followed by `make run-frontend`
+
+### Running the tests
+
+To run the tests for the web mode, follow the steps below:
+
+- cd into the e2e-tests directory within the headlamp repository in a separate terminal
+  `cd headlamp/app/e2e-tests`
+
+- npm install the needed packages
+  `npm install`
+
+- run the following command
+  `npm run test-web`
+  (optional: include `-- --headed` to run the tests in headed mode)
+  (optional: include `-- --ui` to run the tests in ui mode)

app/e2e-tests/package.json

@@ -2,7 +2,10 @@
   "name": "e2e-tests",
   "version": "1.0.0",
   "main": "index.js",
-  "scripts": {},
+  "scripts": {
+    "test-app": "PLAYWRIGHT_TEST_MODE=app playwright test",
+    "test-web": "PLAYWRIGHT_TEST_MODE=web playwright test"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",

app/e2e-tests/playwright.config.ts

@@ -14,13 +14,21 @@ import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
   testDir: './tests',
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  timeout: 60 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 120000,
+  },
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -38,36 +46,6 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
 
   /* Run your local dev server before starting the tests */