Getting Started with the "New Out of the Box" Series - Python+Playwright Automation Testing - 56 - Multi-File Uploads

1. Introduction

In the previous two articles, Macro uploaded files to input controls and non-input controls were explained and introduced from theory to practice, but then there are people who questioned the previous explanation and introduction of uploading a file, if you upload more than one file, Playwright is how to achieve this? Macro looked at the official API also has an API to upload multiple files, so today to explain and introduce this point of knowledge.

2. API for uploading multiple files (non-input control)

Upload multiple files to introduce the documentation address of the official API:Locator | Playwright Python

The input files to be uploaded can be selected using the locator.set_input_files() method.
It expects the first argument to point to the input element "file" of type. Multiple files can be passed in the array.
If some file paths are relative, they are resolved relative to the current working directory. An empty array clears the selected files.

2.1 Upload File Syntax

# Select one file
page.get_by_label("Upload file").set_input_files('')
 
# Select multiple files
page.get_by_label("Upload files").set_input_files(['', ''])
 
# Remove all the selected files Remove all files
page.get_by_label("Upload file").set_input_files([])
 
# Upload buffer from memory Upload from cache
page.get_by_label("Upload file").set_input_files(
    files=[
        {"name": "", "mimeType": "text/plain", "buffer": b"this is a test"}
    ],
)

Control to upload multiple files

Macro found an online example of input uploading multiple files and then implemented it in code.

3.1 Code design

3.2 Reference code

# coding=utf-8🔥

# 1. First set the encoding, utf-8 can support Chinese and English, such as the above, generally placed in the first line

# 2. Notes: including record creation time, creator, project name.
'''
Created on 2024-04-21
@author: Beijing, capital of People's *-* businessman
Public No.: Beijing Hongge (WeChat search: Beijing Hongge, follow Hongge, unlock more testing dry goods in advance!)
Project: The Latest Out of the Box Series - Python+Playwright Automation Testing - 56 - Uploading Files - Extra
'''

# 3. Import module

from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
    browser = (headless=False)
    context = browser.new_context()
    page = context.new_page()
    ("https:///demo/jstpsc202005191001")
    # Locate the Select File button
    ('#upload-input').set_input_files(['C:/Users/Administrator/Desktop/','C:/Users/Administrator/Desktop/'])
    #file_input_element.input_file('C:/Users/DELL/Desktop/')
    page.wait_for_timeout(10000)
    print("browser will be close")
    ()
    ()
    ()
with sync_playwright() as playwright:
    run(playwright)

3.3 Running the code

1. Run the code, right click Run 'Test', you can see the console output, as shown below:

2. Run the code after the action of the browser on the computer side (see can see the two pictures uploaded by Hong). As shown in the figure below:

4. Non-input control to upload multiple files

4.1 Code design

4.2 Reference code

# coding=utf-8🔥

# 1. First set the encoding, utf-8 can support Chinese and English, such as the above, generally placed in the first line

# 2. Notes: including record creation time, creator, project name.
'''
Created on 2024-04-21
@author: Beijing, capital of People's *-* businessman
Public No.: Beijing Hongge (WeChat search: Beijing Hongge, follow Hongge, unlock more testing dry goods in advance!)
Project: The Latest Out of the Box Series - Python+Playwright Automation Testing - 56 - Uploading Files - Extra
'''

# 3. Import module

from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
    browser = (headless=False)
    context = browser.new_context()
    page = context.new_page()
    ("https:///demo/easyUpload201801161800")
    with page.expect_file_chooser() as fc_info:
         ('//*[@id="easy1"]/div[2]/div[1]').click()  # Click the Select File button
    # ()
    file_chooser = fc_info.value
    file_chooser.set_files(['C:/Users/Administrator/Desktop/','C:/Users/Administrator/Desktop/'])  # Uploading files
    page.wait_for_timeout(10000)
    print("browser will be close")
    ()
    ()
    ()
with sync_playwright() as playwright:
    run(playwright)

4.3 Running the code

1. Run the code, right click Run 'Test', you can see the console output, as shown below:

2. Run the code after the action of the browser on the computer side (see can see the two pictures uploaded by Hong). As shown in the figure below:

5. Summary

5.1 Problems likely to be encountered

1. Report error when uploading multiple filesplaywright._impl._api_types.Error: Error: Non-multiple file input can only accept single file ，As shown in the figure below:

Reason for error: The error message indicates that an error occurred while trying to serve multiple files to an input element that does not support multi-file uploads. Typically, the HTML<input>Element iftypeattributefileand there is no settingmultipleattribute, then it can only accept a single file. This involves the knowledge of the front-end, macro here simply mention some, will not go into detail, interested partners or children can check their own information to understand the study.

Solution:

If you do need to upload multiple files in your code, then you need to make sure that the input element is able to accept multiple files. This usually means setting the HTMLmultipleProperties:
```
<input type="file" multiple>
```

Uploading files is a scenario we often need to face, if we use selenium, then our operation will be more complicated, because some files are uploaded as input controls, some need to pass the file address, once the file selection box pops up, selenium can not do anything about it, and playwright can be very good to help us solve this problem.

Well, it's not very early today, so Hong will explain and share here today, thank you for your patience in reading.