How To Handle WebElements In Selenium Python
Tags: python, selenium, webelements, tutorial
Published: 2023-04-12 05:30:41

Selenium automation testing is the common term used to describe a test run using Selenium. When it comes to automation testing, [Selenium](https://www.lambdatest.com/selenium?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) is a popular open-source testing tool used to automate different web browsers, such as Chrome, Firefox, Microsoft Edge, and Safari, among others, across multiple platforms. The S[elenium WebDriver](https://www.lambdatest.com/learning-hub/webdriver?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=learning_hub) allows you to execute test scripts in various programming languages such as Java, Python, C#, JavaScript, PHP, and Ruby.

In Selenium, a WebElement represents an HTML element of a web page. WebElements are the building blocks of the web page. For example, anything on a web page, like a text box, button, links, dropdown buttons, etc., comes under WebElements.

Selenium WebDriver takes every single element and encapsulates it as an object of the WebElement. It provides an API to locate the web page elements and take a specific action like entering text into text boxes, clicking the buttons, etc. Using the Selenium framework, you can easily locate and interact with WebElements while performing [Selenium Python testing](https://www.lambdatest.com/selenium-python-testing?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage).

Handling WebElements is important when automating [web application testing](https://www.lambdatest.com/web-application-testing?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage). In this blog, we will look at how to handle WebElements in Selenium Python.

***Automate*** [***Cypress testing***](https://www.lambdatest.com/cypress-testing?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) ***and perform browser automation testing with LambdaTest. Our cloud infrastructure has 3000+ desktop & mobile environments. Try for free.***

### What are WebElements in Selenium?

WebElements in Selenium are HTML elements that make up the web page’s content. Each HTML document consists of several HTML elements. An HTML element comprises a start tag and an end tag determining its position in the document. Between those HTML tags lies the content of the document.

**Syntax:**

```plaintext

content comes here 
&lt;/end tag&gt;
```

The WebElement interface in Selenium allows you to interact with both visible and invisible elements on a web page. In Selenium, all the methods return a value or no value (null/void). Similarly, the WebElement command returns either null/void or the element being searched for.

Shown below is the command of a WebElement in Selenium:

```plaintext
 WebElement element = driver.findElement(By.id(“UserName“));
```
{% youtube VeV_sup5S8E %}


Subscribe to the [LambdaTest YouTube Channel](https://www.youtube.com/c/LambdaTest?sub_confirmation=1?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=youtube) and get the latest tutorials around [automation testing](https://www.lambdatest.com/automation-testing?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage), Selenium testing, [Playwright](https://www.lambdatest.com/playwright?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage), [Appium](https://www.lambdatest.com/appium-mobile-testing?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage), and more.

### Handling WebElements in Selenium Python

Selenium makes it simple for developers to automate [web testing](https://www.lambdatest.com/learning-hub/web-testing?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=learning_hub) and help you handle WebElements in Selenium Python when performing [Python automation testing](https://www.lambdatest.com/python-automation-testing?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage). Here are some of the best approaches to handling WebElements in Selenium Python.

### Alert Pop-Ups

Alerts and pop-ups are notification messages that alert a user about information or request authorization to carry out certain tasks. The appearance of an alert while performing [Python web automation](https://www.lambdatest.com/python-web-automation?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) hinders the Selenium WebDriver from interacting with the webpage’s elements until the alert is dismissed. This leads to tests stalling or failing if the alerts or pop-ups are not handled.

When an alert is prompted, the alert pop-up window is displayed on the current webpage. Since the Selenium WebDriver’s context is on the current page, we need to switch the WebDriver’s focus to the new alert window.

This is done using the **switch\_to.alert()** code command:

```plaintext
alert_object = driver.switch_to.alert
```

The other alert handling methods include:

* **accept()**
    

```plaintext
alert_object = Alert(driver)
alert_object.accept()
```

* **dismiss()**
    

The **dismiss()** method cancels the alert prompt.

```plaintext
alert_object = Alert(driver)
alert_object.dismiss()
```

* **send\_keys()**
    

The **send\_keys()** method accepts an argument, which will be entered in the alert pop-up.

```plaintext
alert_object = Alert(driver)
alert_object.send_keys("Okay")
```

* **text()**
    

The **text()** method retrieves and displays the text that is in the alert pop-up.

```plaintext
alert_object = Alert(driver)
print(alert_object.text)
```

#### Demonstration: How to handle an Alert in Selenium Python

Let us look at an example of a prompt alert and how we can handle it in [Selenium Python](https://www.lambdatest.com/learning-hub/python-tutorial?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=learning_hub).

**Test Case:**

To demonstrate how to handle an alert, we will use the example of the JavaScript Alert Box Demo from the [LambdaTest Selenium Playground](https://www.lambdatest.com/selenium-playground/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage).

1. Go to the [JavaScript Alert Box](https://www.lambdatest.com/selenium-playground/javascript-alert-box-demo?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) demo page.
    
2. Click on the **Click Me** button in the last JavaScript Alert Box page
    
3. Enter your name on the alert pop-up.
    
4. Click on the **OK** button.
    

**Implementation (Test Case on the Chrome Browser):**

Let us write a test script to handle a simple alert.

```plaintext
import os
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options as ChromeOptions


def test_handling_simple_alert():
    options = ChromeOptions()
    options.browser_version = "108.0"
    options.platform_name = "Windows 10"
    lt_options = {};
    lt_options["username"] = os.environ.get('LT_USERNAME');
    lt_options["accessKey"] = os.environ.get('LT_ACCESS_KEY');
    lt_options["build"] = "Handling Alerts";
    lt_options["project"] = "Handling Alerts";
    lt_options["name"] = "Handling Alerts";
    lt_options["w3c"] = True;
    lt_options["plugin"] = "python-python";
    options.set_capability('LT:Options', lt_options);
   
    # LambdaTest Profile username
    user_name = os.environ.get('LT_USERNAME')
    # LambdaTest Profile access_key
    accesskey = os.environ.get('LT_ACCESS_KEY')
    remote_url =  "https://" + user_name + ":" + accesskey + "@hub.lambdatest.com/wd/hub"
    driver = webdriver.Remote(remote_url, options=options)
   
    driver.get("https://www.lambdatest.com/selenium-playground/javascript-alert-box-demo")
    # Locate the button that prompts the alert
    alert_button = WebDriverWait(driver, 3).until(EC.element_to_be_clickable((By.XPATH, '//*[@id="__next"]/section[4]/div/div/div[2]/div[3]/p[3]/button')))
    alert_button.click()
    # Switch the webdriver's control to the alert pop-up
    alert_object = driver.switch_to.alert
    # Show the alert message
    print("This is the alert message: " + alert_object.text)
    #Enter text into the Alert using send_keys()
    alert_object.send_keys('Eugene')
    print("Entered my name in the prompt box")
    # Use the alert.accept() method to accept the alert
    alert_object.accept()
    print("Alert pop-up accepted by clicking the 'OK' button")
   
    # End the driver session
    driver.quit()
```

***This*** [***Playwright browser testing***](https://www.lambdatest.com/blog/playwright-framework?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog) ***tutorial will guide you through the setup of the Playwright framework, which will enable you to write end-to-end tests for your future projects.***

**Code Execution:**

We then run the test script by running the following command in the terminal.

```plaintext
python -m  pytest test_handling_alerts.py
```

Once the test is executed, the following output is displayed to show that the Selenium automated test was successful.

![image](https://cdn-images-1.medium.com/max/800/0*5eLvzCHDPHJ4an04.png)

You can view the test logs in the build section from the [LambdaTest Automation Dashboard](https://automation.lambdatest.com/build?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage).

![image](https://cdn-images-1.medium.com/max/800/0*GxAe_SrK91A0oWC7.png)

**Code Walkthrough:**

Let us review the code for the test script we wrote in the section above.

**Step 1:** Import the Selenium libraries needed to run the test.

![image](https://cdn-images-1.medium.com/max/800/0*acohdNGM4H9iCTyC.png)

In this case, we import **pytest**, a testing framework for Python that enables us to write unit tests. The **By** query helps us locate web elements within the [Document Object Model](https://www.lambdatest.com/blog/document-object-model/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog) (DOM) using the [find\_element() method in Selenium](https://www.lambdatest.com/blog/findelement-and-findelements-in-selenium/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog).

The **WebDriverWait** class combined with **expected\_conditions** allows us to specify the period of time the script should wait for a given condition to occur before continuing with the code. Finally, the **Options (ChromeOptions)** class customizes the ChromeDriver sessions and helps us perform operations like opening the Chrome browser.

**Step 2:** Generate the options using the [LambdaTest Capabilities Generator](https://www.lambdatest.com/capabilities-generator/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) to run the test in the Chrome browser.

![image](https://cdn-images-1.medium.com/max/800/0*rxqfUV6xlzzycKkl.png)

**Step 3:** Create a **remote\_url** variable that connects to the Remote Selenium Grid **(@**[**hub.lambdatest.com/wd/hub**](http://hub.lambdatest.com/wd/hub)**)** using the username and accesskey listed on the [LambdaTest Profile](https://accounts.lambdatest.com/detail/profile) page. We then pass the options and the **remote\_url** to instantiate the driver constructor.

![image](https://cdn-images-1.medium.com/max/800/0*x5SwjDrFYfLvtYdY.png)

**Step 4:** Open the LambdaTest Playground website and locate the button that prompts the alert using its [XPath Selector](https://www.lambdatest.com/blog/complete-guide-for-using-xpath-in-selenium-with-examples/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog) in the browser inspect tools, then click it to initiate the alert.

![image](https://cdn-images-1.medium.com/max/800/0*1ziCqfwJUayoXZjH.png)

![image](https://cdn-images-1.medium.com/max/800/0*S3kW_USLRu98FlLj.png)

When the **Click Me** button is clicked, the below window will be shown with the prompt alert.

![image](https://cdn-images-1.medium.com/max/800/0*x5zh02uaPuMNCcXI.png)

The WebDriver’s focus is then switched to the alert prompt using the **switch\_to.alert** method. Since the alert requires an input, we use the [send\_keys() method in Selenium](https://www.lambdatest.com/blog/how-to-use-selenium-sendkeys/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog) to pass a value (in this case, your name), and then we accept the alert pop-up using the **accept()** method. The WebDriver session is then closed using the **driver.quit()** method.

![image](https://cdn-images-1.medium.com/max/800/0*hfTC0MX1OH4WvWGK.png)

### Drag and Drop Operations

The [drag and drop operation in Selenium Python](https://www.lambdatest.com/blog/drag-and-drop-in-selenium-python/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog) allows users to use a mouse to move (drag) web elements from one location to another. In test automation using Selenium Python, the drag and drop function can be difficult to automate since it necessitates several actions and interactions.

The **ActionChains** class in Selenium Python provides methods to simulate the mouse events required for drag-and-drop. The methods are typically used to automate actions like mouse movements, keystrokes, context menu clicks, and mouse button events. The ActionChains object implements the class as a queue and calls the **perform()** method, which executes the actions together to prevent the test failure.

The syntax for creating an ActionChains object is:

```plaintext
from selenium.webdriver import ActionChains
action = ActionChains(driver)
```

The **drag\_and\_drop(source, target)** method performs the action of holding the left mouse button on the source element and releasing the mouse button at the target element.

```plaintext
action.drag_and_drop(source, target).perform()
```

#### Demonstration: How to perform a Drag-and-Drop Operation in Selenium Python

Let us look at how we can handle a drag-and-drop operation in Selenium using Python.

**Test Case:**

To implement drag and drop, we will use the example of Drag Drop Range Sliders from the LambdaTest Selenium Playground.

1. Navigate to the [Drag Drop Range Sliders](https://www.lambdatest.com/selenium-playground/drag-drop-range-sliders-demo?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) demo page.
    
2. Locate the drag pointer and drag it from 5 (source) to 50 (target)
    

**Implementation (Test Case on the Chrome Browser):**

```plaintext
import os
import pytest
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options as ChromeOptions
from selenium.webdriver import ActionChains


def test_handling_drag_and_drop():
    options = ChromeOptions()
    options.browser_version = "106.0"
    options.platform_name = "Windows 10"
    lt_options = {};
    lt_options["username"] = os.environ.get("LT_USERNAME");
    lt_options["accessKey"] = os.environ.get("LT_ACCESS_KEY");
    lt_options["visual"] = True;
    lt_options["build"] = "Handling Drag & Drop";
    lt_options["project"] = "Handling Drag & Drop";
    lt_options["name"] = "Handling Drag & Drop";
    lt_options["w3c"] = True;
    lt_options["plugin"] = "python-python";
    options.set_capability('LT:Options', lt_options);
    # LambdaTest Profile username
    user_name = os.environ.get('LT_USERNAME')
    # LambdaTest Profile access_key
    accesskey = os.environ.get('LT_ACCESS_KEY')
    remote_url =  "https://" + user_name + ":" + accesskey + "@hub.lambdatest.com/wd/hub"
    driver = webdriver.Remote(remote_url, options=options)
    driver.get("https://www.lambdatest.com/selenium-playground/drag-drop-range-sliders-demo")
   
    source = WebDriverWait(driver, 5).until(EC.presence_of_element_located((By.CSS_SELECTOR, "input[value='5']")))
    print("I am dragging the mouse from: ", source.get_attribute("value"))
    target = WebDriverWait(driver, 5).until(EC.presence_of_element_located((By.CSS_SELECTOR, "input[value='50']")))
    print("I'm dropping the mouse at: ", target.get_attribute("value"))
    driver.implicitly_wait(10)
    action = ActionChains(driver)
    action.drag_and_drop(source, target).perform()
    print("The mouse dragged from 5 to 50")
    driver.close()
```

**Code Execution:**

Pass the following command in the command line to execute the test script.

```plaintext
python -m pytest test_handling_drag_and_drop.py
```

The test passes once it runs and displays the following output in the terminal.

![image](https://cdn-images-1.medium.com/max/800/0*xkwHKEVtoIAKRsO8.png)

In the LambdaTest Automation Dashboard, you can see the results of the [test execution](https://www.lambdatest.com/learning-hub/test-execution?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=learning_hub). You can also see the live recordings of the test with detailed reports and logs.

![image](https://cdn-images-1.medium.com/max/800/0*bl9FxaX5z1Jh6UGk.png)

***Do you need to gather more knowledge on*** [***testing web***](https://www.lambdatest.com/blog/website-testing/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog)***? LambdaTest is here to explain further.***

**Code Walkthrough:**

**Step 1:** Import the Selenium libraries essential to the test script, including the **ActionChains** class that replicates mouse events for our test automation.

![image](https://cdn-images-1.medium.com/max/800/0*1cMCsr34TCBf9fPn.png)

**Step 2:** Using the **driver.get(url)** method, we navigate to the URL where our automated test will simulate the drag and drop operation.

![image](https://cdn-images-1.medium.com/max/800/0*9jPLcc1l-8U4ZyLQ.png)

**Step 3:** Next, locate the source web element and the target elements the mouse will drag and drop onto. We use the elements’ [CSS Selectors](https://www.lambdatest.com/blog/how-pro-testers-use-css-selectors-in-selenium-automation-scripts/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog) to locate them from the web browser’s inspect tools. The source element has an input value of 5, which will be moved to the target element, which has an input value of 50.

![image](https://cdn-images-1.medium.com/max/800/0*rlDII-fcTVe5CwsG.png)

Locating the source element using the CSS Selector in the Browser Inspect Tools:

![image](https://cdn-images-1.medium.com/max/800/0*IV37erFuKf4J4WR8.png)

Locating the target element using the CSS Selector in Browser Inspect Tools:

![image](https://cdn-images-1.medium.com/max/800/0*AtAnbWGD8yxymPZX.png)

**Step 4:** You then create an object of ActionChains and **invoke drag\_and\_drop(source, target).perform()** method to execute the mouse movement from 5 to 50 in the draggable slide.

**Step 5:** We finally close the webdriver session using the **driver.close()** method.

![image](https://cdn-images-1.medium.com/max/800/0*0JcAbxUQnCSe4OJf.png)

### Selecting Multiple Values in Drop-Down Menus

A drop-down is a navigation element of a website that can be used in forms, search filter features and the Navbar. It allows the selection of one or more options from a list of options.

Choosing multiple values from a drop-down menu while running automated tests in Selenium Python can be a challenge for testers. Automating the selection of multiple choices is complex, as the test script needs to identify the drop-down element with its options and then search through the list of options before selecting them.

In some instances, the drop-down menu options are dynamically generated and rendered differently based on the web browser or operating system used. This can make writing robust and efficient scripts challenging.

Below are screenshots of the same drop-down menu in Chrome and Firefox browsers on a Windows OS.

Drop-down menu in a Chrome browser:

![image](https://cdn-images-1.medium.com/max/800/0*ZZ5OEC5RQCvuM1K5.png)

Drop-down menu in a Firefox browser:

![image](https://cdn-images-1.medium.com/max/800/0*mAiVgdd_4KRJ8aWr.png)

The drop-down menu background color and font type are different in both browsers.

We use the **Select class** when testing with Selenium Python to address this issue. The Selenium WebDriver provides the Select class to handle single-select and multiple-select drop-downs with the `< select >` HTML tag. In Selenium Python, there are several methods for selecting dropdowns.

We will implement the following three methods to select multiple values in our test scenario:

* **select\_by\_index(index)**
    

This method uses the **get\_attribute(“index”)** of a `< option >` tag to determine its index and return the matching option.This method uses the **get\_attribute(“index”)** of a `< option >` tag to determine its index and return the matching option.

```plaintext
 multi_select = Select(dropdown)
 multi_select.select_by_index(0)
```

* **select\_by\_visible\_text(text)**
    

This method selects the options that display text that matches the argument passed. For example, the argument “Iowa” will select an option tag with `< option > Iowa < /option >`.

```plaintext
multi_select = Select(dropdown)
 multi_select.select_by_visible_text(“Iowa”)
```

* **select\_by\_value(value)**
    

This method selects the options whose value corresponds to the value argument.  
For example:  
`< option value=”AZ”> Arizona < /option >`

```plaintext
multi_select = Select(dropdown)
 multi_select.select_by_value(“AZ”)
```

#### Demonstration: How to handle Multiple Values in a Drop-Down Menu using Selenium Python

Let us look at how to automate the selection of multiple values in the following test case scenario.

**Test Case:**

1. Navigate to the [jQuery Dropdown Search](https://www.lambdatest.com/selenium-playground/jquery-dropdown-search-demo?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) demo page.
    
2. Go to the **Multi Select** section on the web page to choose multiple states.
    
3. Select 3 states from the dropdown menu.
    
4. Print the states selected.
    

**Implementation (Test Case on the Chrome Browser):**

```plaintext
import os
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options as ChromeOptions
from selenium.webdriver.support.select import Select


def test_multiple_values_dropdown():
    options = ChromeOptions()
    options.browser_version = "107.0"
    options.platform_name = "Windows 10"
    lt_options = {};
    lt_options["username"] = os.environ.get("LT_USERNAME");
    lt_options["accessKey"] = os.environ.get("LT_ACCESS_KEY");
    lt_options["build"] = "Handling Multiple Values Selection in Dropdowns";
    lt_options["project"] = "Handling Multiple Values Selection in Dropdowns";
    lt_options["name"] = "Handling Multiple Values Selection in Dropdowns";
    lt_options["selenium_version"] = "4.0.0";
    lt_options["w3c"] = True;
    options.set_capability('LT:Options', lt_options);
   
    # LambdaTest Profile username
    user_name = os.environ.get('LT_USERNAME')
    # LambdaTest Profile access_key
    accesskey = os.environ.get('LT_ACCESS_KEY')
    remote_url =  "https://" + user_name + ":" + accesskey + "@hub.lambdatest.com/wd/hub"
    driver = webdriver.Remote(remote_url, options=options)
    driver.get("https://www.lambdatest.com/selenium-playground/jquery-dropdown-search-demo")
   
    # Find the multiselect dropdown element in the page
    dropdown = WebDriverWait(driver, 3).until(EC.presence_of_element_located((By.XPATH, '//*[@id="__next"]/div/section[3]/div/div/div[2]/div[2]/div[2]/select')))

    # Using the webdriver Select class to select multiple values
    multi_select = Select(dropdown)
    driver.implicitly_wait(3)
    multi_select.select_by_index(0)
    driver.implicitly_wait(3)
    multi_select.select_by_value("AZ")
    driver.implicitly_wait(3)
    multi_select.select_by_visible_text("Iowa")
    print("All selected values using the SELECT Class in the dropdown are: \n")
    for option in multi_select.all_selected_options:
        print(option.get_attribute('innerText'))

    driver.close()
```

**Code Execution:**

Type the command below in the terminal to run the test script.

```plaintext
 python -m pytest test_multiple_values_dropdowns.py
```

The test executes successfully and displays the three selected states as the output.

![image](https://cdn-images-1.medium.com/max/800/0*Wai0H3T9KXC1OGKo.png)

You can view the status of your successful test run on your LambdaTest Automation Dashboard.

![image](https://cdn-images-1.medium.com/max/800/0*UE3rbLHVxdfNiErV.png)

***Inspect web elements to help developers and testers to debug UI flaws or make modifications in HTML or CSS files. Learn*** [***how to inspect element on Mac***](https://www.lambdatest.com/software-testing-questions/how-to-inspect-on-macbook?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage)***\-Book.***

**Code Walkthrough:**

**Step 1:** In the test script above, we import the necessary Selenium libraries required to run the script, including the **Select class** that will automate the selection of multiple options from a drop-down.

![image](https://cdn-images-1.medium.com/max/800/0*4EuuYZ-BMujvgh_x.png)

**Step 2:** Navigate to the website where we will run the test script using the **driver.get()** method. Using the [Explicit wait](https://www.lambdatest.com/blog/selenium-wait-for-page-to-load/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog) with **WebDriverWait**, we wait for the drop-down element to appear and then locate it using **XPath**.

![image](https://cdn-images-1.medium.com/max/800/0*y1XdcFPCdpor2Xlg.png)

![image](https://cdn-images-1.medium.com/max/800/0*m8Bx5Wm5PLgO-guo.png)

**Step 3:** We create an instance of the Select class using the **Select()** method by passing the **multi\_select** element as its argument. We select multiple values from the drop-down menu using the **select\_by\_index()**, **select\_by\_value()**, and **select\_by\_visible\_text()** methods.

**Step 4:** Then, use **all\_select\_options()** to iterate through the selected options and print the individual options we chose. The option tag’s text string will be printed by the **get\_attribute(“innerText”)** function.

![image](https://cdn-images-1.medium.com/max/800/0*zuNaTbS7LAnW-_eW.png)

**Step 5:** Finally, calling the **driver.close()** ends the driver session.

### jQuery Date Pickers

When automating an airline or hotel website or filling up a form on a website, you might come across a date picker or calendar to pick dates or even time. The jQuery calendar is the most commonly used date picker control. These calendars significantly enhance the user experience by making choosing dates easier and more dynamic.

jQuery date pickers can pose a challenge when automating web applications using Selenium Python.

The date pickers could implement multiple date and time formats, making it challenging as the test implementation will need to be adjusted to match the calendar’s style and appearance. The calendar may also require navigation controls such as previous and next buttons to choose different months and years to select the dates. The calendar date pickers may also be rendered differently depending on the browser.

[Booking.com](http://Booking.com) datepicker in the Chrome browser:

![image](https://cdn-images-1.medium.com/max/800/0*Qc6PPVqi5N_gWjti.png)

[Booking.com](http://Booking.com) datepicker in Firefox browser:

![image](https://cdn-images-1.medium.com/max/800/0*JS58BEsFyrpvu2xj.png)

#### Demonstration: How to handle a jQuery Calendar in Selenium Python

Let’s look at a scenario on how to automate a jQuery calendar in Selenium Python.

**Test Case:**

1. Navigate to the [jQuery Date Picker](https://www.lambdatest.com/selenium-playground/jquery-date-picker-demo?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) demo page.
    
2. Go to the **Date Range Picker**.
    
3. In the **From** date picker field, select 05/10/2023 as the date.
    
4. In the **To** date picker field, select 06/25/2023 as the date.
    
5. Print the dates selected.
    

![image](https://cdn-images-1.medium.com/max/800/0*ntMHXJMPRANmt-3N.png)

**Implementation (Test Case on the Chrome Browser):**

```plaintext
import os
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options as ChromeOptions
from selenium.webdriver.support.select import Select
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC


def test_handling_jquey_datepicker():
    options = ChromeOptions()
    options.browser_version = "107.0"
    options.platform_name = "Windows 10"
    lt_options = {};
    lt_options["username"] = os.environ.get('LT_USERNAME');
    lt_options["accessKey"] = os.environ.get('LT_ACCESS_KEY');
    lt_options["build"] = "Handling Date Pickers";
    lt_options["project"] = "Handling Date Pickers";
    lt_options["name"] = "Handling Date Pickers";
    lt_options["w3c"] = True;
    lt_options["plugin"] = "python-python";
    options.set_capability('LT:Options', lt_options)
    # LambdaTest Profile username
    user_name = os.environ.get('LT_USERNAME')
    # LambdaTest Profile access_key
    accesskey = os.environ.get('LT_ACCESS_KEY')
    remote_url =  "https://" + user_name + ":" + accesskey + "@hub.lambdatest.com/wd/hub"
    driver = webdriver.Remote(remote_url, options=options)
    # Handling JQuery DatePicker
    driver.get('https://www.lambdatest.com/selenium-playground/jquery-date-picker-demo')
   
    # expected dates to be selected
    from_date_target = '05/10/2023'
    to_date_target = '06/25/2023'

    from_date = '10'
    to_date  = '25'
   
   
    # From date
    # clicking on the from_date picker
    from_date_picker = driver.find_element(By.XPATH, "//input[@id='from']")
    from_date_picker.click()

    from_month = driver.find_element(By.XPATH, "//select[@class='ui-datepicker-month']")
    # We use the Select() method to select the target month we want
    from_month_selected = Select(from_month)
    from_month_selected.select_by_visible_text('May')

    from_day = WebDriverWait(driver, 5).until(EC.presence_of_element_located((By.XPATH,"//td[not(contains(@class,'ui-datepicker-month'))]/a[text()='" + from_date + "']")))
    from_day.click()

   
    # To date
    to_date_picker = driver.find_element(By.XPATH, "//input[@id='to']")
    to_date_picker.click()

    to_month = driver.find_element(By.XPATH, "//select[@class='ui-datepicker-month']")
    to_month_selected = Select(to_month)
    to_month_selected.select_by_visible_text('Jun')    

    to_day = WebDriverWait(driver, 5).until(EC.presence_of_element_located((By.XPATH,"//td[not(contains(@class,'ui-datepicker-month'))]/a[text()='" + to_date + "']")))
    to_day.click()
 
   
    # Assert the selected dates
    expected_from_date = from_date_picker.get_attribute('value')
    if expected_from_date == from_date_target:
        print("From date selected:", expected_from_date)
       
    expected_to_date = to_date_picker.get_attribute('value')
    if expected_to_date == to_date_target:
        print("To date selected:", expected_to_date)

    driver.close()
```

**Code Execution:**

To run the test script above in the terminal, run the following command:

```plaintext
python -m pytest test_handling_datepickers.py
```

The test script executes successfully and will display the following output.

![image](https://cdn-images-1.medium.com/max/800/0*AUumGOd_PlPYyfbX.png)

You can also view test results on the LambdaTest Dashboard.

![image](https://cdn-images-1.medium.com/max/800/0*AoepspKkdx55k8Yi.png )

Video recording of **From** date selection:

![image](https://cdn-images-1.medium.com/max/800/0*rVp-Dvi_U3EDhtIO.png)

Video recording of **To** date selection:

![image](https://cdn-images-1.medium.com/max/800/0*n047Im4tXrkoaS6t.png)

![image](https://cdn-images-1.medium.com/max/800/0*DuTrDICF8qO56QJU.png)

**Code Walkthrough:**

**Step 1:** Import the **Select class** from Selenium WebDriver to help us implement the `< select >` tag, which provides the helper methods with select and deselect options.

![image](https://cdn-images-1.medium.com/max/800/0*Ec6_4tQ3CvVz3ETV.png )

**Step 2**: Define the **from\_date target** and **to\_date\_target** date targets that we want to select from the datepicker.

![image](https://cdn-images-1.medium.com/max/800/0*QfMo3qOap_qE4xIV.png)

**Step 3:** The **from\_date\_picker** element is located using XPath in the Chrome Developer Tools and clicked to open the calendar.

![image](https://cdn-images-1.medium.com/max/800/0*d3JrClsDyA1hha8C.png)

**Step 4:** From the calendar, we locate **from\_month** using XPath and select the month using the **Select()** method. In this instance, we select the month of May using the **select\_by\_visible\_text()** method.

**Step 5:** Since we have specified the precise value of the **from\_date**, the 10th day is located from the month using a dynamic XPath, and the **contains()** method. We then click on the day.

![image](https://cdn-images-1.medium.com/max/800/0*kJFPg3Z3Ix_OXaas.png)

Given that the datepicker provides date range capability, the procedures implemented for the **from\_date** are also applied to the **to\_date**. The only difference comes from the months and locators used to locate the **“from”** and **“to”** dates. We selected June and the sixth day for the **to\_ date**.

![image](https://cdn-images-1.medium.com/max/800/0*RGpkL4MrDTzuxCdt.png)

**Step 6:** Finally, we ascertain that the **from\_date\_picker** and the **to\_date\_picker** variables have the exact value we specified in the **from\_date\_target** and the **to\_date\_target** variables using the **get\_attribute(‘value’)** method.

We store these values in the **expected\_from\_date** and **expected\_to\_date** variables and print the output.

**Step 7**: We then close the WebDriver session with the **driver.close()** method.

![image](https://cdn-images-1.medium.com/max/800/0*dwrrZuL9RrA33PVb.png)

### Mouse Hover Elements

A mouse hover action is an action taken when a user moves a mouse cursor over a designated part of a webpage, and it triggers a specific event. For example, in the Selenium eCommerce Playground website, hovering over a product element will show a sub-menu of a user’s actions, such as the “Add to Cart” function.

Mouse hover can also be used on banks’ websites to show different services the bank offers, as well as on hotel websites to zoom in on a location’s picture or add the location to likes.

Mouse hover on product item showing “Add to Cart” action:

![image](https://cdn-images-1.medium.com/max/800/0*D3935fjiejNHoBNb.png)

Mouse hover on the bank website showing the bank’s services:

![image](https://cdn-images-1.medium.com/max/800/0*cgJV4GL35EFAJY0h.png)

Hover elements can pose a challenge while writing automated tests using Selenium Python. Some elements are often hidden and only become visible when the mouse hovers over some other element, making it difficult to locate them using the standard **find\_element()** method.

Additionally, hover events can be unstable as they depend on the mouse movement speed and the timing of triggering the hover event. In the case of slow internet speeds, the mouse cursor movements might lag. This may result in the tests being flaky.

To handle mouse hover actions, we implement the methods from the **ActionChains** class. The class methods will simulate the mouse movement.

#### Demonstration: How to handle Mouse Hover Actions in Selenium Python

Let us look at a test case scenario that requires handling a mouse hover action.

**Test Case:**

1. Navigate to the LambdaTest Selenium eCommerce Playground.
    
2. Go to product items and hover the mouse on the item.
    
3. Click on the **Add to Cart** button that hovers over the product item.
    
4. Print that the item has been added to the cart successfully.
    

**Implementation (Test Case on the Chrome Browser):**

```plaintext
import os
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options as ChromeOptions
from selenium.webdriver import ActionChains
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time

def test_mouse_hover():
    options = ChromeOptions()
    options.browser_version = "107.0"
    options.platform_name = "Windows 10"
    lt_options = {};
    lt_options["username"] = os.environ.get("LT_USERNAME");
    lt_options["accessKey"] = os.environ.get("LT_ACCESS_KEY");
    lt_options["build"] = "MouseHoverHandling";
    lt_options["project"] = "MouseHoverHandling";
    lt_options["name"] = "MouseHoverHandling";
    lt_options["selenium_version"] = "4.0.0";
    lt_options["w3c"] = True;
    options.set_capability('LT:Options', lt_options);
     
    # LambdaTest Profile username
    user_name = os.environ.get('LT_USERNAME')
    # LambdaTest Profile access_key
    accesskey = os.environ.get('LT_ACCESS_KEY')
    remote_url =  "https://" + user_name + ":" + accesskey + "@hub.lambdatest.com/wd/hub"
    driver = webdriver.Remote(remote_url, options=options)
   
    driver.get("https://ecommerce-playground.lambdatest.io/")
    driver.implicitly_wait(10)
    # Find the element we want to hover
    product_item = driver.find_element(By.XPATH, '//*[@id="mz-product-listing-image-37213259-0-0"]/div/div[1]/img')

    # Create a sequence of actions through the ActionsChains class
    driver.implicitly_wait(10)
    actions = ActionChains(driver)
    # Perform triggers the actions
    actions.move_to_element(product_item).perform()
    driver.implicitly_wait(10)
   
    # find the add_to_cart element we want to click on the product elementa
    add_to_cart = driver.find_element(By.CSS_SELECTOR, 'button[title="Add to Cart"]')
    # The mouse will click the add_to_cart element to complete the sequence.
    driver.implicitly_wait(10)
    actions.click(add_to_cart)
    print("Item moved to the cart")

    driver.close()
```

**Code Execution:**

Type the following command in the terminal to run the test script.

```plaintext
python -m pytest test_mouse_hover.py
```

The test successfully executes on the terminal, displaying the output as shown below.

![image](https://cdn-images-1.medium.com/max/800/0*wM1Ap59uKnQAYoD-.png)

The test results can be viewed in the LambdaTest Dashboard.

![image](https://cdn-images-1.medium.com/max/800/0*Hk3TCMvby87hYVu1.png)

![image](https://cdn-images-1.medium.com/max/800/0*N8W4mvAnC6CGx7As.png)

**Code Walkthrough:**

**Step 1:** Import the **ActionChains** class from the Selenium WebDriver, which provides a variety of APIs for keyboard and mouse actions.

![image](https://cdn-images-1.medium.com/max/800/0*yF6LgooGAo7TZ_AZ.png)

**Step 2:** Navigate to the Selenium eCommerce Playground website using the **driver.get()** method. We first locate a product element in the webpage using its XPath from the Chrome Browser’s Inspect Tools to display the hover effect.

![image](https://cdn-images-1.medium.com/max/800/0*UN1E_uaBsM2oo6AI.png)

![image](https://cdn-images-1.medium.com/max/800/0*43x1TcYXrWslfXo0.png)

**Step 3:** Using the ActionChains class, we create an object of the class and use the **move\_to\_element()** method with the **product\_item** element as its parameter. The **move\_to\_element()** method moves the mouse to the middle of the element. Then apply the **perform()** method to implement the mouse action.

Once the mouse cursor is on the **product\_item** element, we locate the **add\_to\_cart** button using its CSS Selector. The **add\_to\_cart** element becomes visible when the mouse hovers over the **product\_item** and then clicks on it using the actions class object.

![image](https://cdn-images-1.medium.com/max/800/0*svsLzJHNmUvFpUy4.png)

![image](https://cdn-images-1.medium.com/max/800/0*uz8v3dsoET4-nbrK.png)

**Step 4:** We finally close the webdriver session using the **driver.close()** method.

***Perform manual or automated cross*** [***browser test***](https://www.lambdatest.com?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) ***on 3000+ browsers online. Deploy and scale faster with the most powerful cross browser testing tool online.***

### AJAX Form Submission

AJAX forms are a challenge in automation testing using Selenium Python because of the asynchronous nature of AJAX calls. AJAX calls can be used in web apps to enable features such as autocomplete search, which displays results as you type, or infinite scrolling to fetch additional content in social media apps without reloading the page.

When you fill in and submit the traditional forms, the page reloads, and the refreshed page can be interacted with easily using Selenium. AJAX forms, on the other hand, do not require a page reload because the form data is delivered and handled asynchronously in the background. As new content is received from the server, a part of the web page’s **DOM** is updated rather than the entire DOM state changing. This can make it difficult to determine whether the form has completed processing and if the refreshed page content is accessible to be interacted with through Selenium.

To automate handling AJAX form submissions, we use the explicit wait functions to wait for the refreshed page to load before proceeding with the code. On the other hand, implicit waits are not recommended for handling AJAX form submissions because they do not wait for a specific form submission to complete before continuing with the test script. The test script will continue to execute without waiting for the request to complete. This causes the test to be flaky because of wait time issues.

#### Demonstration: How to handle AJAX Form Submission using Selenium Python

To demonstrate handling AJAX form submissions, we will use the AJAX contact form by [Getform.io](http://Getform.io).

**Test Case:**

1. Navigate to the Getform CodePen URL.
    
2. Fill in the form details and click on the **Submit** button.
    
3. Wait for the submission response and print it.
    

![image](https://cdn-images-1.medium.com/max/800/0*bQ-f6LiqymxUD4Q8.png)

**Implementation (Test Case on the Chrome Browser):**

```plaintext
import os
import pytest
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options as ChromeOptions
from selenium.webdriver.support.select import Select


def test_AJAX_forms():
    options = ChromeOptions()
    options.browser_version = "107.0"
    options.platform_name = "Windows 10"
    lt_options = {};
    lt_options["username"] = os.environ.get("LT_USERNAME");
    lt_options["accessKey"] = os.environ.get("LT_ACCESS_KEY");
    lt_options["build"] = "Handling AJAX Forms";
    lt_options["project"] = "Handling AJAX Forms";
    lt_options["name"] = "Handling AJAX Forms";
    lt_options["w3c"] = True;
    lt_options["plugin"] = "python-python";
    options.set_capability('LT:Options', lt_options);
   
    # LambdaTest Profile username
    user_name = os.environ.get('LT_USERNAME')
    # LambdaTest Profile access_key
    accesskey = os.environ.get('LT_ACCESS_KEY')
    remote_url =  "https://" + user_name + ":" + accesskey + "@hub.lambdatest.com/wd/hub"
    driver = webdriver.Remote(remote_url, options=options)
   
    driver.get("https://codepen.io/getform/pen/jRoexL")
   
    # Get into the iFrame
    driver.switch_to.frame(driver.find_element(By.TAG_NAME, "iframe"))
   
    # Locate the Form
    form = driver.find_element(By.XPATH, '//*[@id="AJAXForm"]')
    # Identify the forms inputs and enter data through send_keys  
    email_element = form.find_element(By.XPATH, '//*[@id="exampleInputEmail1"]')
    email_element.send_keys('youremail@gmail.com')
    name_element = form.find_element(By.XPATH, '//*[@id="exampleInputName"]')
    name_element.send_keys('yourname')
    # Locate the dropdown
    platform_element = Select(form.find_element(By.XPATH, '//*[@id="exampleFormControlSelect1"]'))
    platform_element.select_by_visible_text('Github')
    submit = form.find_element(By.XPATH, '//*[@id="AJAXForm"]/button')
    submit.click()
   
    # Wait for the AJAX request to complete
    response = WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, '//*[@id="AJAXForm"]/div[4]')))
    print(response.text)
   
    driver.quit()
```

**Code Execution:**

Let us run the test script in the terminal using the following command:

```plaintext
python -m pytest test_handling_AJAX_forms.py
```

The test executes successfully, and the terminal displays the form’s response.

![image](https://cdn-images-1.medium.com/max/800/0*BF_2bvUnWhwsnWz6.png)

We can view the test results in the LambdaTest Automation Dashboard.

![image](https://cdn-images-1.medium.com/max/800/0*KC9Hi_9pm_q8B2Xb.png)

**Code Walkthrough:**

**Step 1:** To get started with the automated testing of an AJAX form submission test scenario in Selenium Python, we import the necessary Selenium libraries, including **WebDriverWait**, and the **expected conditions** for the explicit wait. The explicit wait will enable the WebDriver to wait until the form submission returns the response, and it becomes visible in the DOM.

**Step 2:** We also import the **Select** class to handle the drop-down input menu in the form.

![image](https://cdn-images-1.medium.com/max/800/0*jy9gJjp68_OY-wN7.png)

**Step 3:** The AJAX form is inside an iFrame, and the test script cannot continue to run until we switch the WebDriver’s context to the iFrame. In the Inspect Tool, the iFrame is identified by its TAG\_NAME. We then switch to the iFrame using the **driver.switch\_to.frame()** method with the iFrame element as its parameter.

![image](https://cdn-images-1.medium.com/max/800/0*BmsCFgcmuR58uzrZ.png)

![image](https://cdn-images-1.medium.com/max/800/0*utVm1kkJi4Ufpr6e.png)

**Step 4:** After switching to the iFrame, we locate the form using XPath from the Inspect Tools. After locating the email and name inputs, we use the **send\_keys()** method to fill in the email and name details.

**Step 5:** The **Select** class we imported will select an option from the **platform\_element** drop-down menu using the **select\_by\_visible\_text()** method. Finally, click on the **Submit** button to submit the form details.

![image](https://cdn-images-1.medium.com/max/800/0*qi-F-TtbFQW2on7t.png)

![image](https://cdn-images-1.medium.com/max/800/0*E1W9gc5DFcFXbL5a.png)

**Step 6:** After submitting the form, we use **explicit wait** to wait for the web page to load asynchronously until the response element is present in the DOM. Then print the response’s text.

![image](https://cdn-images-1.medium.com/max/800/0*ZxLAF9jMe8H-Wz2T.png)

**Step 7:** The **driver.quit()** closes the driver session.

### Dynamic Page Elements

If an element in a web application has attributes such as Class, ID, or XPath that change when the web application is reloaded, such elements are known as **dynamic web elements**. For example, the login web element ID on the Facebook login page changes every time the page is reloaded.

In the below image, the login button ID is “u 0 5 aj.”

![image](https://cdn-images-1.medium.com/max/800/0*nwS0YuRhOtm17lxp.png)

After the page is reloaded, the login button ID is now “u 0 5 Hg.”

![image](https://cdn-images-1.medium.com/max/800/0*yiVWrK153ZjtU0rf.png)

Dynamic content can be challenging to automate with Selenium Python because it requires the automated test to identify and interact with the dynamic web elements. When a dynamic page element on a web page loads, not all elements are available immediately. When the WebDriver tries to interact with an element before it is present, it results in a **NoSuchElementException.**

Stale elements, on the other hand, are elements that are no longer attached to the web page’s DOM because the page has been reloaded or the element has been removed and replaced by another element. If the WebDriver tries to interact with a stale element, it results in a **StaleElementReferenceException.**

You can learn more about it through this blog on [handling Errors and Exceptions in Selenium Python](https://www.lambdatest.com/blog/handling-errors-and-exceptions-in-selenium-python/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog).

To address this challenge, automated test scripts need to implement **explicit waits** to wait until the page has finished loading before interacting with elements, as well as dynamic locators to locate and interact with elements that may not exist when the test is initially executed.

#### Demonstration: How to handle Dynamic Content with Selenium Python

Let us look at a test scenario to handle dynamic content on a website.

**Test Case:**

1. Navigate to the Internet HerokuApp link.
    
2. Click on the **Start** button and wait for the web page to load.
    
3. Print the response displayed.
    

![image](https://cdn-images-1.medium.com/max/800/0*omBsPJomMZnckttL.png)

**Implementation (Test Case on the Chrome Browser):**

```plaintext
import os
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options as ChromeOptions


def test_dynamic_content():
    options = ChromeOptions()
    options.browser_version = "107.0"
    options.platform_name = "Windows 10"
    lt_options = {};
    lt_options["username"] = os.environ.get("LT_USERNAME");
    lt_options["accessKey"] = os.environ.get("LT_ACCESS_KEY");
    lt_options["build"] = "Handling Dynamic Content";
    lt_options["project"] = "Handling Dynamic Content";
    lt_options["name"] = "Handling Dynamic Content";
    lt_options["w3c"] = True;
    lt_options["plugin"] = "python-python";
    options.set_capability('LT:Options', lt_options);
   
    # LambdaTest Profile username
    user_name = os.environ.get('LT_USERNAME')
    # LambdaTest Profile access_key
    accesskey = os.environ.get('LT_ACCESS_KEY')
    remote_url =  "https://" + user_name + ":" + accesskey + "@hub.lambdatest.com/wd/hub"
    driver = webdriver.Remote(remote_url, options=options)
   
    driver.get("https://the-internet.herokuapp.com/dynamic_loading/2")
    # locate the button start to dynamically
    start_button = driver.find_element(By.XPATH, '//*[@id="start"]/button')
    start_button.click()
    # Waiting for the text to appear after clicking the start_button
    finish_element = WebDriverWait(driver, 30).until(EC.visibility_of_element_located((By.XPATH, '//*[@id="finish"]/h4')))
    print(finish_element.text)
   
       
    driver.quit()
```

**Code Execution:**

Run the command below in the terminal to execute the test script.

```plaintext
python -m pytest test_handling_dynamic_content.py
```

Once the test runs, the following output will be displayed in the terminal.

![image](https://cdn-images-1.medium.com/max/800/0*kzMJOm7CVIyL53iL.png)

We can see the status of the test execution and logs in the LambdaTest Automation Dashboard.

![image](https://cdn-images-1.medium.com/max/800/0*OtORODYnlH_Fkbke.png)

**Code Walkthrough:**

**Step 1:** Import the necessary Selenium libraries to run the test script, including the **WebDriverWait** class and **expected\_conditions** that provide the explicit wait.

![image](https://cdn-images-1.medium.com/max/800/0*5zwfonVAED6-sK87.png)

The WebDriver navigates to the website using the **driver.get()** method, locates the **start\_button** element using its XPath in the Inspect Tools, and clicks on it.

![image](https://cdn-images-1.medium.com/max/800/0*SrsBNI8p7sO1OlW_.png)

![image](https://cdn-images-1.medium.com/max/800/0*GgBDebB2hQGQbK98.png)

**Step 2:** Using the **WebDriverWait** class, the WebDriver waits for the visibility of the response **(finish\_element)** using an explicit wait. Once the element is present in the DOM, we print its text. The WebDriver will raise a **TimeoutException**, and the code will stop running if the **finish\_element** is not visible in the DOM after the explicit wait period. The exception can be caught using a **try-except** block.

![image](https://cdn-images-1.medium.com/max/800/0*jumkkJauvQBHbjjO.png)

**Step 3:** Finally, the **driver.close()** method ends the WebDriver session.

### Uploading Files

Uploading a file involves searching for a file at the required location or on your computer and uploading it to the website. This action can be done on specific websites, such as forms, document uploaders, and registration pages.

Uploading files can be challenging when performing automation tests with Selenium Python. The file dialog box that appears when you click the upload button is a native OS-level component and can be difficult to interact with programmatically, making it difficult to simulate the file selection process.

Additionally, different web applications might support various file formats for upload, and the same file upload element might behave differently depending on the file type. This can make writing reliable tests that function across several programs and file types difficult.

To handle this challenge, we will use the **send\_keys()** method to upload the file. This approach is applicable to file upload elements with the tagname **input** and the type attribute set to the **file**. The **send\_keys()** method will take the absolute path of the file as its argument and upload it to the web application we are testing.

#### Demonstration: How to Upload a File with Selenium Python

Let us look at a scenario for uploading a file when conducting automation testing with Selenium Python.

**Test Case:**

1. Navigate to the jQuery File Upload Demo page.
    
2. Locate and click on the **Add files** button on the webpage.
    
3. Choose a file you want to upload and click on **Open**.
    
4. Click on the **Start** button to upload the file.
    
5. Print that the file has been uploaded successfully.
    

**Implementation (Test Case on a Chrome Browser):**

```plaintext
import os
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options as ChromeOptions
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC


def test_file_uploads():
    options = ChromeOptions()
    options.browser_version = "107.0"
    options.platform_name = "Windows 10"
    lt_options = {};
    lt_options["username"] = os.environ.get("LT_USERNAME");
    lt_options["accessKey"] = os.environ.get("LT_ACCESS_KEY");
    lt_options["build"] = "Handling File Upload";
    lt_options["project"] = "Handling File Upload";
    lt_options["name"] = "Handling File Upload";
    lt_options["w3c"] = True;
    lt_options["plugin"] = "python-python";
    options.set_capability('LT:Options', lt_options);
   
    # LambdaTest Profile username
    user_name = os.environ.get('LT_USERNAME')
    # LambdaTest Profile access_key
    accesskey = os.environ.get('LT_ACCESS_KEY')
    remote_url =  "https://" + user_name + ":" + accesskey + "@hub.lambdatest.com/wd/hub"
    driver = webdriver.Remote(remote_url, options=options)
    # Access website to automate file upload
    driver.get("https://blueimp.github.io/jQuery-File-Upload/")
    # locate the file upload button on the page using XPATH
    file_upload = WebDriverWait(driver, 3).until(EC.presence_of_element_located((By.XPATH, "//input[@name='files[]']")))
    # The Send Keys method will include the path for the file that will be uploaded.
    file_upload.send_keys(r"C:\Users\Pictures\Saved Pictures\logo.jpg")
   
    start_upload = WebDriverWait(driver, 3).until(EC.presence_of_element_located((By.XPATH,'//*[@id="fileupload"]/table/tbody/tr/td[4]/button[2]')))
    start_upload.click()
   
    # is_displayed method is used to check if an element is visible to the user or not.
    if driver.find_element(By.XPATH, '//*[@id="fileupload"]/table').is_displayed:
        print("file uploaded successfully")
    else:
        print("File not uploaded")
   
    driver.close()
```

**Code Execution:**

Let us run the test script in the terminal with the following command:

```plaintext
python -m pytest test_upload_files.py
```

The test executes successfully and returns the following output in the terminal.

![image](https://cdn-images-1.medium.com/max/800/0*oZM7OQg_rdk7qXg9.png)

The test execution status can be viewed on the LambdaTest Automation Dashboard.

![image](https://cdn-images-1.medium.com/max/800/0*kfxAGMRVKvgyQecX.png)

**Code Walkthrough:**

**Step 1:** After creating an instance of the WebDriver, we navigate to the URL link using the **driver.get()** method. The **file\_upload** element is then located using XPath. To upload a file, the **send\_keys()** method takes an absolute path from the operating system’s directory, where the file is stored as its argument. The **file\_upload** element has a tagname of **input** and a type attribute of the **file**; hence, we could use the **send\_keys()** method to upload the file.

![image](https://cdn-images-1.medium.com/max/800/0*JvFKD_Yi540o7jmM.png)

![image](https://cdn-images-1.medium.com/max/800/0*XfEgF3UdIF1q2f43.png)

**Step 2:** We locate the **start\_upload** button element by using an explicit wait to wait for the element to appear on the DOM after the file is selected from the file upload window. Once the button appears, we click on it to upload the file to the website.

![image](https://cdn-images-1.medium.com/max/800/0*CMGswMsVlhQOg8bV.png )

![image](https://cdn-images-1.medium.com/max/800/0*LpRLi3EPuX-C33ga.png)

**Step 3:** To check if the file uploaded is in the web application’s DOM, we use the **is\_displayed()** method. If the uploaded file is present, we print that the file has been uploaded successfully. If not, the test prints that the file has not been uploaded. Finally, the WebDriver is closed using the **driver.close()** method.

![image](https://cdn-images-1.medium.com/max/800/0*aZ710NLAr_EQ18WZ.png)

![image](https://cdn-images-1.medium.com/max/800/0*wQ9T7qqo1yhHNiS6.png)

If you want to automate user actions on a website to verify its functionality, commands for WebElements in Selenium Python play an important role. These commands can help you automate [website testing](https://www.lambdatest.com/blog/website-testing/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog) in a more detailed manner. It’s recommended to run Selenium tests on real browsers, and operating systems will help you get accurate results.

Digital experience testing platforms like LambdaTest enables developers and QA to perform automated [Selenium testing](https://www.lambdatest.com/selenium-automation?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) using Python on an online [browser farm](https://www.lambdatest.com/online-browser-farm?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage) of 3000+ real browsers and OS combinations. LambdaTest offers support for different [Python testing frameworks](https://www.lambdatest.com/blog/top-python-frameworks-for-automation/?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=blog), including pytest, Robot, Behave, and more. In addition, you can perform parallel test execution to expedite your software release cycle.

***Test your native, hybrid, and web apps across all legacy and latest mobile operating systems on the most powerful*** [***online Android emulator***](https://www.lambdatest.com/android-emulator-online?utm_source=hashnode&utm_medium=organic&utm_campaign=apr12_ap&utm_term=ap&utm_content=webpage)***.***

### Conclusion

In this blog on WebElements in Selenium Python, we have demonstrated different ways to handle WebElements in Selenium Python. These include handling alert pop-ups, drag-and-drop operations, jQuery datepickers, hover elements, AJAX forms, etc. We have also looked at the approaches to handle them, such as the use of explicit waits, the ActionChains class, Select, and send\_keys methods.