chore(web): Migrate cypress web e2e suite to playwright

.deepsource.toml

@@ -4,7 +4,6 @@ test_patterns = [
   "apps/api/src/**/**/*.spec.ts",
   "apps/api/e2e/**/*.e2e.ts",
   "apps/api/src/**/*.e2e.ts",
-  "apps/web/cypress/**/*.spec.ts",
   "apps/widget/cypress/**/*.spec.ts"
 ]
 

.github/actions/setup-project/action.yml

@@ -3,10 +3,6 @@ name: Setup Novu Monorepo
 description: Sets up the whole monorepo and install dependencies
 
 inputs:
-  cypress_version:
-    description: 'The version of cypress to install'
-    required: false
-    default: ''
   slim:
     description: 'Should only install dependencies and checkout code'
     required: false
@@ -47,22 +43,6 @@ runs:
       with:
         mongodb-version: 4.2.8
 
-    - name: Cache Cypress Binary For Version
-      id: cache-cypress-binary-version
-      if: ${{ inputs.cypress_version != '' }}
-      uses: actions/cache@v3
-      with:
-        path: /home/runner/.cache/Cypress/${{ inputs.cypress_version }}
-        key: cypress-binary-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ inputs.cypress_version }}
-
-    - name: Cache Cypress Binary
-      id: cache-cypress-binary
-      if: ${{ inputs.cypress_version == '' }}
-      uses: actions/cache@v3
-      with:
-        path: /home/runner/.cache/Cypress
-        key: cypress-binary-${{ hashFiles('**/pnpm-lock.yaml') }}
-
     - name: 🛟 Install dependencies
       shell: bash
       run: pnpm install --frozen-lockfile

.github/workflows/reusable-web-e2e.yml

@@ -68,7 +68,6 @@ jobs:
       - uses: ./.github/actions/setup-project
         id: setup-project
         with:
-          cypress: true
           submodules: true
 
       - uses: mansagroup/nrwl-nx-action@v3
@@ -93,7 +92,7 @@ jobs:
           REACT_APP_API_URL: http://127.0.0.1:1336
           REACT_APP_WS_URL: http://127.0.0.1:1340
           REACT_APP_WEBHOOK_URL: http://127.0.0.1:1341
-          REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID: ${{ secrets.TEST_LAUNCH_DARKLY_CLIENT_SIDE_ID }}
+          REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID: some_fake_id
         run: pnpm start:static:build &
 
       - name: Start WS
@@ -103,44 +102,14 @@ jobs:
       - name: Wait on Services
         run: wait-on --timeout=180000 http://127.0.0.1:1340/v1/health-check http://127.0.0.1:4200/
 
-      # run cypress install only when cache was not hit
-      - name: Cypress install
-        if: steps.setup-project.outputs.cypress_cache_hit != 'true'
-        working-directory: apps/web
-        run: pnpm cypress install
-
-      - uses: browser-actions/setup-chrome@latest
-        with:
-          chrome-version: "stable"
-      - run: |
-          echo "BROWSER_PATH=$(which chrome)" >> $GITHUB_ENV
-
-      - name: Cypress run e2e
-        uses: cypress-io/github-action@v6
-        env:
-          NODE_ENV: test
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_WEB_KEY }}
-          CYPRESS_GITHUB_USER_EMAIL: ${{ secrets.CYPRESS_GITHUB_USER_EMAIL }}
-          CYPRESS_GITHUB_USER_PASSWORD: ${{ secrets.CYPRESS_GITHUB_USER_PASSWORD }}
-          CYPRESS_IS_CI: true
-        with:
-          working-directory: apps/web
-          browser: "${{ env.BROWSER_PATH }}"
-          record: true
-          parallel: true
-          install: false
-          config-file: cypress.config.ts
-          spec: |
-            cypress/tests/**/*.spec.ts
-            ${{ steps.setup.outputs.has_token == 'true' && inputs.ee && 'cypress/tests/**/*.spec-ee.ts' }}
-
       - name: Playwright Install
         working-directory: apps/web
         run: pnpm playwright:install
 
       - name: Run Playwright tests
         working-directory: apps/web
+        env:
+          REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID: some_fake_id
         run: pnpm playwright:test --shard=${{ matrix.containers }}/${{ matrix.total }}
 
       - uses: actions/upload-artifact@v4
@@ -150,13 +119,6 @@ jobs:
           path: apps/web/blob-report
           retention-days: 1
 
-      - uses: actions/upload-artifact@v4
-        if: ${{ !cancelled() }}
-        with:
-          name: cypress-screenshots-${{ matrix.containers }}
-          path: apps/web/cypress/screenshots
-          retention-days: 30
-
   merge-reports:
     # Merge reports after playwright-tests, even if some shards have failed
     if: ${{ !cancelled() }}
@@ -190,53 +152,3 @@ jobs:
       if: failure()
       with:
         slackWebhookURL: ${{ secrets.SLACK_WEBHOOK_URL_ENG_FEED_GITHUB }}
-
-  component_web:
-    if: "!contains(github.event.head_commit.message, 'ci skip')"
-
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
-    timeout-minutes: 80
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v3
-
-      - uses: ./.github/actions/setup-project
-        id: setup-project
-
-      # Runs a single command using the runners shell
-      - name: Build
-        run: CI='' pnpm build:web --skip-nx-cache
-
-      # run cypress install only when cache was not hit
-      - name: Cypress install
-        if: steps.setup-project.outputs.cypress_cache_hit != 'true'
-        working-directory: apps/web
-        run: pnpm cypress install
-
-      - name: Run Component tests 🧪
-        uses: cypress-io/github-action@v6
-        env:
-          NODE_ENV: test
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_WEB_KEY }}
-          NODE_OPTIONS: --max_old_space_size=4096
-        with:
-          browser: chrome
-          working-directory: apps/web
-          install: false
-          component: true
-
-      - uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: cypress-screenshots
-          path: apps/web/cypress/screenshots
-
-      - name: Send Slack notifications
-        uses: ./.github/actions/slack-notify-on-failure
-        if: ${{ failure() || needs.e2e_web.result == 'failure' }}
-        with:
-          slackWebhookURL: ${{ secrets.SLACK_WEBHOOK_URL_ENG_FEED_GITHUB }}

.github/workflows/scheduled_e2e.yml

@@ -18,7 +18,7 @@ env:
 
 jobs:
   test_web:
-    name: Test Web Cypress
+    name: Test Web Playwright
     uses: ./.github/workflows/reusable-web-e2e.yml
     secrets: inherit
     with:

.github/workflows/test.yml

@@ -111,7 +111,7 @@ jobs:
           fi
 
   test_web:
-    name: Test Web Cypress
+    name: Test Web Playwright
     needs: [get-affected]
 #    if: ${{ contains(fromJson(needs.get-affected.outputs.test-cypress), '@novu/web') }}
     if: contains(github.event.pull_request.labels.*.name, 'run-e2e')

apps/api/package.json

@@ -15,6 +15,7 @@
     "start": "pnpm start:dev",
     "start:dev": "cross-env TZ=UTC nest start --watch",
     "start:test": "cross-env NODE_ENV=test PORT=1336 TZ=UTC nest start --watch",
+    "start:test-ee": "cross-env NODE_ENV=test NOVU_ENTERPRISE=true PORT=1336 TZ=UTC nest start --watch",
     "start:debug": "TZ=UTC nodemon --config nodemon-debug.json --debug",
     "start:prod": "pnpm start:build",
     "start:build": "TZ=UTC node dist/main.js",

apps/api/src/.env.test

@@ -2,7 +2,7 @@ GOOGLE_OAUTH_CLIENT_ID=11
 GOOGLE_OAUTH_CLIENT_SECRET=11
 GOOGLE_OAUTH_REDIRECT=http://127.0.0.1:3000/v1/auth/google/callback
 STORE_ENCRYPTION_KEY="<ENCRYPTION_KEY_MUST_BE_32_LONG>"
-BLUEPRINT_CREATOR=645b648b36dd6d25f8650d37
+BLUEPRINT_CREATOR=66507de8e76834a745c98f93
 
 CLIENT_SUCCESS_AUTH_REDIRECT=http://127.0.0.1:4200/auth/login
 

apps/api/src/app/events/e2e/send-message-push.e2e.ts

@@ -12,8 +12,6 @@ import { UserSession } from '@novu/testing';
 
 const axiosInstance = axios.create();
 
-const ORIGINAL_IS_MULTI_PROVIDER_CONFIGURATION_ENABLED = process.env.IS_MULTI_PROVIDER_CONFIGURATION_ENABLED;
-
 describe('Trigger event - Send Push Notification - /v1/events/trigger (POST)', () => {
   let session: UserSession;
   let template: NotificationTemplateEntity;
@@ -23,8 +21,6 @@ describe('Trigger event - Send Push Notification - /v1/events/trigger (POST)', (
   const messageRepository = new MessageRepository();
 
   before(async () => {
-    process.env.IS_MULTI_PROVIDER_CONFIGURATION_ENABLED = 'true';
-
     session = new UserSession();
     await session.initialize();
 
@@ -40,10 +36,6 @@ describe('Trigger event - Send Push Notification - /v1/events/trigger (POST)', (
     });
   });
 
-  after(() => {
-    process.env.IS_MULTI_PROVIDER_CONFIGURATION_ENABLED = ORIGINAL_IS_MULTI_PROVIDER_CONFIGURATION_ENABLED;
-  });
-
   describe('Multiple providers active', () => {
     before(async () => {
       const payload = {

apps/web/.env.playwirght.test → apps/web/.env.test

@@ -1,3 +1,4 @@
 NODE_ENV=test
 MONGODB_URL=mongodb://127.0.0.1:27017/novu-test
 API_URL=http://127.0.0.1:1336
+BLUEPRINT_CREATOR='66507de8e76834a745c98f93'

apps/web/.eslintrc.js

@@ -26,6 +26,11 @@ module.exports = {
           {
             name: '@novu/dal',
           },
+          {
+            name: '@playwright/test',
+            importNames: ['test'],
+            message: `please use import { test } from './utils.ts/baseTest' instead.`,
+          },
           // TODO: re-enable this once we have de-coupled web's build from linting
           /*
           {
@@ -50,12 +55,8 @@ module.exports = {
     'react-hooks/exhaustive-deps': 'warn',
     'import/extensions': 'off',
   },
-  env: {
-    'cypress/globals': true,
-  },
-  ignorePatterns: ['craco.config.js', 'cypress/*', '**/styled-system/**/*', 'tests/*'],
-  extends: ['plugin:cypress/recommended', '../../.eslintrc.js'],
-  plugins: ['cypress', 'react-hooks'],
+  ignorePatterns: ['craco.config.js', '**/styled-system/**/*'],
+  plugins: ['react-hooks'],
   parserOptions: {
     project: './tsconfig.json',
     ecmaVersion: 2020,

apps/web/.gitignore

@@ -24,9 +24,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-cypress/videos
-cypress/screenshots
-
 ## Panda
 styled-system
 styled-system-studio