SDET Unicorns

Upload file on a hidden input field – WebdriverIO

Table of Content

I created a post last week showing you how to upload a file in WebdriverIO. However, one thing I didn’t cover is how to upload a file when the input element is hidden which is the case in most modern websites.

Let’s take a look at an example of how we can address that. I’m using online2pdf as our test site for this example.

Note: for this test site, the parent div containing the input was hidden so in order to make it interactable I had to make it visible for WebdriverIO by using browser.execute command (see code below).

const path = require('path');

describe('Upload File Hidden Input', () => {
  it('should be able to upload a file on hidden input', () => {
    // find your selectors
    const inputDiv = $('#div_file_box0');
    const input = $('#input_file0');
    const submitBtn = $('.convert_button');

    // store test file path
    const filePath = path.join(__dirname, '../data/chrome.png');

    // use browser.uploadFile to upload the test file
    const remoteFilePath = browser.uploadFile(filePath);

    // access the test page
    browser.url('https://online2pdf.com/');

    // change display to block from none for the hidden div
    browser.execute(function () {
      document.getElementById('div_file_box0').style.display = 'block';
    });

    // wait for div to be displayed
    inputDiv.waitForDisplayed();

    // set file path value in the input field
    input.setValue(remoteFilePath);
    submitBtn.click(); // click the submit button

    // temporary pause to see if the file got upload successfully
    browser.pause(5000);

    // Add your assertion here
  });
});

? This code is also available on GitHub for you to access and play around with.


Check out this video to see a detailed explanation of the code above:


To learn more about WebdriverIO, you can check out my free tutorial series here –

WebdriverIO – Tutorial Series for Beginners

My Resources

Thrive Suite: The all-in-one WordPress theme I used to create my blog.
Jasper AI: My favorite AI writing tool.
Surfer SEO:  A tool to help you rank your content on the first page of Google.

Write Content Faster

5/5

Write blog posts that rank for affiliate terms!

Join our mailing list

Unlock the Secrets to Becoming a SDET Pro in the Industry!

Stay ahead of the curve! Join our mailing list for exclusive insights, tips, and the latest industry updates delivered straight to your inbox

Table of Content

Related Post

Differences Between CI/CD and DevOps

Key Differences Between CI/CD and DevOps

Software development is far from a simple journey that involves merely executing code and launching applications. It often presents challenges, as it’s rare to get everything right from the start. Each time you implement new or frequent code changes, you inadvertently introduce potential issues that can be time-consuming to resolve. This complexity necessitates a structured approach to ensure smooth production.

Read More »
image

Common Types of Software Bugs

Dealing with bugs is one of the biggest headaches in the software development lifecycle. No matter how carefully someone writes code, it’s impossible to create a software product that works perfectly every time. Skipping detailed testing often causes major issues later on.

Read More »