TEST-1234 Add playwright (#15)

<!--- Provide a general summary of your changes in the Title above -->

## Description 💬
<!--- Describe your changes in detail -->

## Motivation and Context 🥅
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested? 🧪
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, tests ran to see how
-->
<!--- your change affects other areas of the code, etc. -->
- [ ] Local build ⚒️
- [ ] Local tests 🧪
- [ ] (optional) Local run and endpoint tested in swagger 🚀

## Screenshots (if appropriate) 💻

## Types of changes 🌊
<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)

## Checklist ☑️

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->
- [ ] The pull request title starts with the jira case number (when
applicable), e.g. "TEST-1234 Add some feature"
- [ ] The person responsible for following up on requested review
changes has been assigned to the pull request
- [ ] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.

## Highly optional checks, only use these if you have a reason to do so
✔️

- [ ] This PR changes the database so I have added the *create-diagram*
label to assist reviewers with a db diagram
- [ ] This PR changes platform or backend and I need others to be able
to test against these changes before merging to dev, so I have added the
*deploy-azure* label to deploy before merging the PR

## Checklist for the approver ✅

- [ ] I've checked the files view for spelling issues, code quality
warnings and similar
- [ ] I've waited until all checks have passed (green check/without
error)
- [ ] I've checked that only the intended files are changed

.github/workflows/backend-ci.yml

@@ -169,6 +169,7 @@ jobs:
 
       - name: Inspect code
         uses: muno92/resharper_inspectcode@v1
+        if: ${{ github.event_name == 'pull_request' }}
         with:
           workingDirectory: ${{ env.BACKEND_SOLUTION_PATH }}
           solutionPath: Backend.sln

.github/workflows/playwright.yml

@@ -51,16 +51,19 @@ jobs:
         name: Setup node
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: "npm"
-          cache-dependency-path: "${{ env.PLAYWRIGHT_PATH }}/package-lock.json"
+          cache: "yarn"
+          cache-dependency-path: "${{ env.PLAYWRIGHT_PATH }}/yarn.lock"
+          # cache: "npm"
+          # cache-dependency-path: "${{ env.PLAYWRIGHT_PATH }}/package-lock.json"
 
       - name: Install dependencies
-        run: npm ci
+        run: yarn install --immutable --immutable-cache --check-cache # yarn install --frozen-lockfile # npm ci
 
       - name: Build
-        id: npm-build
+        id: node-build
         run: |
-          npm run build 1>build.out 2>&1 || (exit 0)
+          yarn build 1>build.out 2>&1 || (exit 0)
+          # npm run build 1>build.out 2>&1 || (exit 0)
           grep "): error " build.out > build.err || (exit 0)
 
           if [ ! -s build.err ]
@@ -96,37 +99,38 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           comment-identifier: "${{ env.WORKFLOW_SHORT_NAME }}-build-results"
-          comment-content: ${{ steps.npm-build.outputs.result }}
+          comment-content: ${{ steps.node-build.outputs.result }}
 
       - name: Lint
         if: always()
-        id: yarn-lint
+        id: node-lint
         run: |
-          (npm run lint -- -f compact | grep ": line " | sed -e 's|${{ env.TRAILING_AGENT_WORK_PATH }}||') 1>yarn-lint.err 2>&1 || (exit 0)
+          (yarn lint -- -f compact | grep ": line " | sed -e 's|${{ env.TRAILING_AGENT_WORK_PATH }}||') 1>lint.err 2>&1 || (exit 0)
+          # (npm run lint -- -f compact | grep ": line " | sed -e 's|${{ env.TRAILING_AGENT_WORK_PATH }}||') 1>lint.err 2>&1 || (exit 0)
 
-          if [ ! -s yarn-lint.err ]
+          if [ ! -s lint.err ]
           then
-            echo "## ✅ No linting issues 🎊" > yarn-lint.md
+            echo "## ✅ No linting issues 🎊" > lint.md
           else
             # Reformat lint output as github error annotations
             error_regex="(.+): line ([0-9]+), col [0-9]+, [A-Za-z]+ - (.+)"
-            cat yarn-lint.err | while read line
+            cat lint.err | while read line
             do
               if [[ $line =~ $error_regex ]]; then
                 echo "::error file=${BASH_REMATCH[1]},line=${BASH_REMATCH[2]}::${BASH_REMATCH[3]}"
               fi
             done
 
-            cp yarn-lint.err yarn-lint.md
-            sed -i '/^$/d' yarn-lint.md             # removes empty lines
-            sed -i -e 's/^/- ❌ /' yarn-lint.md     # prefix with markdown list item and cross mark emoji
-            echo "## ❌ The following linting issues should be fixed:" | cat - yarn-lint.md > yarn-lint.md.temp && mv yarn-lint.md.temp yarn-lint.md
+            cp lint.err lint.md
+            sed -i '/^$/d' lint.md             # removes empty lines
+            sed -i -e 's/^/- ❌ /' lint.md     # prefix with markdown list item and cross mark emoji
+            echo "## ❌ The following linting issues should be fixed:" | cat - lint.md > lint.md.temp && mv lint.md.temp lint.md
           fi
 
-          echo "result<<EOF"$'\n'"$(cat yarn-lint.md)"$'\n'EOF >> $GITHUB_OUTPUT
-          cat yarn-lint.md >> $GITHUB_STEP_SUMMARY
+          echo "result<<EOF"$'\n'"$(cat lint.md)"$'\n'EOF >> $GITHUB_OUTPUT
+          cat lint.md >> $GITHUB_STEP_SUMMARY
 
-          if [ -s yarn-lint.err ]
+          if [ -s lint.err ]
           then
             exit 1
           fi
@@ -137,7 +141,7 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           comment-identifier: "${{ env.WORKFLOW_SHORT_NAME }}-lint-results"
-          comment-content: ${{ steps.yarn-lint.outputs.result }}
+          comment-content: ${{ steps.node-lint.outputs.result }}
 
   run-e2e-tests:
     runs-on: ubuntu-latest
@@ -180,9 +184,9 @@ jobs:
         with:
           path: ~/.cache/ms-playwright
           key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
-      - run: npx playwright install --with-deps
+      - run: yarn playwright install --with-deps # npx playwright install --with-deps
         if: steps.playwright-cache.outputs.cache-hit != 'true'
-      - run: npx playwright install-deps
+      - run: yarn playwright install-deps # npx playwright install-deps
         if: steps.playwright-cache.outputs.cache-hit != 'true'
 
       - name: Run Playwright tests
@@ -192,7 +196,8 @@ jobs:
         run: |
           echo "Using BASIL_URL: $BASIL_URL"
           echo "Using BASIL_API_URL: $BASIL_API_URL"
-          npx playwright test
+          yarn playwright test
+          # npx playwright test
 
       - uses: daun/playwright-report-summary@v3
         if: ${{ (github.event_name == 'pull_request' || github.event_name == 'pull_request_target' || github.event_name == 'push') && always() }}

.vscode/settings.json

@@ -1,3 +1,8 @@
 {
-  "editor.formatOnSave": true
+  "editor.formatOnType": false,
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "files.autoSave": "onFocusChange", // optional but recommended
+  "explorer.fileNesting.enabled": true
 }

tests/playwright/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

tests/playwright/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "semi": true,
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "printWidth": 80,
+    "tabWidth": 2, 
+    "useTabs": false
+} 

tests/playwright/.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  //"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnType": false,
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "files.autoSave": "onFocusChange", // optional but recommended
+  //"vs-code-prettier-eslint.prettierLast": false, // set as "true" to run 'prettier' last not first
+  "source.fixAll": "explicit",
+  "explorer.fileNesting.enabled": true,
+  "eslint.experimental.useFlatConfig": true,
+  "eslint.lintTask.enable": true,
+  "eslint.format.enable": true
+}

tests/playwright/eslint.config.mjs

@@ -0,0 +1,35 @@
+import globals from 'globals';
+import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+import pluginJs from '@eslint/js';
+
+// mimic CommonJS variables -- not needed if using CommonJS
+const compatFilename = fileURLToPath(import.meta.url);
+const compatDirname = path.dirname(compatFilename);
+const compat = new FlatCompat({
+  baseDirectory: compatDirname,
+  recommendedConfig: pluginJs.configs.recommended,
+});
+
+export default [
+  {
+    languageOptions: {
+      globals: globals.browser,
+    },
+    files: ['*.ts'],
+    ignores: [
+      'node_modules/',
+      'playwright-report/',
+      'test-results/',
+      '!tests/*',
+      '!test-examples/*',
+    ],
+  },
+  ...compat.extends('standard-with-typescript'),
+  pluginReactConfig,
+  eslintConfigPrettier,
+];

tests/playwright/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "playwright",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.0.2",
+    "@eslint/js": "^9.1.1",
+    "@playwright/test": "^1.43.1",
+    "@types/node": "^20.12.7",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.34.1",
+    "globals": "^15.0.0",
+    "prettier": "^3.2.5",
+    "typescript": "*"
+  },
+  "scripts": {
+    "build": "tsc --noEmit",
+    "lint": "eslint \"**/*.{ts,tsx}\""
+  },
+  "description": "playwright test project",
+  "repository": "https://github.com/hwinther/test",
+  "author": "hwinther",
+  "private": true
+}

tests/playwright/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* 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,
+  /* 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. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      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 */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});