feat: Add qwik add command for Nightwatch.

packages/docs/src/routes/docs/integrations/nightwatch/index.mdx

@@ -0,0 +1,24 @@
+---
+title: Nightwatch | Integrations
+keywords: 'e2e, testing'
+contributors:
+  - garg3133
+---
+
+# Nightwatch
+
+[Nightwatch](https://nightwatchjs.org) is an integrated end-to-end testing framework powered by [W3C WebDriver API](https://w3c.github.io/webdriver/), the standard for browser automation.
+This allows Nightwatch to run e2e tests against _real browsers_ (not browser engines) on both desktop and mobile platforms.
+
+## Usage
+
+You can add Nightwatch easily by using the following Qwik starter script:
+
+```shell
+npm run qwik add nightwatch
+```
+
+This command will install `nightwatch` into your project, along with two other dependencies, add a `test.e2e` script to your `package.json`, and create a default configuration file named `nightwatch.conf.cjs`.
+It will also add an example test within a newly created `test` folder which can be run against the Qwik starter application.
+
+For further reference, please check the [Nightwatch documentation](https://nightwatchjs.org/guide/).

packages/docs/src/routes/docs/menu.md

@@ -66,6 +66,7 @@
 - [Image Optimization](integrations/image-optimization/index.mdx)
 - [Leaflet Map](integrations/leaflet-map/index.mdx)
 - [Modular Forms](integrations/modular-forms/index.mdx)
+- [Nightwatch](integrations/nightwatch/index.mdx)
 - [Nx Monorepos](integrations/nx/index.mdx)
 - [OG Image](integrations/og-img/index.mdx)
 - [Orama](integrations/orama/index.mdx)

starters/features/nightwatch/nightwatch.conf.cjs

@@ -0,0 +1,147 @@
+// 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: ["test"],
+
+  // See https://nightwatchjs.org/guide/concepts/page-object-model.html
+  page_objects_path: [],
+
+  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-commands.html
+  custom_commands_path: [],
+
+  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-assertions.html
+  custom_assertions_path: [],
+
+  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-plugins.html
+  plugins: [],
+
+  // See https://nightwatchjs.org/guide/concepts/test-globals.html
+  globals_path: "nightwatch/globals.js",
+
+  baseUrl: "http://localhost:4173",
+
+  webdriver: {},
+
+  test_workers: {
+    enabled: true,
+  },
+
+  test_settings: {
+    default: {
+      disable_error_log: false,
+
+      screenshots: {
+        enabled: false,
+        path: "screens",
+        on_failure: true,
+      },
+
+      desiredCapabilities: {
+        browserName: "chrome",
+      },
+
+      webdriver: {
+        start_process: true,
+        server_path: "",
+      },
+    },
+
+    safari: {
+      desiredCapabilities: {
+        browserName: "safari",
+        alwaysMatch: {
+          acceptInsecureCerts: false,
+        },
+      },
+      webdriver: {
+        start_process: true,
+        server_path: "",
+      },
+    },
+
+    firefox: {
+      desiredCapabilities: {
+        browserName: "firefox",
+        alwaysMatch: {
+          acceptInsecureCerts: true,
+          "moz:firefoxOptions": {
+            args: [
+              // '-headless',
+              // '-verbose'
+            ],
+          },
+        },
+      },
+      webdriver: {
+        start_process: true,
+        server_path: "",
+        cli_args: [
+          // very verbose geckodriver logs
+          // '-vv'
+        ],
+      },
+    },
+
+    chrome: {
+      desiredCapabilities: {
+        browserName: "chrome",
+        "goog:chromeOptions": {
+          // More info on Chromedriver: https://sites.google.com/a/chromium.org/chromedriver/
+          args: [
+            //'--no-sandbox',
+            //'--ignore-certificate-errors',
+            //'--allow-insecure-localhost',
+            //'--headless=new'
+          ],
+        },
+      },
+
+      webdriver: {
+        start_process: true,
+        server_path: "",
+        cli_args: [
+          // --verbose
+        ],
+      },
+    },
+
+    edge: {
+      desiredCapabilities: {
+        browserName: "MicrosoftEdge",
+        "ms:edgeOptions": {
+          // More info on EdgeDriver: https://docs.microsoft.com/en-us/microsoft-edge/webdriver-chromium/capabilities-edge-options
+          args: [
+            //'--headless=new'
+          ],
+        },
+      },
+
+      webdriver: {
+        start_process: true,
+        server_path: "",
+        cli_args: [
+          // --verbose
+        ],
+      },
+    },
+  },
+
+  usage_analytics: {
+    enabled: true,
+    log_path: "./logs/analytics",
+    client_id: "7adb2ef4-e58a-4d84-be15-0d3983b28f9d",
+  },
+};

starters/features/nightwatch/nightwatch/globals.js

@@ -0,0 +1,33 @@
+import chalk from 'chalk';
+import waitOn from 'wait-on';
+import path from 'path';
+import { spawn, spawnSync } from 'child_process';
+
+let vitePreview = null;
+
+export default {
+  async before() {
+    console.info(chalk.dim(' ℹ Starting Vite preview server...'));
+
+    spawnSync(path.resolve('node_modules/.bin/qwik'), ['build', 'preview'], { cwd: process.cwd() });
+
+    vitePreview = spawn(path.resolve('node_modules/.bin/vite'), ['preview', '--host'], {
+      cwd: process.cwd()
+    });
+
+    return waitOn({
+      resources: [this.settings.baseUrl],
+      timeout: 5000,
+    }).then(() => {
+      console.info(chalk.dim(' ℹ Vite preview server running.'));
+    });
+  },
+
+  async after() {
+    if (vitePreview) {
+      console.info(chalk.dim('\n ℹ Stopping Vite preview server...'));
+      vitePreview.kill('SIGTERM');
+      console.info(chalk.dim(' ℹ Vite preview server stopped.'));
+    }
+  },
+}

starters/features/nightwatch/nightwatch/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true
+  },
+  "ts-node": {
+    "transpileOnly": true
+  },
+  "include": ["."]
+}

starters/features/nightwatch/package.json

@@ -0,0 +1,21 @@
+{
+  "description": "Use Nightwatch to run E2E tests into your Qwik app",
+  "__qwik__": {
+    "displayName": "Integration: Nightwatch (E2E Test)",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://qwik.dev/docs/integrations/nightwatch/",
+      "https://nightwatchjs.org/guide/",
+      "https://nightwatchjs.org/guide/quickstarts/create-and-run-a-nightwatch-test.html"
+    ]
+  },
+  "devDependencies": {
+    "nightwatch": "^3.6.3",
+    "ts-node": "^10.9.2",
+    "wait-on": "^7.2.0"
+  },
+  "scripts": {
+    "test.e2e": "nightwatch ./test"
+  }
+}

starters/features/nightwatch/test/example.ts

@@ -0,0 +1,42 @@
+import { browser } from "nightwatch";
+
+describe("Nightwatch demo test", () => {
+  before(async function () {
+    // navigate to baseUrl
+    await browser.navigateTo("/");
+  });
+
+  it("should have correct title", async function () {
+    // assert the title
+    const title = await browser.getTitle();
+    browser.assert.equal(title, "Welcome to Qwik");
+
+    // other way of asserting on title
+    browser.assert.titleContains("Qwik");
+  });
+
+  it("test the working of counter", async () => {
+    // find element by text using xpath
+    const countUpButton = browser.element.find(by.xpath('//*[text()="+"]'));
+
+    // another better way to find element by text
+    const countDownButton = browser.element.findByText("-");
+
+    // get the counter element (next sibling of the `-` element)
+    const counterElement = countDownButton.getNextElementSibling();
+
+    // assert the current value of the counter
+    counterElement.getText().assert.equals("70");
+
+    // click the "+" button 5 times
+    for (let i = 0; i < 5; i++) {
+      countUpButton.click();
+    }
+
+    // uncomment the below line to visualize the change
+    // browser.pause(2000);
+
+    // assert the new value of the counter
+    counterElement.getText().assert.equals("75");
+  });
+});