Selenium Javascript Automation Testing Tutorial

Selenium Javascript Automation Testing Tutorial

6 min read Jun 18, 2024
Selenium Javascript Automation Testing Tutorial

Selenium JavaScript Automation Testing Tutorial

Introduction

Selenium is a powerful and widely-used open-source tool for automating web browsers. It's particularly valuable for testing web applications, ensuring their functionality and responsiveness across different platforms and browsers. This tutorial will guide you through the basics of Selenium automation testing using JavaScript.

Setting Up Your Environment

  1. Install Node.js: Selenium WebDriver requires Node.js and npm (Node Package Manager). Download and install the latest version from the official Node.js website.

  2. Install Selenium WebDriver: Use npm to install Selenium WebDriver:

    npm install selenium-webdriver
    
  3. Choose a Browser: Selenium supports a range of browsers, including Chrome, Firefox, Edge, Safari, and Internet Explorer. You'll need to download the appropriate WebDriver for your chosen browser.

    • Chrome: Download the ChromeDriver from
    • Firefox: Firefox WebDriver is included with the GeckoDriver, available at

    Place the downloaded WebDriver in a location where your Node.js project can access it.

Writing Your First Selenium Script

Let's write a simple script to open Google and search for "Selenium".

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

async function example() {
  let driver = await new Builder().forBrowser('chrome').build();

  try {
    await driver.get('https://www.google.com/');

    // Find the search input element
    let searchInput = await driver.findElement(By.name('q'));

    // Enter the search query
    await searchInput.sendKeys('Selenium', Key.RETURN);

    // Wait for the search results to load
    await driver.wait(until.titleIs('Selenium - Google Search'), 10000);

    console.log('Search successful!');
  } finally {
    await driver.quit();
  }
}

example();

Explanation:

  • require('selenium-webdriver'): Import the Selenium WebDriver library.
  • new Builder().forBrowser('chrome').build(): Creates a new WebDriver instance for Chrome.
  • driver.get('https://www.google.com/'): Navigates to Google's homepage.
  • driver.findElement(By.name('q')): Locates the search input element using its 'name' attribute.
  • searchInput.sendKeys('Selenium', Key.RETURN): Enters the search query and presses Enter.
  • driver.wait(until.titleIs('Selenium - Google Search'), 10000): Waits for the title to become 'Selenium - Google Search' for up to 10 seconds, indicating the results have loaded.
  • driver.quit(): Closes the browser window.

Locating Elements

Selenium offers different ways to locate elements on a webpage:

  • By ID: driver.findElement(By.id('elementId'))
  • By Name: driver.findElement(By.name('elementName'))
  • By Class Name: driver.findElement(By.className('className'))
  • By Tag Name: driver.findElement(By.tagName('tagName'))
  • By CSS Selector: driver.findElement(By.css('cssSelector'))
  • By XPath: driver.findElement(By.xpath('xpathExpression'))

Interacting with Elements

You can perform actions on located elements:

  • Click: element.click();
  • Enter Text: element.sendKeys('Text');
  • Get Text: element.getText();
  • Clear Input: element.clear();
  • Submit Form: element.submit();

Assertions and Validation

Selenium tests often include assertions to check if the application behaves as expected. You can use frameworks like chai for assertion. Here's an example using chai:

const { Builder, By, Key, until } = require('selenium-webdriver');
const chai = require('chai');
const expect = chai.expect;

async function example() {
  let driver = await new Builder().forBrowser('chrome').build();

  try {
    await driver.get('https://www.example.com/');

    // Find an element
    let element = await driver.findElement(By.id('someElement'));

    // Assertions
    expect(await element.getText()).to.equal('Expected text');
  } finally {
    await driver.quit();
  }
}

example();

Advanced Features

Selenium offers various advanced features for automation testing, including:

  • Handling Alerts: Use driver.switchTo().alert() to interact with alerts.
  • Switching Frames: Use driver.switchTo().frame() to navigate between iframes.
  • Taking Screenshots: Use driver.takeScreenshot() to capture snapshots of the browser window.
  • Running Tests in Parallel: Use Selenium Grid to execute tests concurrently across multiple machines.
  • Working with Cookies: Use driver.manage().getCookies() and driver.manage().addCookie() to manage cookies.

Conclusion

This tutorial has provided a basic introduction to Selenium automation testing using JavaScript. By following these steps, you can create automated tests to ensure the quality of your web applications. Remember to explore the comprehensive documentation of Selenium and experiment with different features to achieve your testing goals.