feat: added nightwatch tests on preview url (#337)

* added nightwatch tests on preview url

* update e2e test workflow

* update e2e workflow

* run e2e test in serial mode

* update e2e workflow

* added nightwatch tests

* run workflow on deployment

* add nightwatch tests in deploy preview

* fixed nightwatch test github workflow

* fix e2e test workflow

* refactor nightwatch tests

* run e2e test on browserstack

* run tests sequentially

* fix test and api key

* add verbose logs for e2e tests

* inherit secrets for e2e test workflow

* Run tests in parallel

---------

Co-authored-by: Ravi Sawlani <[email protected]>
Co-authored-by: Prag Tech <[email protected]>

.github/workflows/deploy-preview.yml

@@ -71,3 +71,9 @@ jobs:
           QSTASH_TOKEN: ${{ secrets.QSTASH_TOKEN }}
           GA4_API_SECRET: ${{ secrets.GOOGLE_ANALYTICS_MEASUREMENT_PROTOCOL_API_SECRET }}
           NSFW_GRPC_TOKEN: ${{ secrets.TOKEN_TO_SIGN_OUTGOING_CALLS_TO_NSFW_DETECT_SERVICE }}
+
+  e2e-tests: 
+    needs: preview
+    uses: ./.github/workflows/e2e-tests.yml
+    secrets: inherit
+

.github/workflows/e2e-tests.yml

@@ -0,0 +1,33 @@
+name: nightwatch tests
+on:
+  workflow_call: 
+
+jobs:
+  tests: 
+    name: 'nightwatch tests'
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "22.x"
+
+      - name: Install dependencies
+        run: |
+            cd tests/e2e
+            npm ci
+
+      - name: Run Nightwatch tests
+        run: |
+            cd tests/e2e
+            npm test
+        env: 
+            PREVIEW_URL: https://pr-${{github.event.number}}-go-bazzinga-hot-or-not-web-leptos-ssr.fly.dev
+            BUILD_NAME: PR-${{github.event.number}}-attempt-${{github.run_attempt}}
+            BROWSERSTACK_USER_NAME: ${{vars.BROWSERSTACK_USER_NAME}}
+            BROWSERSTACK_ACCESS_KEY: ${{secrets.BROWSERSTACK_API_KEY}}

.gitignore

@@ -8,6 +8,9 @@ pkg
 
 # node e2e test tools and outputs
 node_modules/
+tests_output/
+vrt-report/
+logs/
 test-results/
 ssr/end2end/playwright-report/
 playwright/.cache/

tests/e2e/nightwatch.conf.js

@@ -0,0 +1,110 @@
+// Refer to the online docs for more details:
+// https://nightwatchjs.org/gettingstarted/configuration/
+//
+
+//  _   _  _         _      _                     _          _
+// | \ | |(_)       | |    | |                   | |        | |
+// |  \| | _   __ _ | |__  | |_ __      __  __ _ | |_   ___ | |__
+// | . ` || | / _` || '_ \ | __|\ \ /\ / / / _` || __| / __|| '_ \
+// | |\  || || (_| || | | || |_  \ V  V / | (_| || |_ | (__ | | | |
+// \_| \_/|_| \__, ||_| |_| \__|  \_/\_/   \__,_| \__| \___||_| |_|
+//             __/ |
+//            |___/
+
+module.exports = {
+  // An array of folders (excluding subfolders) where your tests are located;
+  // if this is not specified, the test source must be passed as the second argument to the test runner.
+  src_folders: ['src'],
+
+  // See https://nightwatchjs.org/guide/concepts/page-object-model.html
+  // page_objects_path: ['nightwatch/page-objects'],
+
+  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-commands.html
+  // custom_commands_path: ['nightwatch/custom-commands'],
+
+  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-assertions.html
+  // custom_assertions_path: ['nightwatch/custom-assertions'],
+
+  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-plugins.html
+
+  // See https://nightwatchjs.org/guide/concepts/test-globals.html
+  globals_path: '',
+
+  webdriver: {},
+
+  test_workers: {
+    enabled: true
+  },
+
+  test_settings: {
+
+
+
+
+    default: {
+      disable_error_log: false,
+      launch_url: '${PREVIEW_URL}',
+
+      screenshots: {
+        enabled: false,
+        path: 'screens',
+        on_failure: true
+      },
+
+      desiredCapabilities: {
+        browserName: 'firefox'
+      },
+
+      webdriver: {
+        start_process: true,
+        server_path: ''
+      },
+
+    },
+
+    chrome: {
+      extends: 'default',
+      desiredCapabilities: {
+        browserName: 'chrome'
+      }
+    },
+
+    browserstack: {
+      selenium: {
+        host: 'hub.browserstack.com',
+        port: 443
+      },
+      // More info on configuring capabilities can be found on:
+      // https://www.browserstack.com/automate/capabilities?tag=selenium-4
+      desiredCapabilities: {
+        'bstack:options': {
+          userName: '${BROWSERSTACK_USER_NAME}',
+          accessKey: '${BROWSERSTACK_ACCESS_KEY}',
+          buildName: '${BUILD_NAME}'
+        }
+      },
+
+      disable_error_log: true,
+      webdriver: {
+        timeout_options: {
+          timeout: 15000,
+          retry_attempts: 3
+        },
+        keep_alive: true,
+        start_process: false
+      }
+    },
+
+    'browserstack.chrome': {
+      extends: 'browserstack',
+      desiredCapabilities: {
+        browserName: 'chrome',
+        chromeOptions: {
+          w3c: true
+        }
+      }
+    },
+
+  },
+
+};