How to Automate Browser Testing with Selenium in JavaScript

Automated browser testing is a must for any web developer to ensure their applications function correctly. In this post, we'll walk through setting up Selenium with JavaScript to automate a simple browser task: opening a webpage and clicking a button.

Prerequisites

To follow along, you’ll need:

• Node.js and npm installed.
• Google Chrome and ChromeDriver installed (or another browser and its respective driver).

Step 1: Set Up Your Project

First, create a new folder for your project. Open your terminal and run:

mkdir selenium-test
cd selenium-test

Next, initialize a new Node.js project:

npm init -y

This command generates a package.json file that keeps track of your project’s dependencies.

Step 2: Install Selenium WebDriver

We’ll use npm to install Selenium WebDriver and ChromeDriver:

npm install selenium-webdriver chromedriver --save

These packages provide the necessary libraries and tools to automate Chrome with Selenium.

Step 3: Write Your Selenium Script

Create a new file named test.js in your project folder. This script will open a webpage, wait for a button to become clickable, and then click it.

const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

// Helper function to pause the script
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest() {
  // Configure Chrome to suppress unwanted prompts
  let options = new chrome.Options();
  options.addArguments('--no-default-browser-check', '--no-first-run', '--disable-default-apps', '--disable-infobars');

  let driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(options)
    .build();

  try {
    // Open the target webpage
    await driver.get('https://example.com'); // Change this URL to the site you want to test

    // Wait for an element to load
    await driver.wait(until.elementLocated(By.className('sample-class')), 10000);
    console.log('Found element with class "sample-class".');

    // Generic wait for 6 seconds to handle any dynamic content
    await sleep(6000);

    // Wait for the button to be clickable
    await driver.wait(until.elementLocated(By.id('sample-button')), 10000);

    // Re-locate the button to ensure it’s still in the DOM
    let button = await driver.findElement(By.id('sample-button'));
    console.log('Button located:', button);

    // Click the button
    await button.click();
    console.log('Button clicked successfully.');

    // Wait for the next page or action to load
    await driver.wait(until.urlContains('new-page'), 10000);
    console.log('Navigation to new page was successful.');

  } catch (error) {
    console.error('Error during the test:', error);
  } finally {
    // Always close the browser
    await driver.quit();
  }
}

runTest();

Step 4: Run the Script

To execute your script, run:

node test.js

Chrome will open and perform the actions defined in your script. Watch the console for logs indicating each step's progress.

Troubleshooting

• StaleElementReferenceError: This happens when the DOM changes after finding an element. To avoid this, always re-locate elements right before interacting with them.
• Timeouts: If an element takes longer to load, increase the timeout in driver.wait().

Conclusion

You now have a basic setup for automated browser testing using Selenium and JavaScript. This setup can be easily expanded to include more complex interactions, checks, and validation steps.

Remember to keep your drivers updated to match your browser versions and consider using a headless mode for CI/CD environments.

If you want to host it in Azure check out my other post: https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and-send-email-notifications-on-failures-2aio

Happy testing!