1. Introduction
In practice, when we do web automation, file uploading is a very common operation, such as uploading user avatar, uploading ID card information and so on. So Hong is going to explain and share a little bit about uploading files according to their classification.
2. API for uploading files (non-input control)
Playwright is a modern automated testing tool that supports a wide range of browsers and operating systems, helping developers and testers easily build and run reliable end-to-end tests. In addition to its testing features, Playwright offers several utilities and APIs, including file upload and download features. These features help users simulate scenarios where a user uploads or downloads a file and verify that these operations are performed as expected. In this article, we will explore how to implement file uploads in Playwright and provide some sample code and best practices.
For example: the upload function on top of the platform will provide a template (e.g. excel, csv), at this time, we need to download this template, modify it and then upload it, as a tester, we need to verify that it has been downloaded locally.
Uploading files introduces the documentation address of the official API:Page | Playwright Python
2.1 Upload File Syntax
If you don't have the input element input on hand (it's a dynamically created non-input), you can deal with the("filechooser") event or use the appropriate wait method in your operation:
with page.expect_file_chooser() as fc_info: page.get_by_label("Upload file").click() file_chooser = fc_info.value file_chooser.set_files("")
Several methods of operation
- file_chooser.element Returns the input element associated with this file chooser.
- file_chooser.is_multiple() returns whether this file chooser accepts multiple files.
- file_chooser.page Returns the page to which this file chooser belongs.
Sets the value of the file input associated with this selector. If some of these filePaths are relative paths, they will be resolved relative to the current working directory. For an empty array, clear the selected files.
file_chooser.set_files(files)
file_chooser.set_files(files, **kwargs)
A few parameters
- files
- no_wait_after The action that initiated the navigation is waiting for these navigations to occur and for the page to start loading. You can opt out of waiting by setting this flag. You only need this option in special cases, such as navigating to an inaccessible page. The default is false.
- timeout Maximum time in milliseconds, default is 30 seconds, pass 0 to disable timeout. The default value can be changed using the browser_context.set_default_timeout() or page.set_default_timeout() methods.
2.2 Upload file demo
If you have to click on the file box instead of the input box (something that can't be done in selenium).
You can use page.expect_file_chooser() to listen to the popup box and enter the file path on the popup box with the following code:
with page.expect_file_chooser() as fc_info: page.get_by_label("Select File").click() () file_chooser = fc_info.value file_chooser.set_files(path)
You won't be able to see the file options box pop up during the run.
3. Upload file classification
First of all, we have to distinguish the kind of upload button, which can be roughly divided into two kinds, one is the input box, and the other one is more complicated, which is realized by js, flash, etc., with non-input labels.
There are two scenarios for uploading files: input control upload and non-input control upload. Most of the cases are input control upload files, only a very few use custom non-input upload files. Today, this article is used to introduce non-input control upload files.
4. Non-input control to upload files
4.1 What are non-input controls for uploading files?
In the web system, file upload function there are non-standard upload file function (non-input control upload), what is a non-standard file upload function, let's look at the following figure of the file upload function, as shown in the figure below:
In the image above, the html source code corresponding to the select file button has the tag img, and this element is a non-standard upload function.
5.Project practice
Hiro is on this site:https:/// Found a demo for a demo.
5.1 Code Design
5.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-27 @author: Beijing, capital of People's *-* businessman Public No.: Beijing Hongge (WeChat search: Beijing Hongge, pay attention to Hongge, unlock more testing dry goods in advance!) Project: "The latest out of the series of introductory chapter - Python + Playwright automation testing - 54- upload files (detailed tutorial) ''' # 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/preview201801282117/") page.wait_for_timeout(100) with page.expect_file_chooser() as fc_info: ("//html/body/div/div/div[1]/img[1]").click() # Click the Upload Attachment button # () file_chooser = fc_info.value file_chooser.set_files("C:/Users/Administrator/Desktop/") # Uploading files # In order to see the uploaded pictures clearly, Hiro increased the waiting time page.wait_for_timeout(10000) print("browser will be close"); () () () with sync_playwright() as playwright: run(playwright)
5.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 browser action on the computer side. As shown in the figure below:
6. Summary
Well, today's time is not very early, macro today to explain and share here, thank you for your patience to read, the next explanation of non-input controls is how to upload files.