stepup and add scenario for login

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: 0,
+  });
+});
+
+// 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

@@ -2,7 +2,6 @@
   "name": "filebrowser-frontend",
   "version": "2.0.0",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "vite dev",
     "serve": "vite serve",
@@ -11,7 +10,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 +41,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 +52,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

frontend/tests/acceptance/stepDefinitions/loginContext.js

@@ -0,0 +1,28 @@
+const {Given, When, Then} = require('@cucumber/cucumber')
+// import expect for assertion
+const { expect } = require("@playwright/test");
+
+//launch url
+const url = 'http://localhost:8080'
+
+//define selectors
+const usernameSelector = '//input[@placeholder="Username"]'
+const passwordSelector = '//input[@placeholder="Password"]'
+const loginSelector = '//input[@type="submit"]'
+const loginUrl = 'http://localhost:8080/login?redirect=%2Ffiles%2F'
+const fileUrl = 'http://localhost:8080/files/'
+
+Given('the user has browsed to the login page', async function () {
+    await page.goto(url);
+    await expect(page).toHaveURL(loginUrl);
+});
+
+When('user logs in with username {string} and password {string}', async function (username, password) {
+    await page.fill(usernameSelector, username);
+    await page.fill(passwordSelector, password);
+    await page.click(loginSelector);
+});
+
+Then('user should redirect to the homepage', async function () {
+    await expect(page).toHaveURL(fileUrl);
+});