test: add basic e2e tests

Author: peterbitfly

frontend/.gitignore

@@ -32,3 +32,6 @@ pnpm-lock.yaml
 
 server.crt
 server.key
+
+/test-results
+/tests/results

frontend/package-lock.json

@@ -26,9 +26,11 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "^0.7.2",
+    "@nuxt/test-utils": "^3.15.1",
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/i18n": "^9.1.0",
     "@nuxtjs/style-resources": "^1.2.2",
+    "@playwright/test": "^1.49.1",
     "@primevue/nuxt-module": "~4.0.4",
     "@rollup/plugin-babel": "^6.0.4",
     "@types/lodash-es": "^4.17.12",
@@ -63,6 +65,8 @@
     "lint:fix": "npm run lint -- --fix",
     "postinstall": "nuxt prepare",
     "preview": "nuxt preview",
+    "test:e2e": "npx playwright test --config=tests/playwright.config.ts",
+    "test:e2e:ui": "npm run test:e2e -- --ui",
     "typecheck": "npx nuxi typecheck",
     "validate": "npm run lint:fix && npm run typecheck"
   },

frontend/package.json

@@ -0,0 +1,15 @@
+import type { Page } from '../utils/helpers'
+
+export const DashboardPage = {
+  accountsButton: (page: Page) => page.getByRole('button', { name: 'Accounts Coming soon' }),
+  addDashboardTitle: (page: Page) => page.getByText('Add a new dashboard'),
+  backButton: (page: Page) => page.locator('text=Back'),
+  continueButton: (page: Page) => page.getByRole('button', { name: 'Continue' }),
+  continueNetworkButton: (page: Page) => page.getByRole('button', { name: 'Continue' }),
+  dashboard: (page: Page) => page.getByText('Online Validators'),
+  ethereumOption: (page: Page) => page.getByRole('button', { name: 'Ethereum' }),
+  gnosisOption: (page: Page) => page.getByRole('button', { name: 'Gnosis' }),
+  manageValidatorsButton: (page: Page) => page.locator('text=Manage Validators'),
+  onlineValidators: (page: Page) => page.locator('text=Online Validators'),
+  validatorsButton: (page: Page) => page.getByRole('button', { name: 'Validators' }),
+}

frontend/tests/page-object/dashboard.page.ts

@@ -0,0 +1,11 @@
+import type { Page } from '../utils/helpers'
+
+export const LoginPage = {
+  email: (page: Page) => page.getByLabel('Email address'),
+  errorEmail: (page: Page) => page.locator('text=Please provide a valid email address.'),
+  errorInvalidPassword: (page: Page) => page.locator('text=Please enter your password.'),
+  errorPasswordMaxLength: (page: Page) => page.locator('text=Please provide at least 5 characters.'),
+  loginBtn: (page: Page) => page.getByRole('button', { name: 'Log in' }),
+  password: (page: Page) => page.getByLabel('Password'),
+  toastMessageCannotLogin: (page: Page) => page.locator('text=Cannot log in: your email or your password is unknown.'),
+}

frontend/tests/page-object/login.page.ts

@@ -0,0 +1,28 @@
+import path from 'path'
+import { fileURLToPath } from 'node:url'
+import dotenv from 'dotenv'
+import {
+  defineConfig, devices,
+} from '@playwright/test'
+import type { ConfigOptions } from '@nuxt/test-utils/playwright'
+
+dotenv.config({ path: path.resolve(process.cwd(), '.env') })
+
+export default defineConfig<ConfigOptions>({
+  outputDir: './results',
+  projects: [ {
+    name: 'chromium',
+    use: {
+      ...devices['Desktop Chrome'], channel: 'chromium',
+    },
+  } ],
+  testMatch: '**/*.spec.ts',
+  timeout: 300000,
+  use: {
+    baseURL: process.env.NUXT_PUBLIC_DOMAIN,
+    ignoreHTTPSErrors: true,
+    nuxt: {
+      rootDir: fileURLToPath(new URL('.', import.meta.url)),
+    },
+  },
+})