Playwright testing (#13)

* Initial set up

* Updated testing scripts

* Update playwright version(1.40)

* Updated testing scripts

* Fixes on testing scripts

playwright/ci-test/.envrc

@@ -0,0 +1 @@
+use nix

playwright/ci-test/.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+states
+package-lock.json
+playwright-results
+*auth.json

playwright/ci-test/README.md

@@ -0,0 +1,98 @@
+# Validation Tests
+
+These tests are designed to run from GitHub action or CI.
+
+They are intended to verify basic functionality is working during the building of the application(Just before deployment to staging or production).
+
+## Essential reading:
+
+* [https://playwright.dev/](https://playwright.dev/)
+* [https://playwright.dev/docs/ci-intro](https://playwright.dev/docs/ci-intro)
+* [https://direnv.net/docs/installation.html](https://direnv.net/docs/installation.html)
+
+## Setting up your environment
+
+Before you can run, you need to set up your environment.
+
+Running these tests requires playwright set up on your local machine, as well as NodeJS.
+
+### NixOS
+
+If you are a NixOS user, you can set up direnv and then cd into this directory in your shell.
+
+When you do so the first time, you will be prompted to allow direnv which you can do using this command:
+
+```bash
+direnv allow
+```
+
+>  This may take a while the first time as NixOS builds you a sandbox environment.
+
+### Non-NixOS
+
+For a non-NixOS user(Debian/Ubuntu) set up your environment by the following commands:
+
+```bash
+npm install
+```
+
+To install playwright browsers with OS-level dependencies use:
+
+```bash
+npx playwright install --with-deps chromium
+```
+
+**NOTE:** This only works with Debian/Ubuntu as they receive official support from playwright. It will also request your master password to install the dependencies.
+
+## Recording a test
+
+There is a bash helper script that will let you quickly create a new test:
+
+```
+Usage: ./record-test.sh TESTNAME
+e.g. ./record-test.sh mytest
+will write a new test to tests/mytest.spec.ts
+Do not use spaces in your test name.
+Test files MUST END in .spec.ts
+
+After recording your test, close the test browser.
+You can then run your test by doing:
+./run-tests.sh
+```
+
+>  The first time you record a test, it will store your session credentials in a file ending in ``auth.json``. This file should **NEVER** be committed to git / shared publicly. There is a gitignore rule to ensure this.
+
+## Running a test
+
+By default, this will run in `headless` mode just as it is in CI.
+
+```bash
+./run-tests.sh
+```
+
+**NOTE:** To run it in `UI` mode, add the `--ui` tag to the script.
+
+```bash
+$PLAYWRIGHT \
+    test \
+    --ui \
+    --project chromium
+```
+
+## Adding a CI test
+
+To add tests for CI, use the recorded tests then modify it for CI.
+
+The tests can be modified to include time-outs, and waiting for events/actions etc. For more look go through [playwright's documentation](https://playwright.dev/docs/writing-tests).
+
+An example of a line-recorded test would look like:
+
+```typescript
+await page.getByRole('img', { name: 'image' }).click();
+```
+
+For the CI the line could be modified and turned into an assertion using `expect` to test if the specific element is visible.
+
+```typescript
+await expect(page.getByRole('img', { name: 'image' })).toBeVisible();
+```

playwright/ci-test/base-url.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+echo "Setting BASE_URL for test site"
+BASE_URL=http://localhost:61100

playwright/ci-test/create-auth.sh

@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+
+source base-url.sh
+
+source playwright-path.sh
+
+echo "This script will write a new test to tests/deleteme.spec.ts"
+echo "then delete it, leaving only the auth config."
+echo ""
+echo "When the playwright browser opens, log in to the site then exit."
+echo "After recording your test, close the test browser."
+echo "Recording auth token to auth.json"
+
+# File exists and write permission granted to user
+# show prompt
+echo "Continue? y/n"
+read ANSWER
+case $ANSWER in 
+  [yY] ) echo "Writing auth.json" ;;
+  [nN] ) echo "Cancelled."; exit ;;
+esac
+
+$PLAYWRIGHT \
+	codegen \
+	--target playwright-test \
+	--save-storage=auth.json \
+	-o tests/deleteme.spec.ts \
+	$BASE_URL
+
+# We are only interested in auth.json
+rm tests/deleteme.spec.ts
+
+echo "Auth file creation completed."
+echo "You can then run your tests by doing e.g.:"
+echo "playwright test --project chromium"

playwright/ci-test/nodesource-install.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+
+echo "NodeJS will be installed if not present"
+echo "sudo password will be required"
+
+USES_APT=$(which apt | grep -w "apt" | wc -l)
+USES_RPM=$(which rpm | grep -w "rpm" | wc -l)
+
+if [ $USES_APT -eq 1 ]; then 
+	curl -SLO https://deb.nodesource.com/nsolid_setup_deb.sh
+	sudo chmod 500 nsolid_setup_deb.sh
+	sudo ./nsolid_setup_deb.sh 20
+	sudo apt-get install nodejs -y
+
+elif [ $USES_RPM -eq 1 ]; then
+	curl -SLO https://rpm.nodesource.com/nsolid_setup_rpm.sh
+	sudo chmod 500 nsolid_setup_rpm.sh
+	sudo ./nsolid_setup_rpm.sh 20
+	sudo yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1
+fi
+
+echo "Done"
+echo ""

playwright/ci-test/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "ci-test",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.39.0",
+    "@types/node": "^20.8.9"
+  },
+  "dependencies": {
+    "playwright": "^1.39.0"
+  }
+}

playwright/ci-test/playwright-path.sh

@@ -0,0 +1,83 @@
+#!/usr/bin/env bash
+
+echo "This script will discover the path to your playwright install"
+echo "If you are not in a NixOS environment and it is not installed,"
+echo "playwright will be installed."
+echo ""
+echo "At the end of calling this script , you should have a PLAYWRIGHT"
+echo ""
+
+# Are we on nixos or a distro with Nix installed for packages
+# Y
+  # Are we in direnv?
+  # Y: should all be set up
+  # N: run nix-shell
+#N
+ # Are we in a deb based distro?
+ # Are we in an rpm based distro?
+ # Are we on macOS?
+ # Are we in windows?
+
+HAS_PLAYWRIGHT=$(which playwright 2> /dev/null | grep -v "which: no" | wc -l)
+PLAYWRIGHT="playwright"
+if [ $HAS_PLAYWRIGHT -eq 0 ]; then
+	PLAYWRIGHT="npx playwright"
+
+    	# check if OS is a deb based distro and uses apt
+    	USES_APT=$(which apt 2> /dev/null | grep -w "apt" | wc -l)
+		# check if OS is an rpm-based distro
+  		USES_RPM=$(which rpm | grep -w "rpm" | wc -l)
+
+    	if [ $USES_APT -eq 1 ]; then
+			# check if nodejs is installed
+			HAS_NODEJS=$(which node | grep -w "node" | wc -l)
+
+			# if nodejs is present then
+    		if [ $HAS_NODEJS -eq 0 ]; then
+			source nodesource-install.sh
+    		fi
+
+    		# check if npm is present
+    		HAS_NPM=$(which npm | grep -w "npm" | wc -l)
+
+    		if [ $HAS_NPM -eq 1 ]; then
+				NPM="npm"
+				PLAYWRIGHT_INSTALL=$($NPM ls --depth 1 playwright | grep -w "@playwright/test" | wc -l)
+
+				if [ $PLAYWRIGHT_INSTALL -eq 0 ]; then
+					$NPM install -D @playwright/test@latest
+					$NPM ci
+					$PLAYWRIGHT install --with-deps chromium
+				fi
+
+    		fi
+
+  		elif [ $USES_RPM -eq 1 ]; then
+
+    			# check if nodejs is installed
+    			HAS_NODEJS=$(which node | grep -w "node" | wc -l)
+
+    			# if nodejs is present then
+    			if [ $HAS_NODEJS -eq 0 ]; then
+      				source nodesource-install.sh
+    			fi
+
+    			# check if npm is present
+    			HAS_NPM=$(which npm | grep -w "npm" | wc -l)
+
+    			if [ $HAS_NPM -eq 1 ]; then
+      				NPM="npm"
+					PLAYWRIGHT_INSTALL=$($NPM ls --depth 1 playwright | grep -w "@playwright/test" | wc -l)
+
+      				if [ $PLAYWRIGHT_INSTALL -eq 0 ]; then
+        				$NPM install -D @playwright/test@latest
+        				$NPM ci
+        				$PLAYWRIGHT install
+      				fi
+
+    			fi
+		fi
+fi
+
+echo "Done."
+echo ""

playwright/ci-test/playwright.config.ts

@@ -0,0 +1,86 @@
+
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+
+//require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  timeout: 30 * 1000,
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    baseURL: process.env.STAGING === '1' ? 'http://example.com' : 'http://localhost:61100/'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    { name: 'setup', testMatch: /.*\.setup\.ts/ },
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'],
+      // Use prepared auth state.
+      storageState: 'auth.json',
+     },
+     dependencies: ['setup'],
+    },
+    //
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});