add login test scenarios only

frontend/cucumber.conf.js

@@ -0,0 +1,31 @@
+// cucumber.conf.js file
+
+const { Before, BeforeAll, AfterAll, After, setDefaultTimeout } = require("@cucumber/cucumber");
+const { chromium } = require("playwright");
+
+setDefaultTimeout(60000)
+
+// launch the browser
+BeforeAll(async function () {
+  global.browser = await chromium.launch({
+      headless: false,
+      slowMo: 1000,
+  });
+});
+
+// close the browser
+AfterAll(async function () {
+   await global.browser.close();
+});
+
+// Create a new browser context and page per scenario
+Before(async function () {
+  global.context = await global.browser.newContext();
+  global.page = await global.context.newPage();
+});
+
+// Cleanup after each scenario
+After(async function () {
+  await global.page.close();
+  await global.context.close();
+});

frontend/package.json

@@ -11,7 +11,8 @@
     "clean": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitkeep' -exec rm -r {} +",
     "lint": "eslint --ext .vue,.js src/",
     "lint:fix": "eslint --ext .vue,.js --fix src/",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "test:e2e": "cucumber-js --require cucumber.conf.js --require tests/acceptance/stepDefinitions/**/*.js --format @cucumber/pretty-formatter"
   },
   "dependencies": {
     "ace-builds": "^1.23.4",
@@ -41,6 +42,9 @@
     "whatwg-fetch": "^3.6.17"
   },
   "devDependencies": {
+    "@cucumber/cucumber": "^7.3.1",
+    "@cucumber/pretty-formatter": "^1.0.0",
+    "@playwright/test": "^1.38.1",
     "@vitejs/plugin-legacy": "^4.1.1",
     "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/eslint-config-prettier": "^8.0.0",
@@ -49,6 +53,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.16.1",
     "jsdom": "^22.1.0",
+    "playwright": "^1.38.1",
     "postcss": "^8.4.27",
     "prettier": "^3.0.1",
     "terser": "^5.19.2",

frontend/tests/acceptance/features/login.feature

@@ -0,0 +1,9 @@
+Feature: login
+    As a user
+    I want to login to the system
+    So that I can manage the files and folders
+
+    Scenario: login with valid username and valid password
+        Given the user has browsed to the login page
+        When user logs in with username "admin" and password "admin"
+        Then user should redirect to the homepage