Playwright Login Test Example

Playwright is a modern framework for web applications that provides reliable and scalable automation testing solutions. It is a powerful end-to-end testing framework that supports multiple browsers and delivers consistent test execution across environments.

If you are new to automation testing, you can also explore What is Automation Testing and What is End-to-End Testing to understand the fundamentals of modern testing frameworks.

Why should you use Playwright to test logins?

One of the most important parts of any application is the login functionality. If users cannot log in successfully, they cannot access the platform. Playwright helps testers create reliable and stable login automation with features like:

🌵 Testing in different browsers (Chromium, Firefox, WebKit)
Learn more about Importance of Cross Browser Testing and How to Do Cross Browser Testing.

🌵 Quick execution with automatic waiting
Related article: Waits in Selenium Explicit Implicit and Fluent Wait

🌵 Selectors and assertions that you can trust
You can also read Locators in Selenium WebDriver and XPath in Selenium with Examples.

🌵 Simple to add to CI/CD pipelines
Related article: Why Agile Teams Need a Strong Automation Strategy

Playwright is also becoming one of the most popular modern automation tools for browser automation and E2E testing. Read more in How Playwright Test Agents Are Changing the Game in E2E Automation.

Requirements

Before you start, make sure you have:

🍄 Node.js installed
🍄 Basic understanding of automation testing concepts
🍄 Playwright installed using the following command:

</> Bash

npm init playwright@latest

After installation of Playwright, it will create a project structure which looks like:

We write test scripts based on POM (Page Object Model). Instead of writing all the selectors and actions in test files, we make a separate page class that has them all.

If you want to understand how automation frameworks work, read:

⚓️ How Automation Testing Works
⚓️ Test Automation Frameworks

Playwright Project Structure

After Playwright installation, it automatically creates a project structure for your automation framework.

A well-structured framework helps improve maintainability, scalability, and reusability of test scripts.

You can also explore:

⚓️ Software Testing Life Cycle
⚓️ Test Documentation in Software Testing

Page Object Model (POM) in Playwright

We write test scripts based on the Page Object Model (POM). Instead of writing all selectors and actions directly inside test files, we create separate page classes that contain reusable locators and methods.

Benefits of POM:

🌵 Better code readability
🌵 Easy maintenance
🌵 Reusable functions
🌵 Scalable automation framework

Related articles:

⚓️ Test Automation Frameworks
⚓️ How to Write Test Cases in Software Testing
⚓️ Test Case vs Test Script

Playwright Configuration File

Playwright provides a playwright.config.ts file where we can configure the base URL and other project settings.

This helps reduce repetitive code and improves framework maintainability.

You can also read:

⚓️ Importance of Test Environments in Software Development

Code of Page File

</> TypeScript

import { Page, Locator } from ‘@playwright/test’;

class loginPage {

page: Page
fieldEmail: Locator;
fieldPassword: Locator;
loginButton: Locator;

constructor(page: Page) {

this.page = page;

this.fieldEmail = page.locator(“//input[@name=’email’]”);
this.fieldPassword = page.locator(“//input[@name=’pass’]”);
this.loginButton = page.locator(“//div[@aria-label=’Log in to Facebook’]”);
}

async enterEmail(email: string) {
await this.fieldEmail.fill(email);
}

async enterPassword(password: string) {
await this.fieldPassword.fill(password);
}

async clickLogin() {
await this.loginButton.click();
}
}

export default loginPage

For understanding selectors and locators:

⚓️ CSS Selector in Selenium
⚓️ XPath in Selenium with Examples
⚓️ Locators in Selenium WebDriver

Code of Test File

import { test, expect, Page } from ‘@playwright/test’;

import loginPage from ‘../pages/loginpage’;
import reUsableAction from ‘../action/reusableAction’;

test.describe.serial(‘login test’, () => {

let loginpage: loginPage;
let action: reUsableAction;

test.beforeEach(async ({ page }) => {

loginpage = new loginPage(page);
action = new reUsableAction(page);

await page.goto(”);
})

test(‘Testcase001_should navigate to base URL’, async ({ page }) => {

expect(page.url()).toContain(‘facebook.com’);
});

test(‘Testcase002_Verify user login with valid credentials’, async ({ page }) => {

await loginpage.fieldEmail.fill(‘test@gmail.com’);

await loginpage.fieldPassword.fill(‘Password_2026’);

await loginpage.clickLogin();

await expect(page).toHaveURL(/facebook/);
});

test(‘Testcase003_Verify login with invalid email’, async ({ page }) => {

await loginpage.fieldEmail.fill(‘test@gmail.com@’);

await loginpage.fieldPassword.fill(‘Password_2026’);

await loginpage.clickLogin();

await expect(
page.locator(“The email address you entered”)
).toBeVisible();
});

test(‘Testcase004_Verify login with invalid password’, async ({ page }) => {

await loginpage.fieldEmail.fill(‘test@gmail.com’);

await loginpage.fieldPassword.fill(‘.’);

await loginpage.clickLogin();

await expect(
page.locator(“The password that you’ve entered is incorrect”)
).toBeVisible();
});

test(‘Testcase005_Verify login with empty credentials’, async ({ page }) => {

await loginpage.clickLogin();

await expect(loginpage.fieldEmail).toBeVisible();

await expect(loginpage.fieldPassword).toBeVisible();
});

})

These test scenarios validate:

🌵 Valid login functionality
🌵 Invalid email validation
🌵 Invalid password validation
🌵 Empty credential validation

Related articles:

⚓️ Types of Test Cases in Software Testing
⚓️ Key Features of Good Test Cases
⚓️ Edge Cases in Software Testing

Conclusion

Playwright is one of the best modern frameworks for login automation testing because of its speed, reliability, cross-browser support, and easy framework setup. By using the Page Object Model (POM), testers can create scalable and maintainable automation frameworks for real-world applications.

For more insights into modern automation testing, explore:

⚓️ Top 20 Best Automation Testing Tools
⚓️ Future of Software Testing Services
⚓️ AI and Machine Learning in Software Testing

Nikhil Trivedi

See Full Bio