Added Homepage and Register page POM class and Added Register page script

Author: NarendraCodeHub

package-lock.json

@@ -18,5 +18,8 @@
   "devDependencies": {
     "@playwright/test": "^1.49.1",
     "@types/node": "^22.10.5"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^9.3.0"
   }
 }

package.json

@@ -0,0 +1,7 @@
+class HomePage{
+    constructor(page){
+        this.page = page;
+    }
+
+
+}

pages/HomePage.js

@@ -4,7 +4,6 @@ class LoginPage {
         this.emailInput = page.locator('#email');
         this.passwordInput = page.locator('#password');
         this.submitButton = page.getByRole('button', { name: 'Submit' });
-        //this.errorMessage = page.getByText('Bad credentials! Please try');
     }
 
     async navigate() {

pages/LoginPage.js

@@ -0,0 +1,44 @@
+class RegisterPage {
+    constructor(page) {
+        this.page = page;
+        this.firstnameInput = page.locator('#firstName');
+        this.lastnameInput = page.locator('#lastName');
+        this.phonenumberInput = page.locator('#phone');
+        this.countryDropdown = page.locator('#countries_dropdown_menu');
+        this.emailInput = page.locator('#emailAddress');
+        this.passwordInput = page.locator('#password');
+        this.term_conditionCheckbox = page.locator('#exampleCheck1');
+        this.registerButton = page.locator('#registerBtn');
+        this.successMessage = page.locator('#message');
+        this.errorMessage = page.locator('#errorMessage');
+    }
+
+    async navigate() {
+        await this.page.goto('https://qa-practice.netlify.app/register');
+    }
+
+    async fillRegistrationForm(data) {
+        await this.firstnameInput.fill(data.firstName);
+        await this.lastnameInput.fill(data.lastName);
+        await this.phonenumberInput.fill(data.phone);
+
+        // Wait for dropdown options to load
+        await this.countryDropdown.waitFor({ state: 'visible' });
+
+        // Use selectOption with label or value
+        await this.countryDropdown.selectOption({ label: data.country });
+
+        await this.emailInput.fill(data.email);
+        await this.passwordInput.fill(data.password);
+
+        if (data.acceptTerms) {
+            await this.term_conditionCheckbox.check();
+        }
+    }
+
+    async submitForm() {
+        await this.registerButton.click();
+    }
+}
+
+module.exports = RegisterPage;

pages/RegisterPage.js

@@ -0,0 +1,67 @@
+const { test, expect } = require('@playwright/test');
+const { faker } = require('@faker-js/faker');
+const RegisterPage = require('../../pages/RegisterPage');
+
+let userData = {}; // Global variable to store user data for reuse
+
+test.describe('Register Page Tests with Random Data', () => {
+    let registerPage;
+
+    test.beforeEach(async ({ page }) => {
+        // Initialize the RegisterPage object
+        registerPage = new RegisterPage(page);
+
+        // Navigate to the registration page
+        await registerPage.navigate();
+    });
+
+    test('should require mandatory fields (empty form)', async () => {
+        // Submit the form without filling any fields
+        await registerPage.submitForm();
+
+        // Validate error message for empty fields
+        const validationMessage = await registerPage.emailInput.evaluate(input => input.validationMessage);
+        expect(validationMessage).toBe("Please fill out this field.");    
+    });
+
+    test('should successfully register with valid data', async () => {
+        // Generate random user data with a valid password
+        const randomFirstName = faker.person.firstName();
+        const randomLastName = faker.person.lastName();
+        const randomPhone = faker.phone.number('##########');
+        const randomCountry = 'United States of America';
+        const randomEmail = faker.internet.email(randomFirstName, randomLastName);
+        const randomPassword = faker.internet.password(12, true);
+
+        // Store user data for later use
+        userData = {
+            firstName: randomFirstName,
+            lastName: randomLastName,
+            phone: randomPhone,
+            country: randomCountry,
+            email: randomEmail,
+            password: randomPassword,
+        };
+
+        // Log the generated data
+        console.log('User successfully registered with the following details:');
+        console.table(userData);
+
+        // Fill out the registration form
+        await registerPage.fillRegistrationForm({
+            firstName: randomFirstName,
+            lastName: randomLastName,
+            phone: randomPhone,
+            country: randomCountry,
+            email: randomEmail,
+            password: randomPassword,
+            acceptTerms: true,
+        });
+
+        // Submit the form
+        await registerPage.submitForm();
+
+        // Validate success message
+        await expect(registerPage.successMessage).toBeVisible();
+        await expect(registerPage.successMessage).toHaveText('The account has been successfully created!');    });
+});