Post
Ask Question

Handle Uploading File Scenario Using WebdriverIO And Playwright Automation Tool

In this article, we will look at how to handle uploading a file using WebdriverIO and Playwright Automation Tools

Prerequisite

In Automation, Testers found it difficult to mimic the flow of selecting a file from the user system and upload it to the web applications. There were tools like AutoIT to mimic this feature.

But with the emergence of robot class in java things got better and testers were able to automate this scenario without much difficulty.

In Javascript Test Automation Tools this uploading of file scenario can be handled very easily. Because each of the Javascript Test Automation Framework comes with inbuilt methods which helps us to upload the file to the web applications which you are testing.

Another useful feature that comes while using this JavaScript automation framework is that we can easily manipulate the DOM. 

Meaning in some web applications, while choosing to upload the file, Choose file button will be hidden. 

We can manipulate the DOM of the file upload button make the choose file button visible and then we can upload the file.

Playwright

We can upload the file to the web application using the setInputFiles function.

This function takes two arguments one is the selector of the upload file button and another is the path of the file.

Path of the file can be accessed using the path module available in the Node JS.

Create the object of the path module.

Use the path object and call the join function.

The join function takes arguments the directoryname,relative path of the file and appends it together.

const path=require('path');
let pathoffile=path.join(__dirname,'../data/tree-logo.jpg')
test.describe('upload test suite', () => {
    test('upload firtst test', async ({ page }) => {
        await page.goto('https://practice.automationbro.com/cart/');
        let pathoffile=path.join(__dirname,'../data/tree-logo.jpg')
        console.log('filepath',pathoffile)
        await page.locator('input#upfile_1').setInputFiles(pathoffile);
        await page.setInputFiles('input#upfile_1',pathoffile)
            
    })    
})

If Incase the choose upload file button is hidden,

Then we need to manipulate the DOM of the respective webelement.

In order to manipulate the DOM we need to call the evaluate function which in turn accepts an anonymous function, inside the function get the element using queryselector.

If element is found then change the element class name to null.

await page.evaluate(()=>{
const selector=document.querySelector('input#upfile_1');
if(selector){
selector.className=''
 }

In HTML a file upload button is created using 

<input type="file" class="file_input_hidden" >

The class attribute value is hidden, if you change the file_input_hidden value to null then you will be able to see choose file button in the web application.

The same flow we are achieving through the evaluate function which manipulates the DOM and we are able to change its value programmatically.

WebdriverIO

UploadFile function is used to upload the file to the web application.

setvalue function used to set the filepath to the input field.

Path of the file can be accessed using the path module available in the Node JS.

Create the object of the path module.

Use the path object and call the join function.

The join function takes arguments the directoryname,relative path of the file and appends it together.

const path=require('path');
let pathoffile=path.join(__dirname,'../data/tree-logo.jpg')

If in case the choose upload file button is hidden,

Then we need to manipulate the DOM of the respective webelement.

In order to manipulate the DOM we need to call the execute function which in turn accepts an anonymous function, inside the function get the element using queryselector.

If element is found then change the element class name to null or change the class name value to block.

const inputfield = $('#test-fileupload');
let pathoffile=path.join(__dirname,'../data/tree-logo.jpg')
// use browser.uploadFile to upload the test file
const remotefp = browser.uploadFile(pathoffile);
// set file path value in the input field
inputfield.setValue(remotefp);
browser.execute(function () {
    document.getElementById('#testid').style.display = 'block';
});

Summary

Hope this article will be helpful for handling uploading files scenarios in web application  Playwright and WebdriverIO Test Automation Project.


Similar Articles