In this blog, we will cover working with different browser launch operations and how to interact with them. 

As a pre-requisite we have to check whether the following dependencies or 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.

1. Static Dropdown

What is a static dropdown?

Static dropdowns are those dropdowns whose values are not changed throughout the life scan of the web page such as birthday or age selection, country or city selection. In playwright, we can handle the static dropdown using the custom and Built-In methods. 

In Playwright we can handle dropdowns using Sync and Async API.

A) Static Dropdown Using Sync API:

• Different ways to Handle Dropdown: 

The playwright uses Built-In select_option() method to select the values from the dropdown. We can specify the value or label in the select_option() method to select. For the multiple options dropdown, we have to specify the values in the list. 

1. Using the .select_option() method with values.

In this method, we have to pass the value I.e the visible text of the dropdown. 

2. Using .select_option() method with Label.

In this method, we have to pass the label of the dropdown. 

3. Using javascript.

In this method, we are using the javascript code to select the value from the dropdown. By using the options[value=Value].selected = true in querySelectory. We can select the dropdown value. 

Test Case for Sync API:

Step 1: Launch the chromium browser. 

Step 2: Open a new tab. 

Step 3: Navigate to https://demo.guru99.com/test/newtours/register.php 

Step 4: Handle Static Dropdown in different ways. 

Step 5: Close the page and browser.  

Here we have considered the example of Guru99 where we will learn how to handle static dropdowns in different ways.

Code Explanation:

As shown in the above code snippet

1. The statement from 3 to 5 is used to launch the browser. 
2. In the statement in line no. 8, we are using the Built-In method of the playwright I.e .select_option(value) method to perform the select operation from the dropdown. 
3. The statement in line no. 11, we ate using the Built-In method of playwright I.e .select_option(label=’value’), here we pass the value in the label argument. 
4. In the Statement on line no. 14, we have selected the value from the dropdown using the javascript. By bypassing the Boolean values to the selected parameter we can select the value from the dropdown. 
5. The Statement in line no. 16 waits for 4 seconds to view the results on the screen. 
6. The statement from 17 to 18 is used to close the page & browser to terminate the test execution session.

B) Static Dropdown Using Async API:

• Different ways to Handle Dropdown: 

The playwright uses Built-In select_option() method to select the values from the dropdown. We can specify the value or label in the select_option() method to select. For the multiple options dropdown, we have to specify the values in the list. 

1. Using the .select_option() method with values.

In this method, we have to pass the value I.e the visible text of the dropdown.

2. Using .select_option() method with Label.

In this method, we have to pass the label of the dropdown. 

3. Using javascript.

In this method, we are using the javascript code to select the value from the dropdown. By using the options[value=Value].selected = true in querySelectory. We can select the dropdown value. 

Test Case for Async API:

Step 1: Launch the chromium browser. 

Step 2: Open a new tab. 

Step 3: Navigate to https://demo.guru99.com/test/newtours/register.php 

Step 4: Handle Static Dropdown in different ways. 

Step 5: Close the page and browser. 

Code Explanation:

1. The statement from 3 to 5 is used to launch the browser. 
2. In the statement in line no. 8, we are using the Built-In method of the playwright I.e .select_option(value) method to perform the select operation from the dropdown. 
3. The statement in line no. 11, we ate using the Built-In method of playwright I.e .select_option(label=’value’), here we pass the value in the label argument. 
4. In the Statement on line no. 14, we have selected the value from the dropdown using the javascript. By bypassing the Boolean values to the selected parameter we can select the value from the dropdown. 
5. The Statement in line no. 16 waits for 4 seconds to view the results on the screen. 
6. The statement from 17 to 18 is used to close the page & browser to terminate the test execution session. 

2. Dynamic Dropdown

What is dynamic dropdown?

Dynamic dropdowns are those dropdowns whose value changes every time. This type of dropdown is also known as auto suggestive dropdown, where on typing the first few letters of our search, a list of suggested items gets displayed. The logic is to type a few characters inside the dynamic dropdown. Based on that a list of suggestions will be displayed.

In playwright, we can handle dropdowns using Sync and Async methods.

A) Dynamic Dropdown Using Sync API:

Dynamic dropdowns are dynamic in nature their content position is not fixed. For example, the user’s name in the railway reservation chart can appear in any position at run time. 

Here we will be learning different ways to handle Dynamic Dropdown.

1. Using for Loop:

• Test Case:

Step 1: – Launch any Browser. 

Step 2: – Navigate to https://www.spicejet.com/ website. 

Step 3: – Enter mu in the source input box. 

Step 4: – Select Mumbai from the source dropdown using for loop. 

Step 5: – Close the page and browser. 

Here we have considered the example of Spice jet where we will provide the input as “mu” in  From  Input box. And select Mumbai from the Suggested Dropdown List. 

In the above-mentioned code snippet, we are using the for loop with python’s f String method.  

Code Explanation:

1. In the statement in line no. 8, The page .fill() method will provide the partial input I.e “mu” from the input box field.
2. The locator used at statement line no. 9, will list all the suggested City names such as Agra, Pune, etc. by using the .all_inner_texts() it fetches all the text of the listed element and stores in the source1 variable.
3. The statement at line no. 11 we have used for loop and iterated over the source1 variable. 
4. In the statement in line no. 12, we have used the if condition and checked whether that text is present in the source1 list or not. If text exists then it will enter the if condition and select the Mumbai City else it will fail.  

2. Using Built-In has_text method:

The playwright has the Built-In Locator feature which can only select elements that have a descendant matching another locator. 
The inner locator is matched starting from the outer locator, not from the document root element. 

• Test Case:

Step 1: – Launch any browser. 

Step 2: – Navigate to https://www.spicejet.com/ website. 

Step 3: – Enter mu in the source input box. 

Step 4: – Select Mumbai from the source using the has_text method. 

Step 5: – Close the page and browser. 

In the above-mentioned code snippet, we are using the has_text method.  

• Code Explanation:

1. In the statement in line no. 6, The page .fill() method will provide the partial input I.e “mu” from the input box field. 
2. In Statement at line no. 8, we have used the has_text  method. The locator which is used before the has_text method is the parent element and, whenever the has_text method is encountered the playwright will search the text and perform further operations on it. 

3. Using Built-In has method:

You can also filter an existing locator with a locator.filter() method, possibly chaining it multiple times. It is just like a chain of locators.

• Test Case:

Step 1: – Launch any browser. 

Step 2: – Navigate to https://www.spicejet.com/ website. 

Step 3: – Enter mu in the source input box. 

Step 4: – Select Mumbai from the source using has method. 

Step 5:- Close the page and browser. 

In the above-mentioned code snippet, we are using the has method.  

• Code Explanation:

1. In the statement in line no. 6, The page .fill() method will provide the partial input I.e “mu” from the input box field. 
2. The statement in line no. 8 is used to filter the locators. In this method, we have performed the chain of locators. 

The Locator which is used before has= is the parent element and the locator which is followed immediately after has= is the child element. Once the child element is encountered it will perform further operations. 

4. Using Dynamic XPATH:

In Dynamic XPATH, the xpath is created in such a way that we don’t require any looping and condition statements. The Dynamic xpath directly works on elements in the DOM.

• Test Case:

Step 1: – Launch any Browser. 

Step 2: – Navigate to https://www.spicejet.com/ website. 

Step 3: – Enter mu in the source input box. 

Step 4: – Select Mumbai from the source using Dynamic XPATH. 

Step 5: – Close the page and browser. 

• Code Explanation:

As shown in the above code snippet  

1. The Statement from line no. 1 to 3 is referring to launch the browser. 
2. Here we are selecting Mumbai as the source and stored in a variable named source_city. 
3. The Statement at line no. 6 is used to navigate to the SpiceJet website. 
4. The statement in line no. 7 enters the value as mu in the search box. 
5. The statement at line no. 8 is used to wait until the provided locator is visible. 
6. Once the locators are visible then by using the dynamic xpath we are selecting the source city. 
7. Once the city is selected it will wait for 4 seconds and close the browser. 

B) Dynamic Dropdown using Async API:

1. Using For loop:

• Test Case:

Step 1: – Launch any Browser. 

Step 2: – Navigate to https://www.spicejet.com/ website. 

Step 3: – Enter mu in the source input box. 

Step 4: – Select Mumbai from the source dropdown using for loop. 

Step 5: – Close the page and browser. 

Here we have considered the example of Spice jet where we will provide the input as “mu” in the input box. And select Mumbai from the Suggested Dropdown List.

• Code Explanation:

1. The statement from line no. 5 to 7 is used to launch the browser and navigate to the SpiceJet website. 
2. The statement in line no. 7 is used to select the source city as Mumbai. 
3. The statement at line no. 9 will provide the input in the textbox as mu using the CSS Selector. 
4. The statement in line no. 10 fetches all the text from the suggestion and stores it in a variable named source1. 
5. In the statement in line no. 12, we are using the for loop to iterate over all the text stored in the source1 variable. 
6. In the statement at line no. 13, we are using the if condition, it gets the single text from the variable and compares it with the required text I.e source_city if it matches then it will enter the if condition and click on the element else it will exit the if condition. 
7. The statement from 16 to 19 is to close the page and browser and call the method we have created named Dynamic_dropdown.  

2. Using Built-In has_text method:

The playwright has the Built-In Locator feature which can only select elements that have a descendant matching another locator. The inner locator is matched starting from the outer locator, not from the document root element. 

• Test Case:

Step 1: – Launch any Browser. 

Step 2: – Navigate to https://www.spicejet.com/ website. 

Step 3:- Enter mu in the source input box. 

Step 4:- Select Mumbai from the source using the has_text method. 

Step 5:- Close the page and browser. 

3. Using Built-In has method:

• Test Case:

Step 1: – Launch any Browser. 

Step 2: – Navigate to https://www.spicejet.com/ website. 

Step 3: – Enter mu in the source input box. 

Step 4: – Select Mumbai from the source using has method. 

Step 5: – Close the page and browser. 

4. Using Dynamic XPATH:

In Dynamic XPATH, the xpath is created in such a way that we don’t require any looping and condition statements. The Dynamic xpath directly works on elements in the DOM. 

• Test Case:

Step 1: – Launch any Browser. 

Step 2: – Navigate to https://www.spicejet.com/ website. 

Step 3: – Enter mu in the source input box. 

Step 4: – Select Mumbai from the source using Dynamic XPATH. 

Step 5: – Close the page and browser. 

• Code Explanation:

1. The Statement from line no. 1 to 3 is referring to launch the browser. 
2. Here we are selecting Mumbai as the source and stored in a variable named source_city. 
3. The Statement at line no. 6 is used to navigate to the SpiceJet website. 
4. The statement in line no. 7 enters the value as mu in the search box. 
5. The statement at line no. 8 is used to wait until the provided locator is visible. 
6. Once the locators are visible then by using the dynamic xpath we are selecting the source city. 
7. Once the city is selected it will wait for 4 seconds and close the browser. 

Read the next Playwright blog Here.