Question

0

1.2K

Views

Playwright: Upload files from non-input element that cannot be used page.setInputFiles?

I'm working on uploading files through non-input HTML tag on Playwright.

For example, you can use setInputFiles like this, and this works:

await page.setInputFiles('input[type="file"]', './headphone.png')

But apparently setInputFiles only works for input element, something like this will be error:

await page.setInputFiles('label.ImageUpload__label ', './headphone.png');

The HTML I'm working on is like this:

<div id="ImageUpload" class="ImageUpload u-marginB10">
        <label class="ImageUpload__label js-dragdrop-area" for="selectFileMultiple">
            <span class="ImageUpload__hide">drag and drop or select files</span>
            <span class="ImageUpload__text"><span class="js-dragdrop-num">10</span>up to</span>
        </label>
</div>

So, is it possible to upload files to such HTML elements with Playwright?

over 4 years ago · Santiago Trujillo

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-04-25T16:35:28.292Z

NodeJs: https://playwright.dev/python/docs/api/class-filechooser

        page.on("filechooser", (fileChooser: FileChooser) => {
             fileChooser.setFiles(["/path/to/a/file"]);
        })

Python: https://playwright.dev/python/docs/api/class-filechooser/

with page.expect_file_chooser() as fc_info:
    page.click("upload")
file_chooser = fc_info.value
file_chooser.set_files("/path/to/a/file")

Java: https://playwright.dev/java/docs/api/class-filechooser

FileChooser fileChooser = page.waitForFileChooser(() -> 
page.click("upload"));
fileChooser.setFiles(Paths.get("myfile.pdf"));

Answer 2 · 2022-04-25T16:35:28.300Z

I had the same issue so I decided to use AutoIt to upload files with Playwright.

AutoIt v3 is a freeware BASIC-like scripting language designed for automating Windows GUI and general scripting.

I used AutoIT to handle the Windows File Upload dialog, which cannot be handled using Playwright.

Creating Script

Download AutoIt: https://www.autoitscript.com/site/autoit/downloads/
Open SciTE Script Editor and type the followng:

WinWaitActive("Choose files")
Send("C:\ChromeDriver\text.txt") 
Send("{ENTER}")

If it does not work, change Choose files to whatever title is on the top left of the upload dialog.

Click save and name it something like upload.au3 and save it in the root directory of your test.

Example of Save Location

Right click your newly created file and click Compile Script

Executing the script in your test

Create execFile function of child process modules in node.js. Reference: https://nodejs.org/api/child_process.html#child_process_child_process_execfile_file_args_options_callback

Add this to the top of your .spec.ts test file:

var exec = require('child_process').execFile;
var upload_script = function(){
   exec('upload.exe', function(err, data) {  
        console.log(err)                  
    });  
}

Open the upload dialog, then call the function in your test

// Click Browse
await page.locator('#browse').click();

// Execute Upload Script
upload_script();

You have to run your test headed or it will not work:

npx playwright test --headed

0