Tutorial 18 – Upload a File using ‘Record’ operation in ‘Playwright inspector’
What you will Learn in this blog:
Upload a file using ‘Record’ operation in ‘Playwright inspector’
Code snippets
Upload a file using ‘Record’ operation in ‘Playwright inspector’
Let us now see how to upload a file using PW.
We will upload a test file from our local machine to the below site
https://the-internet.herokuapp.com/upload
First we will choose a file and click ‘Upload’.
Create a new test file
Inspect ‘Choose File’ button
There is a ‘setInputFiles’ method that we can use to set the input file
This method accepts 2 arguments – selector (the locator of ‘Choose File’ button in current case) and file name
Let us write the first argument using css selector
Next, create a new child folder and under this folder, create a file having extention .pdf
Next, right click the pdf file
Click ‘Copy Relative Path’
Paste the relative path as second argument
Change backward slash to forward slash as shown below
Save the file.
Execute debug command
Click Step-over
Click Step-over once more, notice below that we can see the test.pdf file chosen
Next, see the ‘Record’ button in Playwright Inpsector
Click ‘Record’
Click ‘Upload’ button
The below page comes up
Click ‘File Uploaded’
Click test.pdf
The below lines get recorded in the inspector
Click the copy icon
Paste the lines in the test
Delete line#9, we are left with
Next, change ‘Click’ to ‘Assert’ in the 2 comments
Next, wrap the lines#11 and 14 with ‘expect()’ and change ‘click()’ to ‘toBeVisible()’
Save the file
Close the previous inspector by clicking ‘Resume’.
Execute the debug command
Keep clicking Step-over, notice that all the operations are success
Next execute the test without debug flag, notice that the test passes
This is show we can upload the file using PW.
Code snippet
import { test, expect } from '@playwright/test'
test("file upload operation", async ({ page }) => {
await page.goto('https://the-internet.herokuapp.com/upload')
await page.setInputFiles('#file-upload', 'PWTests/testpdf/test.pdf')
// Click input:has-text("Upload")
await page.locator('input:has-text("Upload")').click();
// Assert text=File Uploaded!
await expect(page.locator('text=File Uploaded!')).toBeVisible();
// Assert text=test.pdf
await expect(page.locator('text=test.pdf')).toBeVisible();
})
Thank you for reading!