Download Files Using JavaScript and Selenium: A Step By Step Guide

Challenges and Solutions in downloading files with Selenium

Selenium is a popular open-source tool that is used to automate web browsers. Selenium WebDriver comes with an exhaustive list of native functions that allows automation testers to effortlessly execute a wide variety of user interactions on the web application like click, type, drag and drop, etc. But when it comes to automating a feature like downloading files, things are not quite straightforward.

One obstacle that testers face while downloading files with Selenium is that every web browser offers a different UI when downloading a file. Even though there is no easy way to control the browser’s native dialogs by JavaScript, there is a workaround for it.

The solution is to trick the browser profile. By leveraging the browser profile setting, you can download files in Selenium WebDriver without interacting with the download window pop-up.

In this blog on how to download files using JavaScript, let us learn how to write automation test code to download a file using JavaScript and Selenium.

How to download files to a specific folder using JavaScript and Selenium?

Rather than downloading into the default Downloads folder, sometimes you might need to download the files to a specific folder location for storing and verifying all the downloads. In this section of this article on how to download files using JavaScript, let us learn how to configure the code to set the browser file Download directory for Chrome driver using Selenium and JavaScript.

Step 1: Make the following two additional imports in our previous code.

const chromeDriver = require("selenium-webdriver/chrome");
const webdriver = require("selenium-webdriver");

Step 2: Define Chrome options. Inside setUserPreferences, set your custom download path.

var options = new chromeDriver.Options();
  options.setUserPreferences({
    "download.default_directory": "yourdownloadolderpath",
  });

For example,

"download.default_directory": "D:\Test",

Step 3: Redefine your driver instance.

var driver = new webdriver.Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .forBrowser("chrome")
    .setChromeOptions(options)
    .build();

The full implementation is as shown below.

const { By, Key, Builder } = require("selenium-webdriver");
require("chromedriver");
 
const chromeDriver = require("selenium-webdriver/chrome");
const webdriver = require("selenium-webdriver");
 
async function example() {
  //To set chromeOptions
  var options = new chromeDriver.Options();
  options.setUserPreferences({
    "download.default_directory": "D:\Test",
  });
 
  //To wait for browser to build and launch properly
  var driver = new webdriver.Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .forBrowser("chrome")
    .setChromeOptions(options)
    .build();
 
  try {
    //To go to the test website from the browser with our code.
    await driver.get("http://demo.automationtesting.in/FileDownload.html");
 
    //To enter data inside the text area
    await driver
      .findElement(By.id("textbox"))
      .sendKeys("I love testing!", Key.RETURN);
 
    //To click on "Generate File" button
    await driver.findElement(By.id("createTxt")).click();
 
    //To click on "Download" link
 
    await driver.findElement(By.id("link-to-download")).click();
 
    //Wait for 5s till download is completed
    await driver.sleep(5000);
  } catch (e) {
    console.log("Error Occured:", e.name);
  }
  //It is always a safe practice to quit the browser after execution
  await driver.quit();
}
 
example();

Step 4: Run the code.

node testTwo.js

The test gets executed successfully, and the file is downloaded to the specific path mentioned.

If you are a JavaScript developer, this certification will certify your competence as an in-depth, hands-on JavaScript automation pro.

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

Here’s a short glimpse of the Selenium JavaScript 101 certification from TestMu AI:

How to download files using JavaScript and cloud Selenium Grid?

In the above demo test scenarios, we learned how to download files using JavaScript and Selenium WebDriver to our local systems and execute our tests in the Chrome browser.

However, most Selenium testing projects use online Selenium Grid to achieve cross browser testing and better test coverage to ensure that the test is working fine in all major browser-OS-device combinations.

In this section of this article on how to download files using JavaScript, let us learn how to execute our code in the cloud-based Selenium Grid provided by TestMu AI.

TestMu AI is a cross browser testing platform that provides an online browser farm of 3000+ browser and OS combinations and an online Selenium Grid that you can integrate with your current test project via minimum code changes. TestMu AI scalable cloud infrastructure helps you perform web testing and web application testing across real desktop and mobile browsers. You can execute your JavaScript automation tests instantly on TestMu AI cloud, without worrying about building or maintaining an in-house device lab.

Subscribe to the TestMu AI YouTube channel when you want to catch up with the latest news on automated browser testing, automated UI testing, etc.

Follow along to learn how!

Step 1: Create a free account on TestMu AI and secure your unique username and access key.

Step 2: Inside the test file, define all the required variables for connecting with the Remote Grid like your unique username, access key, grid host, remote grid URL etc.

const USERNAME = "YOUR_USERNAME"; //replace with your username
const KEY = "YOUR_ACCESSKEY"; //replace with your accesskey
 
const GRID_HOST = "hub.lambdatest.com/wd/hub";

const gridUrl = "https://" + USERNAME + ":" + KEY + "@" + GRID_HOST;

Step 3: Pass the browser capabilities. You can generate your custom desired capabilities using TestMu AI Capabilities Generator.

var capabilities = {
    "LT:Options": {
      user: USERNAME,
      accessKey: KEY,
      build: "JavaScript and Selenium Testing",
      name: "Download File",
      platformName: "Windows 11",
      selenium_version: "4.1.0",
      driver_version: "99.0",
    },
    browserName: "Chrome",
    browserVersion: "99.0",
  };

Here, I am configuring my test to run in Chrome Browser version 99.0 with Windows 11 OS using the latest Selenium 4.

Step 4: The configuration is completed. Our final code now looks like this.

const USERNAME = "YOUR_USERNAME"; //replace with your username
const KEY = "YOUR_ACCESSKEY"; //replace with your accesskey
 
const GRID_HOST = "hub.lambdatest.com/wd/hub";
 
const { By, Key, Builder } = require("selenium-webdriver");
 
async function example() {
 
  var capabilities = {
    "LT:Options": {
      user: USERNAME,
      accessKey: KEY,
      build: "JavaScript and Selenium Testing",
      name: "Download File",
      platformName: "Windows 11",
      selenium_version: "4.1.0",
      driver_version: "99.0",
    },
    browserName: "Chrome",
    browserVersion: "99.0",
  };
 
  const gridUrl = "https://" + USERNAME + ":" + KEY + "@" + GRID_HOST;
 
  //To wait for browser to build and launch properly
  let driver = await new Builder()
    .usingServer(gridUrl)
    .withCapabilities(capabilities)
    .build();
 
  try {
    //To go to the test website from the browser with our code.
    await driver.get("http://demo.automationtesting.in/FileDownload.html");
 
    //To enter data inside the text area
    await driver
      .findElement(By.id("textbox"))
      .sendKeys("I love testing!", Key.RETURN);
 
    //To click on "Generate File" button
    await driver.findElement(By.id("createTxt")).click();
 
    //To click on "Download" link
 
    await driver.findElement(By.id("link-to-download")).click();
 
    //Wait for 5s till download is completed
    await driver.sleep(5000);
  } catch (e) {
    console.log("Error Occured:", e.name);
  }
  //It is always a safe practice to quit the browser after execution
  await driver.quit();
}
 
example();

Step 5: Run the code.

node testThree.js

The test starts running. Go to the TestMu AI Dashboard to observe the live running status.

Our test got executed successfully. You can analyze the detailed report containing video and logs.

Moreover, you can navigate to the TestMu AI Analytics Dashboard to see test performance metrics. You can see the total number of tests passed or failed from the Test Summary section. You can also see the snapshot of consistent tests from the Test Overview section.

Conclusion

File Download is a common feature offered by most web applications. In this tutorial on how to download files using JavaScript and Selenium, we explored how to write an automation test case for downloading a file using JavaScript and Selenium WebDriver.

Additionally, we explored edge cases like how to download files using JavaScript to a specific folder and how to run our tests using an online Selenium Grid for better test coverage and cross browser testing. I hope this tutorial turned out to be beneficial!

Happy Testing!