How do I upload a file with Puppeteer Sharp?

Question

I'm using Puppeteer Sharp to test my web app. My web app has a button that triggers an <input type="file"> to let the user select a CSV file to upload.

How do I use that to upload a file when testing via Puppeteer Sharp? Just clicking the button isn't enough, because I need to give the browse-for-file dialog a path to the file.

Wilka · Accepted Answer · 2020-12-04T17:11:13.813

You can use Page.WaitForFileChooserAsync to interact with the file chooser. The important thing to remember is you need to have the file chooser ready before you click the <input type="file">.

For example:

var fileChooserDialogTask = page.WaitForFileChooserAsync(); // Do not await here

await Task.WhenAll(fileChooserDialogTask, page.ClickAsync("input[type='file']"));

var fileChooser = await fileChooserDialogTask;
await fileChooser.AcceptAsync(pathToFile);

If you try to click the <input type="file"> before you've called WaitForFileChooserAsync, you'll be stuck with the modal file chooser dialog waiting for you to do something.

How do I upload a file with Puppeteer Sharp?

1 Answers1