Скачать или смотреть Playwright TypeScript | Data-Driven Framework from Scratch (JSON + POM)

In this hands-on session, we will:
Use external JSON test data in Playwright
Execute valid and invalid login tests
Apply best practice: assertions in the test layer
Reuse the same LoginPage POM class
Build a scalable and maintainable automation framework

👉 This makes it a real-world automation structure

00:00 Introduction

02:39 What we have done so far..

04:36 Step 1 - Create folder test-data and add a file loginData.json in it

10:12 Step 2 - Update LoginPage

14:18 Step 3 - Use JSON in Test login.spec.ts

19:04 Step 4 - Add Invalid Login Test

23:12 QUIZ - https://forms.gle/bkxPFEaQP67jZJNC8

PROJECT - https://github.com/Raghav-Pal/Playwri...

-
🎉 Now we Have
✔ Data-driven test
✔ Multiple scenarios
✔ Reusable POM
✔ Clean assertions
👉This is real framework design

Code Snippets:
▬▬▬▬▬▬▬▬▬▬▬▬

LoginPage.ts
import { Page, Locator } from '@playwright/test';

export class LoginPage {
readonly page: Page;
readonly username: Locator;
readonly password: Locator;
readonly loginButton: Locator;
readonly errorMessage: Locator;

constructor(page: Page) {
this.page = page;
this.username = page.locator('#user-name');
this.password = page.locator('#password');
this.loginButton = page.locator('#login-button');
this.errorMessage = page.locator('[data-test="error"]');
}

async gotoLoginPage() {
await this.page.goto('https://www.saucedemo.com/');
}

async login(user: string, pass: string) {
await this.username.fill(user);
await this.password.fill(pass);
await this.loginButton.click();
}
}


login.spec.ts
import {test, expect} from '@playwright/test'
import { LoginPage } from '../pages/LoginPage';
import loginData from '../test_data/login_data.json'

test('valid login', async ({ page }) =＞ {

const loginPage = new LoginPage(page);

await loginPage.gotoLoginPage();
await loginPage.login(
loginData.validUser.username,
loginData.validUser.password
);
await expect(page).toHaveURL('https://www.saucedemo.com/inventory.h...

});

test('Invalid Login', async ({ page }) =＞ {

const loginPage = new LoginPage(page);

await loginPage.gotoLoginPage();
await loginPage.login(
loginData.invalidUser.username,
loginData.invalidUser.password
);

await expect(loginPage.errorMessage).toBeVisible();
});


#Playwright #TypeScript #DataDrivenTesting

▬▬▬▬▬▬▬

Share with all who may need this

If my work has helped you, consider helping any animal near you, in any way you can

Never Stop Learning
Raghav Pal



▬▬▬▬ USEFUL LINKS ▬▬▬▬


✅ ALL TUTORIALS - https://AutomationStepByStep.com/


🙌 Connect with Raghav:

Ask Raghav: https://bit.ly/2CoJGWf
GitHub: https://github.com/Raghav-Pal
Udemy: https://www.udemy.com/user/raghav-pal-3/


Shorts Eng - https://bit.ly/3H9bifV
Shorts Hindi - https://bit.ly/3XY7XqN

➡️ Subscribe for more videos:    / @raghavpal  

—