Playwright Automation - automate file uploads using Playwright

Uploading files using automation is always tricky. Uploading files using the Playwright is easy. Playwright provides a FileChooser (page.on('filechooser)) event which helps to upload a file. Also with this event you can verify if it supports multiple file uploads or not. Also, you can provide a timeout for uploading the file. 

I have created a YouTube video in the "software testing tips and tricks" channel where I have explained how to Upload a sample file from the specific path with the typescript code. Also, I will explain the code and the documentation with a few tips and tricks around.

Watch All playwright tutorial videos from the beginning 

Here is the sample Playwright - Typescript code to upload the file. 

import { test, expect } from '@playwright/test';

test('Handle file uploads', async({context})=>{

const page = await context.newPage();

await page.goto("https://cgi-lib.berkeley.edu/ex/fup.html");

// Start waiting for file chooser before clicking. Note no await.

const fileChooserPromise = page.waitForEvent('filechooser');

await page.locator("input[name='upfile']").click();

const fileChooser = await fileChooserPromise;

await fileChooser.setFiles('./tests/sample.txt');

await page.locator("input[type='submit']").click();}) 

 You can check if it allows you to upload multiple files or not using  fileChooser.isMultiple();

All Playwright Tutorial Posts -

• Setup NodeJS playwright and run the first script
• Learn basic automation with Playwright - with code
• Expect and Auto-waits in Playwright
• How to debug the playwright script?
• How to compare screenshots using Playwright?
• Best Practices with Playwright automation
• Playwright Tutorial - Handle Multiple Tabs with Playwright
• automate downloads using Playwright?

For any queries or suggestions feel free to comment on YouTube or reach out to social media pages.

Here are the links YouTube, Reddit, Facebook, and Twitter