Host: E2e test env

strr-host-pm-web/.env.example

@@ -45,4 +45,5 @@ PLAYWRIGHT_TEST_BCSC_PASSWORD=""
 PLAYWRIGHT_TEST_BCSC_PREMIUM_ACCOUNT_NAME=""
 PLAYWRIGHT_TEST_BCEID_USERNAME=""
 PLAYWRIGHT_TEST_BCEID_PASSWORD=""
-PLAYWRIGHT_TEST_BCEID_PREMIUM_ACCOUNT_NAME=""
+PLAYWRIGHT_TEST_BCEID_PREMIUM_ACCOUNT_NAME=""
+PLAYWRIGHT_TEST_BCEID_OTP_SECRET=""

strr-host-pm-web/README.md

@@ -19,3 +19,72 @@ Startup the development environment.
 ```bash
 pnpm run dev
 ```
+
+## E2E Testing
+
+To run Playwright in the terminal:
+```bash
+pnpm test:e2e
+```
+
+To run Playwright in ui mode:
+```bash
+pnpm test:e2e:ui
+```
+
+### Playwright Config
+
+The globalSetup option will create and save an auth user state which can then be used inside other tests:
+```js
+  globalSetup: './tests/e2e/test-utils/global-setup',
+```
+
+To run tests in headless mode, set the headless property in the Playwright config:
+```js
+  use: {
+    headless: true
+  }
+```
+
+### Environment Variables Setup
+
+Before running any e2e tests, ensure the `.env` file has the correct values. Missing or incorrect values will lead to test failures. Below are the required environment variables:
+
+```
+# Configures the login steps, anything other than 'Development' will try to login using the prod steps.
+NUXT_ENVIRONMENT_HEADER="Development"
+
+# playwright login, account name and BCEID secret
+PLAYWRIGHT_TEST_BCSC_USERNAME=""
+PLAYWRIGHT_TEST_BCSC_PASSWORD=""
+PLAYWRIGHT_TEST_BCSC_PREMIUM_ACCOUNT_NAME=""
+PLAYWRIGHT_TEST_BCEID_USERNAME=""
+PLAYWRIGHT_TEST_BCEID_PASSWORD=""
+PLAYWRIGHT_TEST_BCEID_PREMIUM_ACCOUNT_NAME=""
+PLAYWRIGHT_TEST_BCEID_OTP_SECRET=""
+
+# The full url the tests will run against (local/dev/test/sandbox)
+NUXT_BASE_URL=""
+```
+
+### Authentication
+
+The test runner creates a saved authentication state (storageState) stored in JSON files located at tests/e2e/.auth/. This state is used by the current smoke tests (as of 2025/01/10) to maintain the authenticated session without re-entering credentials or OTPs repeatedly.
+
+To use this auth state in other tests:
+```js
+  test.describe('Describe Block', () => {
+    test.use({ storageState: `tests/e2e/.auth/${loginMethod.toLowerCase()}-user.json` })
+
+    test('My Test', async ({ page }) => {
+      // stuff
+    })
+  })
+```
+
+### Playwright Quirks
+
+- Tests using BCEID login that rely on a OTP (test/prod environments) should use the saved auth user state. Generating a new OTP for each test on login can cause the tests to fail.
+- A maximum of 4 workers seems to be the sweet spot for tests to pass without colliding with each other.
+- Setting to 1 worker will fully disable running tests in parallel.
+- Using the Playwright extension/testing tab does not execute the global setup and save the auth state. You must run `pnpm:e2e` to at least create the auth files before running tests with the extension.

strr-host-pm-web/app/locales/en-CA.ts

@@ -5,8 +5,8 @@ export default {
       title: 'Your property is in a location where the principal residence requirement applies.'
     },
     straaExempt: {
-      title: '{boldStart}Registration Not Required:{boldEnd} This address appears to be located on First Nations land and is therefore exempt from the {italicStart}Short-term Rental Accommodations Act{italicEnd}. You do not need to register a short-term rental at this address.',
-      note: 'Please check with the First Nations for any applicable Short-Term Rental regulations.'
+      title: '{boldStart}Registration Not Required:{boldEnd} This address appears to be located on First Nation land and is therefore exempt from the {italicStart}Short-term Rental Accommodations Act{italicEnd}. You do not need to register a short-term rental at this address.',
+      note: 'Please check with the First Nation for any applicable Short-Term Rental regulations.'
     },
     strProhibited: {
       title: 'Some types of short-term rentals are not permitted by your local government.',
@@ -16,7 +16,7 @@ export default {
     prExempt: {
       title: "Short-term rentals are allowed in any of the host's properties."
     },
-    propertyTypeReqUnitNumber: { // camelcase prop not working with ConnectI18nHelper component
+    propertyTypeReqUnitNumber: { // camelcase prop (propertytype) not working with ConnectI18nHelper component
       title: '{boldStart}Important:{boldEnd} {propertytype} requires a unit number as part of the Rental Unit Residential Address above. If you do not include a unit number, your registration {boldStart}may be declined{boldEnd}.'
     }
   },

strr-host-pm-web/package.json

@@ -2,7 +2,7 @@
   "name": "strr-host-pm-web",
   "private": true,
   "type": "module",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",
@@ -37,6 +37,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-tailwindcss": "^3.17.4",
     "happy-dom": "^14.12.3",
+    "otpauth": "^9.3.6",
     "playwright-core": "^1.49.1",
     "sass": "^1.77.6",
     "typescript": "^5.5.3",

strr-host-pm-web/playwright.config.ts

@@ -1,6 +1,9 @@
 import { fileURLToPath } from 'node:url'
 import { defineConfig, devices } from '@playwright/test'
 import type { ConfigOptions } from '@nuxt/test-utils/playwright'
+import { config as dotenvConfig } from 'dotenv'
+// load default env
+dotenvConfig()
 
 const devicesToTest = [
   'Desktop Chrome'
@@ -17,22 +20,23 @@ const devicesToTest = [
 export default defineConfig<ConfigOptions>({
   globalSetup: './tests/e2e/test-utils/global-setup', // setup when booting test runner
   testDir: './tests/e2e',
+  testIgnore: ['./tests/e2e/test-utils/**'],
   reporter: 'line',
   // 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,
   retries: 3, // a11y tests are flaky
-  maxFailures: 1,
-  // Opt out of parallel tests on CI.
-  // workers: process.env.CI ? 1 : undefined,
-  workers: 1, // TODO: figure out why tests fail when run in parallel
+  // maxFailures: 1,
+  // workers: process.env.CI ? 1 : undefined, // Opt out of parallel tests on CI.
+  // setting workers to 1 disables running tests in parallel
+  workers: 4, // 4 seems to be the sweet spot
   use: {
     nuxt: {
       rootDir: fileURLToPath(new URL('.', import.meta.url))
     },
     actionTimeout: 2000,
-    baseURL: 'http://localhost:3000',
+    baseURL: process.env.NUXT_BASE_URL,
     trace: 'on-first-retry',
     screenshot: 'off',
     // do not open browser