registration implementation

Author: ersu-amine

cucumber.js

@@ -10,11 +10,16 @@ module.exports = {
 
         requireModule: ['ts-node/register'],
 
+        formatOptions: {
+            snippetInterface: "async-await"
+        },
+
         paths: ['tests/features/**/*.feature'],
 
         publishQuiet: true,
 
-        format: ['progress', 'html:cucumber-report.html']
+        format: ['progress', 'html:cucumber-report.html'],
+        "dryRun": false
 
     }
 

package-lock.json

@@ -9,13 +9,14 @@
     "test-tag": "npx playwright test --grep @tagName",
     "test-smoke": "npx playwright test --grep @smoke",
     "report": "npx playwright show-report"
-},
+  },
   "keywords": [],
   "author": "Amine",
   "license": "ISC",
   "description": "",
   "devDependencies": {
     "@cucumber/cucumber": "^12.2.0",
+    "@faker-js/faker": "^9.9.0",
     "@playwright/test": "^1.56.0",
     "@types/cucumber": "^6.0.1",
     "@types/node": "^24.7.2",

package.json

@@ -31,7 +31,11 @@ export default defineConfig({
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
     headless: false,
-    screenshot: 'only-on-failure'
+    screenshot: "only-on-failure",
+    // viewport: null,
+    // launchOptions: {
+    //   args: ["--start-maximized"], // opens browser maximized
+    // },
   },
 
   /* Configure projects for major browsers */

playwright.config.ts

@@ -5,13 +5,11 @@ Feature: User Login
     When user enters valid username and password
     And user click the login button
     Then user should see the user dashboard
-
   # Scenario: Verify unsuccessful login with invalid password
   #   Given user navigates to the login page
   #   When user enters invalid username or password
   #   And user click the login button
-  #   Then user should see an error message
-
+  #   Then user should see an error message "Invalid email or password"
   # Scenario: Verify unsuccessful login with invalid username and password
   #   Given user navigates to the login page
   #   When user enters invalid username and password

tests/features/login.feature

@@ -0,0 +1,11 @@
+@wip
+Feature: User registration
+  In order to access the application
+  As a new user
+  I want to register with valid details
+
+  Scenario: Successful user registration with valid data
+    Given the user is on the registration page
+    When the user fills the registration form with valid details
+    And clicks the register button
+    Then the user should be redirected to the login page

tests/features/registration.feature

@@ -20,3 +20,4 @@ After(async function (this: CustomWorld) {
   if (this.page) await this.page.close();
   if (this.browser) await this.browser.close();
 });
+

tests/hooks/hooks.ts

@@ -1,4 +1,3 @@
-//import { page } from "./world";
 import settings from "../config/settings.json"; // adjust path if needed
 import { Given, When, Then } from "@cucumber/cucumber";
 import { expect } from "@playwright/test";

tests/steps/login.steps.ts

@@ -0,0 +1,48 @@
+import settings from "../config/settings.json"; // adjust path if needed
+import { Given, When, Then } from "@cucumber/cucumber";
+import { expect } from "@playwright/test";
+import { faker } from "@faker-js/faker/locale/en"; // Import faker with a specific locale
+
+Given("the user is on the registration page", async function () {
+  await this.page.goto(settings.REGISTRATION_URL);
+});
+
+When(
+  "the user fills the registration form with valid details",
+  async function () {
+    let firstName = this.page.locator("#first_name");
+    let lastName = this.page.locator("#last_name");
+    let dob = this.page.locator("#dob");
+    let street = this.page.locator("#street");
+    let postalCode = this.page.locator("#postal_code");
+    let city = this.page.locator("#city");
+    let state = this.page.locator("#state");
+    let phone = this.page.locator("#phone");
+    let email = this.page.locator("#email");
+    let password = this.page.locator("#password");
+    let countryDropdown = this.page.locator("select#country");
+
+    //fill in form details
+    await firstName.fill(faker.person.firstName());
+    await lastName.fill(faker.person.lastName());
+    await dob.fill("1990-01-01");
+    await street.fill(faker.location.streetAddress());
+    await postalCode.fill(faker.location.zipCode());
+    await city.fill(faker.location.city());
+    await state.fill(faker.location.state());
+    await countryDropdown.selectOption({ label: "Canada" });
+    const phoneNumber = faker.string.numeric(10); // generates a string exactly 10 digits long
+    await phone.fill(phoneNumber);
+    await email.fill(faker.internet.email());
+    await password.fill(settings.PASSWORD);
+  }
+);
+
+When("clicks the register button", async function () {
+  await this.page.locator("//button[@type='submit']").click();
+});
+
+Then("the user should be redirected to the login page", async function () {
+  expect(this.page.url()).toBe(settings.LOGIN_URL);
+  expect(await this.page.locator("h3").textContent()).toBe("Login");
+});