test: config cucumber

cucumber.mjs

@@ -0,0 +1,10 @@
+export default {
+  default: {
+    require: ["e2e/steps/*.ts"],
+    format: ["pretty"],
+    paths: ["e2e/features/*.feature"],
+    parallel: 1,
+    requireModule: ["ts-node/register"],
+    publishQuiet: true,
+  },
+};

e2e/features/login.feature

@@ -2,12 +2,12 @@
 Feature: Login
 As a staff member, i want to login to the system so that i can access the system
 
-  Scenario: User login with valid credentials
+  Scenario: user login with valid credentials
     Given a logged out user on the login page
     When the user logs in with valid credentials
     Then they log in successfully
 
-  Scenario Outline: User login with invalid credentials
+  Scenario Outline: user login with invalid credentials
     Given a logged out user on the login page
     When the user logs in with invalid credentials like email '<email>' and password '<password>'
     Then login error message should be displayed

e2e/steps/login.step.ts

@@ -1,45 +1,42 @@
-import {
-  test,
-  expect,
-  chromium,
-  Page,
-  Browser,
-  BrowserContext,
-} from "@playwright/test";
+import { Given, When, Then } from "@cucumber/cucumber";
+import { Browser, BrowserContext, Page, chromium, expect } from "@playwright/test";
 import { LoginPage } from "../pages/login.page";
 
-test.describe("Login Feature", () => {
-  let page: Page;
-  let browser: Browser | BrowserContext;
-  let loginPage: LoginPage;
+let page: Page;
+let browser: Browser | BrowserContext;
+let loginPage: LoginPage;
 
-  test.beforeAll(async () => {
-    browser = await chromium.launch();
-    page = await browser.newPage();
-    loginPage = new LoginPage(page, browser);
-  });
-
-  test("should log in with valid credentials", async () => {
-    await loginPage.goto();
-    await loginPage.setEmail("[email protected]");
-    await loginPage.setPassword("P@ssw0rd");
-    await loginPage.clickSubmit();
+Given("a logged out user on the login page", async function () {
+  browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext();
+  page = await context.newPage();
+  loginPage = new LoginPage(page, browser);
+  await loginPage.goto();
+});
 
-    const homeText = await loginPage.isHomePage();
-    expect(homeText).toBe("Home");
-  });
+When("the user logs in with valid credentials", async function () {
+  await loginPage.setEmail("[email protected]");
+  await loginPage.setPassword("valid-password");
+  await loginPage.clickSubmit();
+});
 
-  test("should display error with invalid credentials", async () => {
-    await loginPage.goto();
-    await loginPage.setEmail("[email protected]");
-    await loginPage.setPassword("wrongpassword");
+When(
+  "the user logs in with invalid credentials like email {string} and password {string}",
+  async function (email: string, password: string) {
+    await loginPage.setEmail(email);
+    await loginPage.setPassword(password);
     await loginPage.clickSubmit();
+  }
+);
 
-    const isErrorDisplayed = await loginPage.isErrorDisplayed();
-    expect(isErrorDisplayed).toBeTruthy();
-  });
+Then("they log in successfully", async function () {
+  const headingText = await loginPage.isHomePage();
+  expect(headingText).toBe("Welcome to Rookie Shop");
+  await browser.close();
+});
 
-  test.afterAll(async () => {
-    await browser.close();
-  });
+Then("login error message should be displayed", async function () {
+  const isErrorVisible = await loginPage.isErrorDisplayed();
+  expect(isErrorVisible).toBe(true);
+  await browser.close();
 });

package.json

@@ -17,7 +17,8 @@
     "docs:build": "vuepress-vite build docs",
     "docs:clean-dev": "vuepress-vite dev docs --clean-cache",
     "docs:dev": "vuepress-vite dev docs",
-    "docs:update-package": "npx vp-update"
+    "docs:update-package": "npx vp-update",
+    "test": "cucumber-js e2e"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
@@ -27,6 +28,8 @@
     "@vuepress/bundler-vite": "2.0.0-rc.12",
     "dotenv": "^16.4.5",
     "husky": "^9.0.11",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.5",
     "vue": "^3.4.27",
     "vuepress": "2.0.0-rc.12",
     "vuepress-plugin-search-pro": "^2.0.0-rc.47",