BDD Web Automation 12: Upload Files using Selenium WebDriver

Published Oct 05, 2018

This is the 12th post in a series, BDD Automation Test for Web UI. It mainly talks about how to write Web automation test script with Cucumber.js, a BDD test framework.

Content

Common methods for automating web elements
How to upload files

Common methods for automating web elements

Here is a list of commonly use methods on a web element object returned by WebDriver:

Method	Explanation	Example
click()	Click web element	driver.findElement({id:'xxx'}).click()
clear()	Clear text from input element	driver.findElement({id:'xxx'}).clear()
sendKeys(value)	Send text to the element	driver.findElement({id:'xxx'}).sendKeys("hello world")
getText()	Get web element text	driver.findElement({id:'xxx'}).getText()

These four methods are the most frequently used ones. The selenium-webdriver api also provides some more methods to call, such as getting the CSS property of the web element, or the coordinate position of the web element, etc. You can refer to the selenium-webdriver api to understand them better. In this post, we will discuss how to upload file on a web page.

Upload files

Some web pages ask user to upload files. They can be image files, or documents files. During the upload operation, a file dialog window pops up. In the file dialog, you select a file and then click Open.

To automate this process, there are 2 ways to fill the file upload control:

If standard file dialog is used by the web page, upload action can be automated with pure selenium-webdriver. You can call sendKeys() on the file control to fill the file control with file path and then submit form. With this approach, no file dialog will be shown, you just bypass the file dialog and set the file path directly in the file upload control.
If the page uses some flash control to upload the file, it cannot be called directly with selenium-webdriver, you can interact with the native windows controls to fill the file dialog with the file name. For more information on how to automate native windows controls, you can refer to Windows Application Automation 02 : Send Mail with Mail Client.

Here I would like to use Google search as an example to show the first solution, which is more common. With the Chrome DevTools, we can locate the file upload control, as shown below:

Then our node.js code can be written like this:

require('chromedriver')
const { Builder } = require('selenium-webdriver');

let driver = new Builder().forBrowser('chrome').build();
//open google image;

(async function() {
    await driver.get('https://www.google.com/imghp?hl=en&tab=wi');

    // click upload picture
    await driver.findElement({className:"S3Wjs"}).click()

    //find file input control and use sendKeys() to send input
    await driver.findElement({css:'#qbug > div > a'}).click();

    await driver.findElement({id: 'qbfile'}).sendKeys('c:\\temp\\cucumber.jpeg');

    return driver.quit()
})();

To test this script, you can use the following picture, save it under "c:\temp\cucumber.jpeg", which matches the path used in the code. Or you can change the path in the code to match the real location of the picture file.