In this blog, we will cover the working of Textbox and Different ways to handle them on DOM. 

pre-requisite:

As a pre-requisite we must check whether the following dependencies are installed or not:

1. Project setup
2. Run pip list in PyCharm terminal to check whether playwright is installed or not. 

As shown in the above picture playwright should be installed in the project. 

If the playwright is not installed refer to Web Automation Testing using Playwright.

Using Sync API Code:

•  Using Built-in .fill() method: In the fill() method we must pass the Locator and the String in Double or Single quotes with commas separated. 

• Using Locator() and fill() method:

• Using .type() method:- The type() method mocks the typing of the keyboard. In the type method, we can pass the different arguments such as delay, timeout, etc 

• Using evaluate() method, by evaluate() method we can execute the javascript code. 

• Using query_selector() and evaluate() method at locator level 

Using Async API Code:

• Using Built-In .locator() and .fill() method: 

• Using Built-In .fill() method: 

• Using Built-In .type() method:

• Using .evaluate() method at the page level 

• Using query_selector() and evaluate() method at locator level 

Test Case Scenario for Sync API:

1. Launch any Browser 
2. Navigate to the website https://demo.guru99.com/test/login.html 
3. Fill the text in Textbox in Different ways. 
4. Close the Browser 

from playwright.sync_api import sync_playwright 
	 with sync_playwright() as Page: 
    browser = Page.chromium.launch(headless=False) 
    page = browser.new_page() 
    page.goto('https://demo.guru99.com/test/login.html') 
    # 1st way 
    page.locator('#email').fill("akshay@abc.com") 
 
    # 2nd way 
    page.fill("#email","akshay@abc.com") 
 
    # 3rd way 
    page.locator('#email').type('welcome@gmail.com') 
 
    #4th Way 
    page.type('#email','welcome') 
 
    #5th Way using page.evaluate() 
    page.evaluate('document.getElementById("email").value="welcome using      	console"') 
 
	#6th Way using locator.evaluate() and Query Selector 
    ele = page.query_selector('#email') 
    ele.evaluate('ele1 => ele1.value = "welcome returns"') 
 
	  time.sleep(10) 
    page.close() 
    browser.close() 

Code explanation:

• The statement in line no. 3 to 4 are used to launch a browser and navigate to a web page, here we are launching the chromium browser & navigating to demo.guru99.com. 
• In the Statement in line no. 8 we are providing the input to the textbox using the chained locator strategy where 1^st we have identified the locator and then used the Built-In method I.e .fill() to fill the text in Textbox. 
• In the Statement in line no. 11, we are providing the input to the textbox using the Built-In .fill() method. In this method 1st, we must pass the locator as a parameter and then text as 2^nd parameter. 
• In the statement at link no. 14, we are providing the input to the textbox using the Built-In .type() method. 1st we identified the locator and then used the Built-In method I.e .type() to fill the text in Textbox. 
• In the statement in line no. 17, we are providing the input to the textbox using the Built-In .type() method. In this method 1st, we must pass the locator as a parameter and then text as 2^nd parameter. 
• In playwright, we can execute the javascript code in .evaluate() method. The Statement in line no. 20 we are providing the input to the textbox using javascript. First, we identified the locator using getElementById() method and passed the locator of the element. And by using .value method we are passing the text in the textbox.  
• The Statement in line no. 23 & 24 we are entering the text in textbox using the .query_selector() and .evaluate() method of playwright. The Statement in line no. 23 first we are identifying the locator of an element using the .query_selector() method and store it in a variable named ele and by using that variable object we are executing the javascript code. The ele1 is the object and we are entering the text in the textbox using the .value method.

Test Case Scenario for Async API:

1. Launch any Browser 
2. Navigate to the website https://demo.guru99.com/test/login.html 
3. Fill the text in Textbox in Different ways. 
4. Close the Browser 

import asyncio 
from playwright.async_api import async_playwright 
async def Input_Text(): 
    async with async_playwright() as Page: 
        browser = await Page.chromium.launch(headless=False) 
        page = await browser.new_page() 
        await page.goto('https://demo.guru99.com/test/login.html') 
 
        # 1st way 
        await page.locator('#email').fill("akshay@abc.com") 
 
        # 2nd way 
        await page.fill("#email","akshay@abc.com") 
 
        # 3rd way 
        await page.locator('#email').type('welcome@gmail.com') 
 
        # 4th Way 
        await page.type('#email','welcome') 
 
        # 5th Way using page.evaluate() 
        await page.evaluate('document.getElementById("email").value="welcome using 	console"') 
 
        # 6th Way using locator.evaluate() 
        ele = await page.query_selector('#email') 
        await ele.evaluate('ele1 => ele1.value = "welcome returns"') 
        await page.close() 
        await browser.close() 
 
asyncio.run(Input_Text()) 

Code explanation:

As shown in the above code snippet we are using the Pythons Async API Code. 

• In the code we use in the Sync API, the same Playwright keywords are used, the only difference is that here we use await before every page keyword of the playwright. Here we have imported the asyncio module of the playwright. 
• The ayncio module has the .run() method which is used to run the async code. 
• The Statement at line no. 30 contains the .run() method of asyncio class which accepts 1 argument, here we must pass the function name as, as shown in the above code snipped at line no. 3.  I.e Input_Text(). 

Read the next Playwright blog Here.