Verify Placeholder Text in Playwright

Placeholder text refers to the value assigned to the 'placeholder' attribute of an input field, which can be utilized with input types such as text, search, URL, email, and password. This text provides users with a hint or suggestion about the expected input value before they begin entering data into the field.

Table of Contents

1. Demo Website
2. Get Placeholder Value
3. Verify Placeholder Value
4. Example
5. Video Tutorial

Demo Website

"Enter the term you wish to search for" placeholder text in the search bar of the programsbuzz site.

Get Placeholder Value

Using the getAttribute() method, we can get the value of placeholder attribute of an element.

 // Find the search input box
 const searchBar = await page.locator('#edit-keys')
 // Get the placeholder Value
 const placeholderText = await searchBar.getAttribute('placeholder')

Verify Placeholder Value

To verify the text we can use expect().

expect(placeholderText).toBe('Enter the terms you wish to search for')

You can also use toEqual() here instead of toBe().

Example

test.only('Verify Placeholder text', async({page}) =>{
    await page.goto("https://www.programsbuzz.com")

    // Click on Search Icon first to open Search box
    await page.locator('.fa-search').click()

    const placeholderText = await page.locator('#edit-keys').getAttribute('placeholder') 
    expect(placeholderText).toEqual('Enter the terms you wish to search for') 
 })