Playwright Example >> Upload Files

Table of Contents

In this article, we will use Playwright (Python version) to upload file automatically.

Upload file manually

We will use the file upload example of w3school to test our code.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_file_upload_button

There are Choose File button and Submit button on the right side of the page.

Firstly, we will upload a file manually for demonstration purpose.

1. Click Choose File button and file selection dialog will popup.
   And we choose a dummy text file named test001.txt.

2. Click Submit button to post it to server.

Upload file with Playwright automatically

Next, we will use Playwright to upload the same file automatically.
You must prepare the file for uploading in local environment.
For example, we can place the file in the data folder located at the same folder with your Python code.

1. Open the website.

page.goto("https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_file_upload_button")

2. Find the input element for file uploading and use set_input_files() method to set the local file path.
   To find the input element we must locate the iframe element firstly because all the elements of right side on the page are all in the iframe named iframeResult.

page.frame_locator("iframe[name=\"iframeResult\"]") \
    .locator("input[name=\"filename\"]") \
    .set_input_files("./data/test001.txt")

3. Find the Submit button and click it to post file to server.

page.frame_locator("iframe[name=\"iframeResult\"]") \
    .locator("input[type=\"submit\"]") \
    .click()

Below is the complete code.

from playwright.sync_api import Playwright, sync_playwright, expect


def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()

    # Open new page
    page = context.new_page()

    # Open the website
    page.goto("https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_file_upload_button")

    # Set test001.txt to the input elment for file uploading
    page.frame_locator("iframe[name=\"iframeResult\"]") \
        .locator("input[name=\"filename\"]") \
        .set_input_files("./data/test001.txt")

    # Click Submit button
    page.frame_locator("iframe[name=\"iframeResult\"]") \
        .locator("input[type=\"submit\"]") \
        .click()

    # ---------------------
    context.close()
    browser.close()


with sync_playwright() as playwright:
    run(playwright)

To see the result of execution we must set breakpoint when closing of context.

The result is same as manual way.

Conclusion

To upload some files using Playwright, we should locate the input element for file uploading firstly and use the set_input_files() method to specify the path of the local files.
Finally we can post the set file to server by submitting the page.

If you want to learn more about Playwright usage, you can read the article below.

Playwright » Basic Usage
https://thats-it-code.com/playwright/playwright__basic-usage/

You can read the articles below to create a programming environment in your PC.

Let’s Create a Programming Environment
https://thats-it-code.com/programming/lets-create-a-programming-environment/

How to Create Python Virtual Environment
https://thats-it-code.com/programming/how-to-create-python-virtual-environment/