Handling Text Box in Playwright

.

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

test('Input Box Operations - Ultimate Complete Test Suite', async ({ page }) => {

    // Navigate to the practice website

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

    const emailInput = page.getByPlaceholder('Enter Email');

    // ==========================================

    // 1. Basic Assertions & Interactions

    // ==========================================

    await expect(emailInput).toBeVisible();

    await expect(emailInput).toBeEnabled();

    await expect(emailInput).toBeEmpty();

    await expect(emailInput).toBeEditable();

    // 1. Enter text into input box

    await emailInput.fill('john.sandeep@example.com');

    // 2. Capture entered text

    const emailText = await emailInput.inputValue();

    console.log('Captured Email:', emailText);

    // 3. Verify entered value

    await expect(emailInput).toHaveValue('john.sandeep@example.com');

    // 4. Read placeholder text

    const placeholder = await emailInput.getAttribute('placeholder');

    console.log('Placeholder:', placeholder);

    // 5. Focus input box

    await emailInput.focus();

    // 6. Select text inside input box

    await emailInput.selectText();

    // 7. Replace text using keyboard shortcuts

    await emailInput.press('Control+A');

    await emailInput.pressSequentially('test@example.com');

    // 8. Verify updated value

    await expect(emailInput).toHaveValue('test@example.com');

    // 9. Clear input box

    await emailInput.clear();

    // 10. Verify empty input state

    await expect(emailInput).toBeEmpty();

    // ==========================================

    // 2. Advanced Scenarios & Clipboard Operations

    // ==========================================

    // 11. Clipboard Operations (Copy & Paste)

    await emailInput.fill('copy.paste@example.com');

    await emailInput.press('Control+A');

    await emailInput.press('Control+C'); // Copy text to clipboard

    await emailInput.clear();

    await emailInput.press('Control+V'); // Paste text from clipboard

    await expect(emailInput).toHaveValue('copy.paste@example.com');

    // 12. Special Characters and Emoji Testing

    await emailInput.fill('user!#$%@test.com 🚀');

    await expect(emailInput).toHaveValue('user!#$%@test.com 🚀');

    // 13. Max Length Attribute Check

    const maxLength = await emailInput.getAttribute('maxlength');

    console.log('Max Length Limit:', maxLength ?? 'No limit attribute set');

    // 14. Blur Event (Remove focus to trigger on-blur validation)

    await emailInput.focus();

    await emailInput.blur();

    // 15. CSS & Styling Check (Fetch computed border color)

    const borderColor = await emailInput.evaluate((el) => {

        return window.getComputedStyle(el).borderColor;

    });

    console.log('Border Color:', borderColor);

    // ==========================================

    // 3. Edge Cases, Security & Accessibility

    // ==========================================

    // 16. Autocomplete Attribute Check (Security/Usability standard)

    const autocompleteAttr = await emailInput.getAttribute('autocomplete');

    console.log('Autocomplete attribute:', autocompleteAttr ?? 'Not specified');

    // 17. Tab Key Navigation / Focus Test (Accessibility)

    await page.locator('body').click(); // Click outside to remove focus

    await page.keyboard.press('Tab');   // Press Tab key to navigate elements

   

    // 18. Masked Input / Password Type Verification (If applicable)

    // Checking a password field element on the page

    const passwordInput = page.locator('#password');

    if (await passwordInput.count() > 0) {

        await expect(passwordInput).toHaveAttribute('type', 'password');

    }

    // Final Clear & Final Empty Assertion

    await emailInput.clear();

    await expect(emailInput).toBeEmpty();

    console.log('All Input Box tests completed successfully!');

});