feat: 🎸 adding playwright (#48)

fix: 🐛 addressing setup

fix: 🐛 addressing test coverage command

fix: 🐛 updated to remove not needed extra test

fix: 🐛 addressing percy

fix: 🐛 addressing ci percy

fix: 🐛 addressing build before CI

fix: 🐛 addressing directory

fix: 🐛 addressing cypress references

chore: 🤖 updating packages

.eslintrc.js

@@ -9,7 +9,6 @@ module.exports = {
     "plugin:react/recommended",
     "standard",
     "plugin:prettier/recommended",
-    "plugin:cypress/recommended",
     "plugin:security/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:storybook/recommended",

.github/workflows/githubactions.yml

@@ -9,15 +9,15 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20]
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/cache@v3
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v4
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: "npm"
@@ -27,16 +27,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20]
     needs: [build]
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -51,16 +51,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20]
     needs: [build]
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -73,36 +73,46 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20]
     needs: [build]
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
       - name: Install npm
         if: steps.npm-cache.outputs.cache-hit != 'true'
         run: npm install
-      - name: Cypress install
-        run: npx cypress install
       - name: Run Build
         run: npm run build
+      - name: Playwright install
+        run: npx playwright install --with-deps
+      - name: Install Percy CLI
+        run: npm install --save-dev @percy/cli
+      - name: Run Percy Snapshot
+        run: npx percy snapshot dist/
       - name: Run e2e
         run: npm run e2e:test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
   sonarcloud:
     name: SonarCloud
     runs-on: ubuntu-latest
     needs: [build]
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
       with:
         fetch-depth: 0
     - name: Get main
@@ -122,13 +132,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20]
     needs: [build]
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20
       - run: npm install && npm install -g @lhci/[email protected]
       - run: npm run build
       - run: lhci autorun
@@ -138,11 +148,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20]
     needs: [lint, test, e2e_visual_a11y, lighthouseci, sonarcloud]
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
         run: |

.gitignore

@@ -40,3 +40,8 @@ yarn-error.log*
 # IDE's
 .vscode
 .idea
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -71,7 +71,7 @@ _or even **npm run coverage** which outputs a report of the unit coverage_
 
 or automatically if a husky git hook is enabled via `.huskyrc` file, if testing is bypassed with `--no-verify` it is caught in the CI/CD checks in Github Actions upstream
 
-**Useful Chrome Extension** - https://chrome.google.com/webstore/detail/testing-library-which-que/olmmagdolfehlpjmbkmondggbebeimoh?hl=en-US
+**Useful Chrome Extension** - <https://chrome.google.com/webstore/detail/testing-library-which-que/olmmagdolfehlpjmbkmondggbebeimoh?hl=en-US>
 
 #### [Commitlint](https://commitlint.js.org/#/) ( Commit messages that connect to JIRA tickets )
 
@@ -93,17 +93,17 @@ Similar to other tools like TravisCI, CircleCI, GitLab, Bitbucket, Codepipeline
 
 [Github Actions](https://github.com/Loonz806/setup-example/actions)
 
-#### [Cypress](https://docs.cypress.io/guides/overview/why-cypress.html) ( Running against a local build before deploying but can be modified )
+#### [Playwright](https://playwright.dev/) ( Running against a local build before deploying but can be modified )
 
-_runs e2e testing against browsers such as Chrome, Edge and Firefox to do some actual dom assertions covering lions share of browsers_
+_runs e2e testing against browsers such as Chrome, Edge, Safari and Firefox to do some actual dom assertions covering lions share of browsers_
 
 Similar to other tools like TravisCI, CircleCI, GitLab, Bitbucket, Codepipeline etc. Configuration found in `.github/workflows`
 Runs as a dependency in CI as well for deployment but can be modified via the Github Action
 
 To run locally via GUI ( be sure to have application running on separate terminal)
 
 ```
-npx open cypress
+npx playwright test
 ```
 
 Or the headless report
@@ -115,11 +115,12 @@ npm run e2e:test
 Which downloads the latest browserlist and runs e2e's on it.
 
 **Userful Chrome Extensions**
-(Cypress Recorder Chrome Extension)[https://chrome.google.com/webstore/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab?hl=en-US]
 
 #### [Percy](https://percy.io) ( Running visual regression testing in the e2e test suite in which needs approval from QA to be passing )
 
-_snap shots at/in the cypress e2e testing creates a screen comparison tool for regression for visuals that is automated and can scale against browsers such as Chrome, Edge and Firefox_
+TODO: addressing Percy for Playwright
+
+_snap shots at/in the playwright e2e testing creates a screen comparison tool for regression for visuals that is automated and can scale against browsers such as Chrome, Edge and Firefox_
 
 Similar to other tools like TravisCI, CircleCI, GitLab, Bitbucket, Codepipeline etc. Configuration found in `.github/workflows`
 Runs as a dependency in CI as well for deployment but can be modified via the Github Action
@@ -133,16 +134,16 @@ _regresses individual builds against the preset for non:pwa application standard
 Similar to other tools like TravisCI, CircleCI, GitLab, Bitbucket, Codepipeline etc. Configuration found in `.github/workflows`
 Runs as a dependency in CI as well for deployment but can be modified via the Github Action
 
-#### [axe-core](https://github.com/dequelabs/axe-core) + [cypress-axe](https://www.npmjs.com/package/cypress-axe)
+#### [@axe-core/playwright](https://www.npmjs.com/package/@axe-core/playwright)
 
 _regress individual builds against the a11y recommended axe-core library for introductions of malformed html, mislabeled aria-roles_
 
-Code is folded into the cypress e2e testing suite.
+Code is folded into the Playwright e2e testing suite.
 Similar to other tools like TravisCI, CircleCI, GitLab, Bitbucket, Codepipeline etc. Configuration found in `.github/workflows`
 Runs as a dependency in CI as well for deployment but can be modified via the Github Action
 
 **Useful Chrome Extensions**
-(axe DevTools - Web Accessibility Testing)[https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US]
+[axe DevTools - Web Accessibility Testing](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)
 
 #### [Storybook](https://storybook.js.org/)