[playwright]Feature/playwright tests

.gitignore

@@ -116,6 +116,10 @@ yarn-error.log
 ############################
 
 coverage
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/
 
 ############################
 # Strapi

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "ms-playwright.playwright"
+    ]
+}

cms/.env.example

@@ -0,0 +1,29 @@
+
+# Server
+HOST=0.0.0.0
+PORT=1337
+NODE_ENV=develop
+
+# Secrets
+APP_KEYS=tobemodified
+API_TOKEN_SALT=tobemodified
+ADMIN_JWT_SECRET=tobemodified
+TRANSFER_TOKEN_SALT=tobemodified
+
+# Database
+DATABASE_CLIENT=postgres
+DATABASE_HOST=127.0.0.1
+DATABASE_PORT=5432
+DATABASE_NAME=strapi
+DATABASE_USERNAME=tobemodified
+DATABASE_PASSWORD=tobemodified
+DATABASE_SSL=false
+DATABASE_FILENAME=
+JWT_SECRET=tobemodified
+
+# frontend
+NEXT_PUBLIC_BACKEND_URL=http://localhost:1337
+
+# Test data
+DEV_ADMIN_EMAIL=tobemodified
+DEV_ADMIN_PASSWORD=tobemodified

cms/package.json

@@ -32,6 +32,7 @@
     "styled-components": "^6.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.49.1",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -45,4 +46,4 @@
   "strapi": {
     "uuid": "54090675-7fba-4ef1-9ec3-07c04f971be5"
   }
-}
+}

cms/playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+import dotenv from 'dotenv';
+import path from 'path';
+dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests/playwright',
+  /* Run tests in files in parallel */
+  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', { open: 'never' }] ],
+  /* 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://localhost:1337',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   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,
+  // },
+});

cms/tests/playwright/strapi-admin-ui-tests.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test';
+
+export const TEST_USERS = {
+  adminUser: {
+      email: process.env.DEV_ADMIN_EMAIL || ``,
+      password: process.env.DEV_ADMIN_PASSWORD || ``
+  }
+};
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test('unauthorized redirect from localhost:1337 to /admin/auth/login', async ({ page }) => {
+  await expect(page).toHaveURL('http://localhost:1337/admin/auth/login');
+});
+
+test.skip('register admin-user to strapi-admin', async ({ page }) => {
+  checkTestUserCredentialsExist();
+
+  await test.step('Check unauthorized redirect to /auth/register-admin', async () => {
+    await expect(page).toHaveURL('http://localhost:1337/admin/auth/register-admin');
+  });
+
+  await test.step('Fill registration-form fields', async () => {
+    await page.fill('input[name="firstname"]', 'Adminiy');
+    await page.fill('input[name="email"]', TEST_USERS.adminUser.email);
+    await page.fill('input[name="password"]', TEST_USERS.adminUser.password);
+    await page.fill('input[name="confirmPassword"]', TEST_USERS.adminUser.password);
+    await page.click('button[type="submit"]');
+  });
+
+  await test.step('Ensure there are no validation errors displayed under the input fields', async () => {
+    await expect(page.locator('[data-strapi-field-error="true"]')).toHaveCount(0);
+  });
+
+  await test.step('Verify redirection to the authorized admin dashboard with the welcome message', async () => {
+    await expect(page.locator('//h1')).toHaveText('Welcome 👋');
+  });
+});
+
+test('login to strapi-admin', async ({ page }) => {
+  checkTestUserCredentialsExist();
+
+  await test.step('Fill in the email and password fields & press Login button', async () => {
+    await page.fill('input[name="email"]', TEST_USERS.adminUser.email);
+    await page.fill('input[name="password"]', TEST_USERS.adminUser.password);
+    await page.click('button[type="submit"]');
+  });
+
+  await test.step('Ensure there are no validation errors displayed under the input fields', async () => {
+    await expect(page.locator('[data-strapi-field-error="true"]')).toHaveCount(0);
+  });
+
+  await test.step('Verify redirection to the authorized admin dashboard with the welcome message', async () => {
+    await expect(page.locator('//h1')).toHaveText('Welcome 👋');
+  });
+});
+
+async function checkTestUserCredentialsExist() {
+  if (!TEST_USERS.adminUser.email || !TEST_USERS.adminUser.password) {
+    throw new Error('Missing test user credentials in .env file');
+  }
+}

frontend/.gitignore

@@ -40,3 +40,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

frontend/package.json

@@ -23,6 +23,7 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",
-    "typescript": "^5"
+    "typescript": "^5",
+    "@playwright/test": "^1.49.1"
   }
 }