DEV Community

Cover image for Playwright Basics: Text Validation, Login Testing, Checkboxes, and Radio Buttons
Kesavarthini
Kesavarthini

Posted on

Playwright Basics: Text Validation, Login Testing, Checkboxes, and Radio Buttons

#automation #testing #tutorial #typescript

Playwright

  • Playwright is a modern automation testing framework used for end-to-end testing of web applications. It supports multiple browsers such as Chrome, Firefox, and Safari and is widely used for UI automation testing.
  • Developed by Microsoft.

Why Learn Playwright?

Playwright is popular because it provides:

  • Fast execution
  • Auto waiting
  • Cross-browser support
  • Easy syntax
  • Powerful assertions
  • Modern testing features

It is commonly used for:

  • UI Testing
  • Functional Testing
  • End-to-End Testing
  • Regression Testing

Basic Structure of a Playwright Test

import { test, expect } from '@playwright/test'

test('sample test', async ({ page }) => {

    await page.goto('https://example.com');

})
Enter fullscreen mode Exit fullscreen mode

Understanding the Basics

Keyword and Purpose

  • test() => Creates a test case
  • expect() => Used for assertions
  • page => Represents browser tab
  • goto() => Opens a webpage
  • locator() => Finds web elements

1. Text Validation in Playwright

This example validates whether the webpage contains the correct text.


import { test, expect } from '@playwright/test'
// expect => Assertions

test("text-validation", async ({ page }) => {

    await page.goto("https://mytestpages.netlify.app/textValidation");

    const main = page.locator('#main-title');
    const desc = page.locator('#description');

    // Assertions
    await expect(main)
      .toHaveText('Welcome to Playwright Practice');

    await expect(desc)
      .toContainText('This is a sample page for testing static text.');

})
Enter fullscreen mode Exit fullscreen mode

Explanation
Opening the Webpage

await page.goto("https://mytestpages.netlify.app/textValidation");
Enter fullscreen mode Exit fullscreen mode

This command opens the specified webpage.

Locators

const main = page.locator('#main-title');
Enter fullscreen mode Exit fullscreen mode

Locators identify elements on the webpage.

Here:

  • #main-title → ID selector
  • #description → ID selector

Assertions
toHaveText()

await expect(main)
.toHaveText('Welcome to Playwright Practice');
Enter fullscreen mode Exit fullscreen mode

Checks exact text.

toContainText()

await expect(desc)
.toContainText('This is a sample page for testing static text.');
Enter fullscreen mode Exit fullscreen mode

Checks partial text.

Difference Between Assertions
Assertion and Purpose
toHaveText() => Exact text validation
toContainText() => Partial text validation

2. Button Click Text Change Validation

This example validates text changes after clicking a button.

import { test, expect } from '@playwright/test'

test('button click text change', async ({ page }) => {

    await page.goto("https://mytestpages.netlify.app/button-intraction");

    const para = page.locator('#message');
    const btn = page.locator('#changeTextButton');

    await btn.click();

    await expect(para)
      .toHaveText('The text has changed after the button click!');

})
Enter fullscreen mode Exit fullscreen mode

Explanation
Click Action

await btn.click();
Enter fullscreen mode Exit fullscreen mode

This simulates a user clicking the button.

Text Validation After Click

await expect(para)
.toHaveText('The text has changed after the button click!');
Enter fullscreen mode Exit fullscreen mode

Validates that the paragraph text changed after button interaction.

3. Login Validation in Playwright
This example covers:

  • Filling input fields
  • Clearing fields
  • Invalid login validation
  • Successful login validation 
import { test, expect } from '@playwright/test'

test("login validation", async ({ page }) => {

    await page.goto("https://mytestpages.netlify.app/login");

    const uName = page.locator('#username');
    const pwd = page.locator('#password');
    const btn = page.locator('button:has-text("Login")');

    await uName.fill("admin");

    await expect(uName).toHaveValue('admin');

    await uName.clear();

    await expect(uName).toHaveValue('');

    await uName.fill('admin');

    await pwd.fill('123');

    await btn.click();

    const errormsg = page.locator('#error-message');

    await expect(errormsg)
      .toHaveText('Invalid username or password.');

    await pwd.fill('1234');

    await btn.click();

    const dashboard = page.locator('#dashboard');

    await expect(dashboard)
      .toContainText('dashboard');

})
Enter fullscreen mode Exit fullscreen mode

Explanation
Fill Input Fields

await uName.fill("admin");
Enter fullscreen mode Exit fullscreen mode

Enters text inside the input field.

Validate Input Value

await expect(uName).toHaveValue('admin');
Enter fullscreen mode Exit fullscreen mode

Checks whether the entered value exists in the textbox.

Clear Input Field

await uName.clear();
Enter fullscreen mode Exit fullscreen mode

Removes existing text from the field.

Button Locator

const btn = page.locator('button:has-text("Login")');
Enter fullscreen mode Exit fullscreen mode

Finds button using visible text.

Error Message Validation

await expect(errormsg)
.toHaveText('Invalid username or password.');
Enter fullscreen mode Exit fullscreen mode

Checks whether incorrect login shows error message.

Successful Login Validation

await expect(dashboard)
.toContainText('dashboard');
Enter fullscreen mode Exit fullscreen mode

Validates successful login.

4. Checkbox Handling in Playwright

Checkboxes are commonly used in forms and settings pages.

This example demonstrates:

  • Selecting checkbox
  • Unselecting checkbox
  • Disabled checkbox validation
  • Check all functionality 
import { test, expect } from '@playwright/test'

test.describe("checkbox handling page", () => {

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

        await page.goto('https://mytestpages.netlify.app/checkbox-handling');

    })

    test('single checkbox select/unselect', async ({ page }) => {

        const checkbox1 = page.locator('#checkbox1');

        // check
        await checkbox1.check();

        await expect(checkbox1).toBeChecked();

        // unCheck
        await checkbox1.uncheck();

        await expect(checkbox1).not.toBeChecked();

    })

    test('pre-checked checkbox validation', async ({ page }) => {

        const checkbox2 = page.locator('#checkbox2');

        await expect(checkbox2).toBeChecked();

        await checkbox2.uncheck();

        await expect(checkbox2).not.toBeChecked();

    })

    test('Disabled button validation', async ({ page }) => {

        const checkbox4 = page.locator('#checkbox4');

        await expect(checkbox4).toBeDisabled();

    })

    test('check all buttons', async ({ page }) => {

        const checkallBtn = page.locator('#checkAllButton');

        const checkboxes = page.locator(
          'input[type = "checkbox"]:not([disabled])'
        );

        await checkallBtn.click();

        const count = await checkboxes.count();

        for (let i = 0; i < count; i++) {

            await expect(checkboxes.nth(i)).toBeChecked();

        }

    })

})
Enter fullscreen mode Exit fullscreen mode

Explanation
test.describe()

test.describe("checkbox handling page", () => {})
Enter fullscreen mode Exit fullscreen mode

Used to group related test cases.

beforeEach()

test.beforeEach(async ({ page }) => {})
Enter fullscreen mode Exit fullscreen mode

Runs before every test case.

Checkbox Selection

await checkbox1.check();
Enter fullscreen mode Exit fullscreen mode

Checks the checkbox.

Checkbox Validation

await expect(checkbox1).toBeChecked();
Enter fullscreen mode Exit fullscreen mode

Validates checkbox selection.

Disabled Element Validation

await expect(checkbox4).toBeDisabled();
Enter fullscreen mode Exit fullscreen mode

Checks whether element is disabled.

Loop Through Multiple Checkboxes

for (let i = 0; i < count; i++)
Enter fullscreen mode Exit fullscreen mode

Used to validate all checkboxes dynamically.

5. Radio Button Handling

Radio buttons allow selecting one option from multiple choices.

import { test, expect } from '@playwright/test'

test.describe('radio button handling', () => {

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

        await page.goto("https://mytestpages.netlify.app/radio-selection");

    })

    test('Default selections should be correct', async ({ page }) => {

        const male = page.locator('#gender-male');

        const credit = page.locator('#payment-credit');

        await expect(male).toBeChecked();

        await expect(credit).toBeChecked();

    })

    test('select female and paypal and verify result',
    async ({ page }) => {

        await page.locator("#gender-female").check();

        await page.locator("#payment-paypal").check();

        await page.locator("#verifyButton").click();

        await expect(page.locator("#result"))
          .toHaveText(
           'Selected gender: Female. Selected payment: PayPal.'
          );

    })

})
Enter fullscreen mode Exit fullscreen mode

Explanation
Default Selection Validation

await expect(male).toBeChecked();
Enter fullscreen mode Exit fullscreen mode

Checks whether the radio button is already selected.

Selecting Radio Buttons

await page.locator("#gender-female").check();
Enter fullscreen mode Exit fullscreen mode

Selects the Female option.

Verify Result Text

await expect(page.locator("#result"))
.toHaveText('Selected gender: Female. Selected payment: PayPal.');
Enter fullscreen mode Exit fullscreen mode

Validates final output text.

Important Assertions in Playwright
Assertion and Purpose

  • toHaveText() => Exact text match
  • toContainText() => Partial text match
  • toHaveValue() => Validate input value
  • toBeChecked() => Checkbox/Radio validation
  • toBeDisabled() => Disabled element validation

Commonly Used Playwright Actions
Action and Purpose
click() => Click element
fill() => Enter text
clear() => Clear input
check() => Select checkbox/radio
uncheck() =>Unselect checkbox\

Why Playwright is Powerful

Playwright provides:

  • Auto waiting
  • Fast execution
  • Parallel testing
  • Cross-browser testing
  • Built-in assertions
  • Easy debugging

Top comments (0)