Added POM structure script

Author: NarendraCodeHub

pages/LoginPage.js

@@ -0,0 +1,24 @@
+class LoginPage {
+    constructor(page) {
+        this.page = page;
+        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() {
+        await this.page.goto('https://qa-practice.netlify.app/auth_ecommerce');
+    }
+
+    async login(email, password) {
+        await this.emailInput.fill(email);
+        await this.passwordInput.fill(password);
+        await this.submitButton.click();
+    }
+
+    async getErrorMessage() {
+        return this.page.getByText("Bad credentials! Please try again! Make sure that you've registered.");
+    }
+}
+module.exports = LoginPage;

playwright.config.js

@@ -7,11 +7,11 @@ const { defineConfig, devices } = require('@playwright/test');
  */
 // require('dotenv').config({ path: path.resolve(__dirname, '.env') });
 
-/**
+/**SS
  * @see https://playwright.dev/docs/test-configuration
  */
 module.exports = defineConfig({
-  testDir: './tests',
+  testDir: './tests/Forms',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

tests/Forms/Login.spec.js

@@ -1,56 +1,45 @@
 const { test, expect } = require('@playwright/test');
-
-// Verify the page title
-test('Verify page title: QA Practice | Learn with RV', async ({ page }) => {
-    await page.goto('https://qa-practice.netlify.app/auth_ecommerce');
-
-    // Verify that the page title matches the expected value
-    await expect(page).toHaveTitle('QA Practice | Learn with RV');
-});
-
-// Test form submission without entering any fields
-test('Verify form validation for empty fields', async ({ page }) => {
-    await page.goto('https://qa-practice.netlify.app/auth_ecommerce');
-
-    // Attempt to submit the form without filling in the fields
-    await page.getByRole('button', { name: 'Submit' }).click();
-
-    // Check if the error message is displayed
-    const errorMessage = page.getByText('Bad credentials! Please try');
-    await expect(errorMessage).toBeVisible();
-    await expect(errorMessage).toHaveText(
-        "Bad credentials! Please try again! Make sure that you've registered."
-    );
-});
-
-// Validate the form with invalid credentials
-test('Verify form validation for invalid credentials', async ({ page }) => {
-    await page.goto('https://qa-practice.netlify.app/auth_ecommerce');
-
-    // Fill the form with invalid email and password
-    await page.locator('#email').fill('test@gmail.com');
-    await page.locator('#password').fill('test@123');
-    await page.getByRole('button', { name: 'Submit' }).click();
-
-    // Check if the error message is displayed
-    const errorMessage = page.getByText('Bad credentials! Please try');
-    await expect(errorMessage).toBeVisible();
-    await expect(errorMessage).toHaveText(
-        "Bad credentials! Please try again! Make sure that you've registered."
-    );
-});
-
-// Validate login functionality with valid credentials
-test('Verify login with valid credentials', async ({ page }) => {
-    await page.goto('https://qa-practice.netlify.app/auth_ecommerce');
-
-    // Fill the form with valid email and password
-    await page.locator('#email').fill('admin@admin.com');
-    await page.locator('#password').fill('admin123');
-    await page.getByRole('button', { name: 'Submit' }).click();
-
-    // Verify the presence of the shopping cart page
-    const shoppingCart = page.locator('text=SHOPPING CART');
-    await expect(shoppingCart).toBeVisible();
-    await expect(shoppingCart).toHaveText('SHOPPING CART');
+const LoginPage = require('../../pages/LoginPage');
+
+test.describe('Login Page Tests', () => {
+    let loginPage;
+
+    test.beforeEach(async ({ page }) => {
+        loginPage = new LoginPage(page);
+        await loginPage.navigate();
+    });
+
+    test('Verify page title', async () => {
+        await expect(loginPage.page).toHaveTitle('QA Practice | Learn with RV');
+    });
+
+    test('Validate email field for invalid format', async ({ page }) => {
+        await loginPage.emailInput.fill('invalidemail'); // No '@' or domain
+        await loginPage.submitButton.click();
+        const validationMessage = await loginPage.emailInput.evaluate(input => input.validationMessage);
+        const browserName = test.info().project.name;
+
+        // Browser-specific validation message check
+        if (browserName === 'chromium') {
+            expect(validationMessage).toBe("Please include an '@' in the email address. 'invalidemail' is missing an '@'.");
+        } else if (browserName === 'firefox') {
+            expect(validationMessage).toBe("Please enter an email address.");
+        } else if (browserName === 'webkit') {
+            expect(validationMessage).toBe("Enter an email address");
+        }
+    });
+
+    test('Validate login with invalid credentials', async () => {
+        await loginPage.login('test@gmail.com', 'wrongpassword');
+        const errorMessage = await loginPage.getErrorMessage();
+        await expect(errorMessage).toBeVisible();
+        await expect(errorMessage).toHaveText("Bad credentials! Please try again! Make sure that you've registered.");
+    });
+
+    test('Validate login with valid credentials', async () => {
+        await loginPage.login('admin@admin.com', 'admin123');
+        const shoppingCart = await loginPage.page.locator('text=SHOPPING CART');
+        await expect(shoppingCart).toBeVisible();
+        await expect(shoppingCart).toHaveText("SHOPPING CART");
+    });
 });