Automation UI Test with Selenium in JavaScript

Here is an example of how to set up and run a basic UI test using Selenium with JavaScript (Node.js). This example uses the Selenium WebDriver and Mocha as the test framework.

1. Install Dependencies

First, you need to install the necessary packages. You can do this using npm:

npm init -y
npm install selenium-webdriver mocha chai

2. Create a Simple Test

Here’s an example of a UI test that navigates to Google’s homepage, searches for a query, and checks if the search results page is displayed:

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

const proxy = require('selenium-webdriver/proxy');

const { expect } = require('chai');
const mocha = require('mocha');

// Describe the test suite
describe('Google Search UI Test', function() {
   let driver;

   // Define the proxy settings
   const myProxy = proxy.manual({
      http: 'localhost:7890',
      https: 'localhost:7890',
   });
   // Set up Chrome options with the proxy
   const chromeOptions = new chrome.Options().setProxy(myProxy);

   // Set timeout
   this.timeout(30000);

   // Before each test, initialize the WebDriver
   before(async function() {
      driver = await new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
   });

   // After each test, quit the WebDriver
   after(async function() {
      await driver.quit();
   });

   // The actual test
   it('should search for a query and display results', async function() {
      // Navigate to Google
      await driver.get('https://www.google.com');

      // Find the search box using its name attribute and type a query
      const searchBox = await driver.findElement(By.name('q'));
      await searchBox.sendKeys('pkslow larry', Key.RETURN);

      // Wait for the results page to load and display the results
      await driver.wait(until.titleContains('pkslow larry'), 10000);

      // Verify that the title contains the search term
      const title = await driver.getTitle();
      expect(title).to.include('pkslow larry');
   });
});

3. Run the Test

To run the test, you can use Mocha from the command line:

mocha --timeout 30000

Explanation:

• Selenium WebDriver: Used to control the browser.
• Mocha: A JavaScript test framework running on Node.js, used to organize and run tests.
• Chai: An assertion library used here for making the test assertions.

How It Works:

1. Setup:

   • The before hook initializes the WebDriver, which in this case launches a Chrome browser.
   • The after hook closes the browser once the tests are done.

2. Test:

   • The test navigates to Google, searches for “Selenium WebDriver,” and waits for the results page to load.
   • It then checks if the page title contains the search term to confirm that the search was successful.

Notes:

• Browser Drivers: Make sure you have the ChromeDriver installed and accessible in your PATH if you’re using Chrome. You can download it from here.
• Other Browsers: You can easily switch browsers by changing .forBrowser('chrome') to .forBrowser('firefox') or another browser.

This code should give you a basic starting point for writing UI tests with Selenium in JavaScript.

Code

Please check the code in GitHub.