START-4 add playwright

Author: scytacki

.github/workflows/ci.yml

@@ -33,10 +33,6 @@ jobs:
       - uses: actions/setup-node@v4
       - name: Install Dependencies
         run: npm ci
-        env:
-          # skip installing cypress since it isn't needed for just building
-          # This decreases the deploy time quite a bit
-          CYPRESS_INSTALL_BINARY: 0
       - uses: concord-consortium/s3-deploy-action@v1
         id: s3-deploy
         with:

.github/workflows/playwright.yml

@@ -0,0 +1,47 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps chromium
+    - name: Run Playwright tests
+      run: npx playwright test
+      env:
+        PLAYWRIGHT_CI: "true"
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v5
+      with:
+        flags: playwright
+        token: ${{ secrets.CODECOV_TOKEN }}
+    - uses: concord-consortium/s3-deploy-action/deploy-path@v1
+      if: always()
+      id: s3-deploy-path
+    - name: Upload Playwright Report
+      if: always()
+      run: aws s3 sync ./playwright-report s3://models-resources/codap-plugin-starter-project/playwright-report/${{ steps.s3-deploy-path.outputs.deployPath }} --delete --cache-control "no-cache, max-age=0"
+      env:
+        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+    # This report summary action only works when it is run during a pull_request event. It uses
+    # the info from the event to figure out what PR to add/update the comment on. At some point
+    # it might be useful to update this action to support push events for branches attached to
+    # PRs. That can be handled by this approach:
+    # https://github.com/bcgov/action-get-pr/blob/main/action.yml
+    - uses: daun/playwright-report-summary@v3
+      if: always()
+      with:
+        report-file: results.json
+        report-url: https://models-resources.concord.org/codap-plugin-starter-project/playwright-report/${{ steps.s3-deploy-path.outputs.deployPath }}/

.gitignore

@@ -3,7 +3,8 @@
 
 # testing
 /coverage
-cypress/screenshots/
+/playwright-report
+/test-results
 
 # production
 /build

codecov.yml

@@ -0,0 +1,9 @@
+ignore:
+  # We don't care about the coverage of the imported codap files
+  - "src/codap"
+fixes:
+  # In the coverage generated by Playwright testing the plugin embedded
+  # in CODAP a `codap-plugin-starter-project/` prefix is added to all of the paths.
+  # the line below strips that prefix off so Codecov can match the
+  # coverage info with the files in this repository.
+  - "codap-plugin-starter-project/::"

cypress.config.ts

@@ -13,15 +13,15 @@ import typescriptEslint, { configs as tsConfigs } from "typescript-eslint";
 import js from "@eslint/js";
 import comments from "@eslint-community/eslint-plugin-eslint-comments/configs";
 import { flatConfigs as importPluginConfig } from "eslint-plugin-import";
-import pluginCypress from "eslint-plugin-cypress/flat";
+import playwright from "eslint-plugin-playwright";
 
-// This helper `config()` function replaces the basic [] used by 
+// This helper `config()` function replaces the basic [] used by
 // eslint normally:
 // https://typescript-eslint.io/packages/typescript-eslint#config
 export default typescriptEslint.config(
   {
     name: "ignore dist and node_modules",
-    ignores: ["dist/", "node_modules/", ".vscode/", "old.*"]  
+    ignores: ["dist/", "node_modules/", ".vscode/", "old.*"]
   },
   js.configs.recommended,
   tsConfigs.recommended,
@@ -84,8 +84,8 @@ export default typescriptEslint.config(
       "eqeqeq": ["error", "smart"],
       "@eslint-community/eslint-comments/no-unused-disable": "off",   // enabled in eslint.build.config.mjs
       // Note: this has caused slowdowns in large projects
-      "import/no-cycle": "warn",      
-      // Note: this has caused problems with overridden or aliased dependencies 
+      "import/no-cycle": "warn",
+      // Note: this has caused problems with overridden or aliased dependencies
       // like the Concord mobx-state-tree override
       "import/no-extraneous-dependencies": "warn",
       "import/no-useless-path-segments": "warn",
@@ -99,7 +99,7 @@ export default typescriptEslint.config(
       "no-tabs": "error",
       "no-unneeded-ternary": "error",
       // there is a recommended typescript rule for this too, so this might be redundant
-      "no-unused-expressions": ["error", { allowShortCircuit: true }], 
+      "no-unused-expressions": ["error", { allowShortCircuit: true }],
       "no-unused-vars": "off",  // superseded by @typescript-eslint/no-unused-vars
       "no-useless-call": "error",
       "no-useless-concat": "error",
@@ -128,10 +128,10 @@ export default typescriptEslint.config(
   },
   // The projectService is required to use the @typescript-eslint/prefer-optional-chain rule
   // The projectService does not work well with files that aren't configured by a tsconfig.json
-  // file, so we only apply it to the files in src and cypress.
+  // file, so we only apply it to the files in src and playwright.
   {
-    name: "rules only for project and cypress typescript files",
-    files: ["src/**/*.ts", "src/**/*.tsx", "cypress/**/*.ts", "cypress/**/*.tsx"],
+    name: "rules only for project and playwright typescript files",
+    files: ["src/**/*.ts", "src/**/*.tsx", "playwright/**/*.ts", "playwright/**/*.tsx"],
     languageOptions: {
       parserOptions: {
         projectService: true,
@@ -163,40 +163,35 @@ export default typescriptEslint.config(
       "jest/no-done-callback": "off"
     }
   },
-  { 
-    name: "rules specific to Cypress tests",
-    files: ["cypress/**"],
-    extends: [
-      pluginCypress.configs.recommended
-    ],
+  {
+    ...playwright.configs["flat/recommended"],
+    name: "rules specific to Playwright tests",
+    files: ["playwright/**"],
     rules: {
-      "@typescript-eslint/no-require-imports": "off",
-      "@typescript-eslint/no-non-null-assertion": "off",
-      "@typescript-eslint/no-var-requires": "off",
-      "cypress/no-unnecessary-waiting": "off"
+      ...playwright.configs["flat/recommended"].rules
     }
   },
   {
     name: "json files",
     files: ["**/*.json"],
     ...json.configs.recommended
   },
-  { 
+  {
     name: "eslint configs",
     files: ["eslint.*.mjs"],
     languageOptions: {
       globals: {
         ...globals.node
-      },      
+      },
     },
-  },    
+  },
   {
     name: "webpack configs",
     files: ["webpack.config.js"],
     languageOptions: {
       globals: {
         ...globals.node
-      },      
+      },
     },
     rules: {
       "@typescript-eslint/no-require-imports": "off",
@@ -210,7 +205,7 @@ export default typescriptEslint.config(
     languageOptions: {
       globals: {
         ...globals.node
-      },      
+      },
     },
     rules: {
       "@typescript-eslint/no-require-imports": "off",