JavaScript Automation Testing Tutorial: A Comprehensive Guide

Running tests using JavaScript automation testing frameworks

In this section of this tutorial on JavaScript automation testing, we will learn how to run tests using different JavaScript automation testing frameworks.

In this case, we will use three browser and operating system combinations to test whether a user can visit an e-commerce website, search for an item, add the item to the cart, and then check out the item.

The browser and operating system combinations can be:

• Chrome 118.0 + Windows 10
• Safari 17.0 + macOS Sonoma
• Firefox 118.0 + Linux

Here, we will be using different JavaScript testing frameworks to run tests on a scalable cloud grid like LambdaTest. It is an AI-powered test orchestration and execution cloud-based platform facilitating automation testing with JavaScript across large farms of over 3000+ browser and OS combinations.

Subscribe to the LambdaTest YouTube channel for more videos on Selenium testing, Playwright testing, Cypress testing, and more.

To define your desired browser and operating system combinations, you can use LambdaTest Capabilities Generator.

Follow the steps below to generate browser and operating system combinations.

Step 1: On the Capabilities Generator Page, select the programming language you are using to run your tests. In this case, we use JavaScript and can select Node JS, a JavaScript framework.

Step 2: Select Selenium as the tool you will be using to run the end-to-end tests.

Step 3: Then select Selenium 4 on the right.

Step 4: Configure your capabilities by selecting a browser and browser version.

Step 5: Click Configure Advanced Capabilities and select the operating system.

Step 6: Scroll down to the Build Settings section and fill out the input fields as shown below.

Step 7: Scroll down to the Test Configuration section and fill out the input field as shown below.

On the right, you can now see the capabilities presented in a code format that you can copy and use in your test script.

For our test cases, below are capabilities for browser and operating system combinations we want to test on an eCommerce website add-to-cart and checkout functionality.

Chrome 118.0 + Windows 10

Safari 17.0 + macOS Sonoma

Firefox 118.0 + Linux

In this case, we will run a test case scenario to test whether a user can visit an e-commerce website and add an item to the cart. Below is the test case scenario.

Test Scenario:

Creating and Running a Test Script using Playwright

In this section of this tutorial on JavaScript automation testing, we will learn how to create and run a test script using the Playwright framework.

Step 1: Run the command below on the command line to install Playwright in your project.

npm i playwright

Step 2: Run the command below on the command line to install Playwright dependencies.

npm i -D @playwright/test

Step 3: Configure the npm testscript to run the Playwright tests when the command npm test is executed. To do that, update the package.json file and add a scripts section, as shown below.

"scripts": {
"test": "npx playwright test"
},

The package.json file code should now look as shown below.

{
"scripts": {
"test": "npx playwright test"
},
"dependencies": {
"playwright": "^1.40.0"
},
"devDependencies": {
"@playwright/test": "^1.40.0"
}
}

Step 4: In the Playwright folder, create a file called playwright.config.js and add the following code.

const { devices } = require('@playwright/test')

// Playwright config to run tests on LambdaTest platform and local
const config = {
testDir: 'tests',
testMatch: '**/*.spec.js',
timeout: 60000,
use: {
viewport: null,
baseURL: 'https://ecommerce-playground.lambdatest.io'
},
projects: [
{
name: 'chrome:latest:MacOS Catalina@lambdatest',
use: {
viewport: { width: 1920, height: 1080 }
}
},
{
name: 'chrome:latest:Windows 10@lambdatest',
use: {
viewport: { width: 1920, height: 1080 }
}
},
{
name: 'MicrosoftEdge:90:Windows 10@lambdatest',
use: {
viewport: { width: 1920, height: 1080 }
}
},
{
name: 'pw-firefox:latest:Windows 10@lambdatest',
use: {
viewport: { width: 1920, height: 1080 }
}
},
{
name: 'pw-webkit:latest:MacOS Big sur@lambdatest',
use: {
viewport: { width: 1920, height: 1080 }
}
}
]
}

module.exports = config

In the code above, the configuration file sets up test parameters, defines a base URL, and specifies configurations for different test projects, each targeting a specific browser and platform combination for running tests on the LambdaTest platform.

Step 5: Create a file called lambdatest-setup.js in the Playwright folder, and add the following code.

 const base = require('@playwright/test')
 const path = require('path')
 const { chromium } = require('playwright')
 
 // LambdaTest capabilities
 const capabilities = {
   'browserName': 'Chrome', // Browsers allowed: 'Chrome', 'MicrosoftEdge', 'pw-chromium', 'pw-firefox' and 'pw-webkit'
   'browserVersion': 'latest',
   'LT:Options': {
     'platform': 'Windows 10',
     'build': 'Playwright Build - Full suite',
     'name': 'Playwright Test',
     'user': "Username",
     'accessKey': "accessKey",
     'network': true,
     'video': true,
     'console': true,
   }
 }
 
 // Patching the capabilities dynamically according to the project name.
 const modifyCapabilities = (configName, testName) => {
   let config = configName.split('@lambdatest')[0]
   let [browserName, browserVersion, platform] = config.split(':')
   capabilities.browserName = browserName ? browserName : capabilities.browserName
   capabilities.browserVersion = browserVersion ? browserVersion : capabilities.browserVersion
   capabilities['LT:Options']['platform'] = platform ? platform : capabilities['LT:Options']['platform']
   capabilities['LT:Options']['name'] = testName
 }
 
 const getErrorMessage = (obj, keys) => keys.reduce((obj, key) => (typeof obj == 'object' ? obj[key] : undefined), obj)
 
 exports.test = base.test.extend({
   page: async ({ page, playwright }, use, testInfo) => {
     // Configure LambdaTest platform for cross-browser testing
     let fileName = testInfo.file.split(path.sep).pop()
     if (testInfo.project.name.match(/lambdatest/)) {
       modifyCapabilities(testInfo.project.name, '${testInfo.title} - ${fileName}')
 
       const browser = await chromium.connect({
         wsEndpoint: 'wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}'
       })
 
       const ltPage = await browser.newPage(testInfo.project.use)
       await use(ltPage)
 
       const testStatus = {
         action: 'setTestStatus',
         arguments: {
           status: testInfo.status,
           remark: getErrorMessage(testInfo, ['error', 'message'])
         }
       }
       await ltPage.evaluate(() => {},
         'lambdatest_action: ${JSON.stringify(testStatus)}')
       await ltPage.close()
       await browser.close()
     } else {
       // Run tests in local in case of local config provided
       await use(page)
     }
   }
 })

The code above sets up Playwright tests to run on LambdaTest by dynamically configuring capabilities based on the project name and connecting to LambdaTest for cross browser testing. It also includes functionality to handle error reporting on LambdaTest. If the project name does not match LambdaTest, it runs the tests locally.

Step 6: Create a folder called Tests in the PLAYWRIGHT folder. Then, create a file called addToCart.spec.js in the Tests folder and add the following code.

const { test } = require('../lambdatest-setup')
const { expect } = require('@playwright/test')

test.describe('Ecommerce Site Tests', () => {
  test('Add to cart', async ({ page }) => {

    // Navigate to base url
    await page.goto('https://ecommerce-playground.lambdatest.io')

    // Click Shop by Category
    await page.locator('text=Shop by Category').click();

    // Click Phone, Tablets & Ipod
    await page.locator('text=Phone, Tablets & Ipod').click();

    // Hover over product
    await page.locator('text=Add to Cart Add to Wish List iPhone $123.20 iPhone is a revolutionary new mobile phone').hover()
    
    // Wait for element
    await expect(page.locator('text=Add to Cart Add to Wish List iPhone $123.20 iPhone is a revolutionary new mobile phone >> button >> nth=0')).toBeVisible()

    await page.waitForTimeout(2000)

    // Click add to cart
    await page.locator('text=Add to Cart Add to Wish List iPhone $123.20 iPhone is a revolutionary new mobile phone >> button').first().click()
    
    // Click view cart
    await page.locator('text=View Cart').click()

    // Assert correct product added to cart
    await expect(page.locator('#content >> text=iPhone')).toBeVisible()
  })
});

Code Walkthrough:

A test object from lambdatest-setup.js file and expect function from @playwright/test, used for asserting in the test, are imported.

A test suite named Ecommerce Site Tests is described.

A test case within the Ecommerce Site Tests suite named Add to cart is described. The test case provides an asynchronous function that receives the page object, representing the browser page, as a parameter.

Inside the test block, the path for web elements on the e-commerce website we want to be tested is defined.

Step 8: Run the command below on the command line to run the tests.

npm run test

Once the command completes running, you should see on the command line that the tests have passed, as shown below.

Creating and Running a Test Script using Cypress

In this section of this tutorial on JavaScript automation testing, we will learn how to create and run a test script using the Cypress framework.

Step 1: Run the command below on the command line to install Cypress in your project. Adding --save-dev to the command helps save the name and version of Jasmine in the dev-dependency object.

npm install --save-dev cypress

Step 2: Run the following command on the command line to launch the Cypress Test Runner.

npx cypress open

Step 3: On the Cypress Test Runner, select E2E Testing and click Continue.

Step 4: Choose Chrome as your preferred browser for E2E testing and click the Start E2E Testing in Chrome button.

Step 5: On the Chrome browser that launches, select Create new spec.

Step 6: Name the spec as test and click the Create spec button.

Step 7: Install the LambdaTest-Cypress CLI using the below command.

npm install -g lambdatest-cypress-cli

Step 8: Run the command below on the command line to generate lambdatest-config.json file that contains configurations like auth, capabilities, test settings, etc. which are needed to execute tests on LambdaTest successfully.

lambdatest-cypress init --cv=10

Step 9: Add the following code to the test.cy.js spec file created.

/// <reference types="cypress" />

describe("Ecommerce Site Tests", () => {
  beforeEach(() => {
    cy.visit("https://ecommerce-playground.lambdatest.io/");
  });

  it("Add To Cart", () => {
    cy.contains('Components').click({ force: true }) 
    cy.contains('iPhone').click({ force: true })
    cy.contains('Buy').click({ force: true })
    cy.contains('iPhone')
  });
});

Code Walkthrough:

A describe block called Ecommerce Site Tests is declared.

A beforeEach hook that navigates to the e-commerce site website is created. The hook ensures that the test environment is set up before each test.

An it block for a test case called Add To Cart is created.

In the code above, the Cypress contains() command is used to find elements containing the texts Components, iPhone, and Buy and to assert that there should be an element containing the text iPhone to ensure an iPhone has been added to the cart successfully.

Step 10: In the lambdatest-config.json file, add the path of the tests files as shown below.

"run_settings": {
      "reporter_config_file": "base_reporter_config.json",
      "build_name": "Add To Cart",
      "parallels": 1,
      "specs": "./cypress/e2e/*.cy.js",
      "ignore_files": "",
      "network": false,
      "headless": false,
      "npm_dependencies": {
         "cypress": "10"
      }
   },

Step 11: Run the command below on the command line to run the tests.

lambdatest-cypress run

Once the command runs, click the link on the command line and visit the LambdaTest Automation Dashboard to view your test results, as shown below.

Creating and Running a Test Script using Jasmine

In this section of this tutorial on JavaScript automation testing, we will learn how to create and run a test script using the Jasmine framework.

Step 1: Create a folder called JASMINE. Then, open the folder using a text editor of your choice. In this case, I am using Cursor.

Step 2: In the project folder, create a folder called Spec. In the Spec folder, create two folders called Tests and pageModel, as shown below.

Step 3: Run the command below on the command line to install Jasmine in your project.

npm install --save-dev jasmine

Adding –save-dev to the command helps save the name and version of Jasmine in the dev-dependency object.

Step 4: Run the command below on the command line to initialize Jasmine in your project.

npx jasmine init

Step 5: Configure the npm test script to run the Jasmine JS tests when the command npm test is executed. To do that, update the package.json file and add a scripts section, as shown below.

"scripts": {
    "test": "jasmine"
  },

The package.json file code should now look as shown below.

{
  "scripts": {
    "test": "jasmine"
  },
  "devDependencies": {
    "jasmine": "^5.1.0"
  }
}

Step 6: Install the latest version of the Selenium WebDriver in the project folder by running the command below on the command line.

npm install selenium-webdriver 

Step 7: In the PageModel folder, create two files named main.js and addToCart.main.js, as shown below.

The naming convention main.js of the files means that the main.js file is the parent file while the other files are child files. It simply means the child files will inherit some methods from the parent file.

Step 8: Install the dotenv package for managing environment variables using the command below.

npm install dotenv

Step 9: Create a file called .env in the main directory and add your LambdaTest username and access key, shown below.

LT_USERNAME="Your Username"
LT_ACCESS_KEY="Your Access Key”

Step 10: In the main.js file, add the following code.

selenium = require("selenium-webdriver");
const { Builder, By, Key, until } = require("selenium-webdriver");
const { Select } = require("selenium-webdriver");
require("dotenv").config();

const username = process.env.LT_USERNAME;
const accessKey = process.env.LT_ACCESS_KEY;

var remoteHub = "https://" + username + ":" + accessKey + "@hub.lambdatest.com/wd/hub";

const chromeWindowsCapability = {
	"browserName": "Chrome",
	"browserVersion": "118.0",
	"LT:Options": {
		"username": username,
		"accessKey": accessKey,
		"platformName": "Windows 10",
		"project": "JasmineSeleniumE2E",
		"name": "E2E",
		"w3c": true,
		"plugin": "node_js-node_js"
	}
}

const safariMacOSCapability = {
	"browserName": "Safari",
	"browserVersion": "17.0",
	"LT:Options": {
		"username": username,
		"accessKey": accessKey,
		"platformName": "macOS Sonoma",
		"project": "JasmineSeleniumE2E",
		"name": "E2E",
		"w3c": true,
		"plugin": "node_js-node_js"
	}
}

const fireFoxLinuxcapability = {
	"browserName": "Firefox",
	"browserVersion": "118.0",
	"LT:Options": {
		"username": username,
		"accessKey": accessKey,
		"platformName": "Linux",
		"project": "JasmineSeleniumE2E",
		"name": "E2E",
		"w3c": true,
		"plugin": "node_js-node_js"
	}
}

const getElementById = async (driver, id, timeout = 8000) => {
  const el = await driver.wait(until.elementLocated(By.id(id)), timeout);
  return await driver.wait(until.elementIsVisible(el), timeout);
};

const getElementByXpath = async (driver, xpath, timeout = 8000) => {
  const el = await driver.wait(until.elementLocated(By.xpath(xpath)), timeout);
  return await driver.wait(until.elementIsVisible(el), timeout);
};

const seleniumDriver = new selenium.Builder()
  .usingServer(remoteHub)
  .withCapabilities(chromeWindowsCapability)
  .build();

class Main {
  constructor() {
    this.driver = seleniumDriver;
    this.byId = getElementById;
    this.byXpath = getElementByXpath;
  }
}

module.exports = Main;

Code Walkthrough:

Since we are using Selenium to run the tests, Selenium WebDriver, until, select, and By are imported using the require function as shown below:

Variables username, accessKey, and remoteHub to be used in the test case are set.

Test capabilities are configured by passing browser, browser version, and operating system information with LambdaTest Selenium Grid capabilities through the capabilities object.

An async function called getElementById, which takes driver, id, and timeout parameters, is declared.

The driver parameter is an instance of a Selenium WebDriver used to control a browser. The id parameter is the ID of the HTML element you want to interact with. The timeout parameter is the maximum time in milliseconds that the getElementById function will wait for the element to become visible.

Inside the async function, a variable called el is declared. The variable value instructs the Selenium Driver to wait until the element with the targeted id is on the test URL. The elementLocated() method is used here.

Below is how the ID locator locates an element.

An object returned by the getElementById async function instructs the Selenium WebDriver to wait until the element targeted by the id is visible on the DOM. Visibility means that the element is not only displayed but also has a height and width that is greater than zero. The elementIsVisible() method is used here.

An async function called getElementByXpath with parameters driver, XPath, and timeout set to 8000 milliseconds is declared.

Inside the async function, a variable called el is declared, where the variable value instructs the Selenium WebDriver to wait until the element with the targeted XPath is located on the registration page of the e-commerce website, the elementLocated() method is used here.

Below is how an element is located by XPath.

An object returned by the getElementByXpath async function instructs the Selenium WebDriver to wait until the element we are targeting by XPath is present on the DOM of the registration page and visible. The elementIsVisible() method is used here.

A new instance of a Selenium WebDriver is initialized using the Builder design pattern.

The const declares a constant variable named seleniumDriver, which will hold the created Selenium WebDriver instance. The new selenium.Builder() creates a new instance of the Builder class provided by the Selenium library.

A JavaScript class called Main is created where the class has a constructor method, a special method called when an object of the class is created. The constructor method initializes the properties of the class.

A value of is assigned to this.driver property, a value of getElementById to this.byId property, and a value of getELementByXpath to this.byXpath property in this constructor method.

Finally, the Main class is exported to be used in other files.

Step 11: In the addToCart.main.js file, add the following code.

const Main = require('./main');

const ecommerceUrl = "https://ecommerce-playground.lambdatest.io/";

class AddToCart extends Main {
  
    constructor() {
      super();
      this.url = ecommerceUrl;

      this.categoryButton = ('//a[normalize-space()="Shop by Category"]');
      this.phonesCategoryButton = ('//span[normalize-space()="Phone, Tablets & Ipod"]');
      this.iPhoneButton = ('//div[@class="carousel-item active"]//img[@title="iPhone"]');
      this.addToCartButton = ('//div[@id="entry_216842"]//button[@title="Add to Cart"][normalize-space()="Add to Cart"]');
      this.cartButton = ('//a[@class="btn btn-primary btn-block"]');
      this.itemNameText = ('//td[@class="text-left"]//a[contains(text(),"iPhone")]');
    }

    async visit() {
        await this.driver.get(this.url);
      }
    
      async before() {
        this.driver;
      }
    
      async quitB() {
        await this.driver.quit();
      }
      
      async categoryBtn() {
        const categoryBtn = await this.byXpath(this.driver, this.categoryButton);
        await categoryBtn.click();
      }
    
      async phonesCategoryBtn() {
        const phonesCategoryBtn = await this.byXpath(this.driver, this.phonesCategoryButton);
        await phonesCategoryBtn.click();
      }
    
      async iPhoneBtn() {
        const HTCPhoneBtn = await this.byXpath(this.driver, this.iPhoneButton);
        await HTCPhoneBtn.click();
      }
    
      async addToCartBtn() {
        const categoryBtn = await this.byXpath(this.driver, this.addToCartButton);
        await categoryBtn.click();
      }
    
      async cartBtn() {
        const cartBtn = await this.byXpath(this.driver, this.cartButton);
        await cartBtn.click();
      }
    
      async itemName() {
        const itemName = await this.byXpath(this.driver, this.itemNameText);
        itemName.getText().then(function (value) {
          expect(value).toBe("iPhone");
        });
      }
}

module.exports = new AddToCart();

Code Walkthrough:

Variable Main is assigned the value of the Main class imported from the main.js file. Then, the variable ecommerceUrl is assigned the e-commerce website URL.

The child class of the parent class Main, called AddToCart, is created using the extends keyword. The AddToCart class will inherit all the methods from the Main class.

The AddToCart class constructor() method is created, using the super() method to call the constructor of the parent class Main. In the constructor method, this.url property is assigned the value of the variable ecommerceUrl.

Properties this.categoryButton, this.phonesCategoryButton, this.iPhoneButton, this.addToCartButton, this.cartButton, and this.itemNameText are assigned selector values that will be used to find or select buttons or text to add an item to a cart.

The async function visit() is created where the get() method is used to load the URL of the e-commerce store registration page.

The async functions before() and quitB() are created where the async function before() starts a browser session while the async function quitB() ends the browser session.

Async functions categoryBtn(), phonesCategoryBtn(), iPhonePhoneBtn(), addToCartBtn(), cartBtn(), and itemName() are created where the path for web elements, texts, and buttons to be tested when adding item to cart is defined.

Finally, the AddToCart class is exported to be used in other files.

Step 12: In the Tests folder, create a file called, mainTest.spec.js and add the following code.

const addToCart = require("../pageModel/addToCart.main");

//to set jasmine default timeout
jasmine.DEFAULT_TIMEOUT_INTERVAL = 80 * 1000;
jasmine.getEnv().defaultTimeoutInterval = 800000;

// Start to write the first test case
describe("E-Commerce Site End-To-End Tests", function () {
  beforeEach(async () => {
    addToCart.before();
  });

  afterEach(async () => {
    addToCart.quitB();
  });

  it("Add Item To Cart And Checkout", async function () {
    await addToCart.visit();

    // Add to cart
    await addToCart.categoryBtn();
    await addToCart.phonesCategoryBtn();
    await addToCart.iPhoneBtn();
    await addToCart.addToCartBtn();
    await addToCart.cartBtn();
    await addToCart.itemName();
  });

});

Code Walkthrough:

Variable addToCart is assigned the value of the AddToCart class imported from the addToCart.main.js file.

The default timeout interval for tests is set.

The jasmine.DEFAULT_TIMEOUT_INTERVAL = 80 * 1000 sets the default timeout interval to 80,000 milliseconds or 80 seconds. This means that if a test doesn't complete within 100 seconds, it will be marked as a failure.

The jasmine.getEnv().defaultTimeoutInterval = 80000 changes the default timeout interval to 60,000 milliseconds, or 60 seconds, after the initial default set in the previous line.

A describe block function called E-Commerce Site Automated Tests, where all the tests for the web application are written, is defined.

Inside the describe block, beforeEach and afterEach functions are created where they call before() and quitB() async functions created in the AddToCart class.

The beforeEach function is called before each test case is run and is used to set up the initial state or environment for the tests. The afterEach function is called after each test case is run, and it is used to clean up or reset the state of the environment after a test case is completed.

A test case called Add ItemTo Cart is defined.

The it function is used to define a single test case, and it takes two arguments: the first is a string that describes the test case, and the second is a function that contains the test logic.

Inside the test case, The visit() async function from the AddToCart class is called on the driver object, which is an instance of the Selenium WebDriver.

Async functions where the path for web elements, input fields, and buttons defined in the AddToCart class are called.

Step 13: Run the command below on the command line to run the tests.

npx jasmine spec/Tests/mainTest.spec.js

Once the commands run, you should see that the tests have passed successfully on your command line.

Creating and Running a Test Script using Jest

In this section of this tutorial on JavaScript automation testing, we will learn how to create and run a test script using the Jest framework.

Step 1: Run the command below on the command line to install Jest in your project. Adding --save-dev to the command helps save the name and version of Jest in the dev-dependency object.

npm install --save-dev jest

Step 2: Configure the npm test script to run the Jest tests when the command npm test is executed. To do that, update the package.json file and add a scripts section, as shown below.

"scripts": {
    "test": "jest"
  },

The package.json file code should now look as shown below.

{
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest": "^29.7.0"
  }
}

Step 3: Install the latest version of the Selenium WebDriver in the project folder by running the command below on the command line.

npm install selenium-webdriver

Your terminal line should look as shown below once the Selenium WebDriver is installed.

Step 4: Run the npm command below on the command line to install a Node.js JavaScript client for working with LambdaTest through Automation API.

npm i @lambdatest/node-rest-client

Step 5: In the JEST project folder, create a folder called Tests. Then, create a file called main.test.js in the Tests folder.

Step 6: Install dotenv package for managing environment variables using the command below.

npm install dotenv

Step 7: Create a file called .env in the main directory and add your LambdaTest username and access key, shown below.

LT_USERNAME="Your Username"
LT_ACCESS_KEY="Your Access Key”

Step 8: In the main.test.js file, add the following code.

const webdriver = require("selenium-webdriver");
const { until } = require("selenium-webdriver");
const { By } = require("selenium-webdriver");
const LambdaTestRestClient = require("@lambdatest/node-rest-client");
require("dotenv").config();

const username = process.env.LT_USERNAME;
const accessKey = process.env.LT_ACCESS_KEY;

const AutomationClient = LambdaTestRestClient.AutomationClient({
  username,
  accessKey,
});

const chromeWindowsCapability = {
  browserName: "Chrome",
  browserVersion: "105.0",
  "LT:Options": {
    username: username,
    accessKey: accessKey,
    platformName: "Windows 10",
    project: "Untitled",
    w3c: true,
    plugin: "node_js-node_js",
  },
};

const SafariMacosCapability = {
  browserName: "Safari",
  browserVersion: "16.0",
  "LT:Options": {
    username: username,
    accessKey: accessKey,
    platformName: "MacOS Ventura",
    project: "Untitled",
    w3c: true,
    plugin: "node_js-node_js",
  },
};

const firefoxWindowsCapability = {
  browserName: "Firefox",
  browserVersion: "106.0",
  "LT:Options": {
    username: username,
    accessKey: accessKey, 
    platformName: "Windows 11",
    project: "Untitled",
    w3c: true,
    plugin: "node_js-node_js",
  },
};

const getElementById = async (driver, id, timeout = 8000) => {
  const el = await driver.wait(until.elementLocated(By.id(id)), timeout);
  return await driver.wait(until.elementIsVisible(el), timeout);
};

const getElementByXpath = async (driver, xpath, timeout = 8000) => {
  const el = await driver.wait(until.elementLocated(By.xpath(xpath)), timeout);
  return await driver.wait(until.elementIsVisible(el), timeout);
};

// let sessionId = null;

describe("webdriver", () => {
  let driver;
  beforeAll(async () => {
    driver = new webdriver.Builder()
      .usingServer(
        "https://" + username + ":" + accessKey + "@hub.lambdatest.com/wd/hub"
      )
      .withCapabilities(chromeWindowsCapability)
      .build();
    await driver.getSession().then(function (session) {
      sessionId = session.id_;
    });
    // eslint-disable-next-line no-undef
    await driver.get('https://ecommerce-playground.lambdatest.io/');
  }, 50000);

  afterAll(async () => {
    await driver.quit();
  }, 40000);

  test("Add Item To Cart", async () => {
    try {
      const categoryBtn = await getElementByXpath(
        driver,
        '//a[normalize-space()="Shop by Category"]'
      );
      await categoryBtn.click();

      const phonesCategoryBtn = await getElementByXpath(
        driver,
        '//span[normalize-space()="Phone, Tablets & Ipod"]'
      );
      await phonesCategoryBtn.click();

      const iPhoneBtn = await getElementByXpath(
        driver,
        '//div[@class="carousel-item active"]//img[@title="iPhone"]'
      );
      await iPhoneBtn.click();

      const addToCartBtn = await getElementByXpath(
        driver,
        '//div[@id="entry_216842"]//button[@title="Add to Cart"][normalize-space()="Add to Cart"]'
      );
      await addToCartBtn.click();

      const cartBtn = await getElementByXpath(
        driver,
        '//a[@class="btn btn-primary btn-block"]'
      );
      await cartBtn.click();

      const itemName = await getElementByXpath(
        driver,
        '//td[@class="text-left"]//a[contains(text(),"iPhone")]'
      );
      itemName.getText().then(function (value) {
        expect(value).toBe("iPhone");
      });

      await updateJob(sessionId, "passed");
    } catch (err) {
      await updateJob(sessionId, "failed");
      await webdriverErrorHandler(err, driver);
      throw err;
    }
  }, 100000);    
});

async function webdriverErrorHandler(err, driver) {
  console.error("Unhandled exception! " + err.message);
  if (driver && sessionId) {
    try {
      await driver.quit();
    } catch (_) {}
    await updateJob(sessionId, "failed");
  }
}
function updateJob(sessionId, status) {
  return new Promise((resolve, reject) => {
    AutomationClient.updateSessionById(
      sessionId,
      { status_ind: status },
      (err) => {
        if (err) return reject(err);
        return resolve();
      }
    );
  });
}

Code Walkthrough:

Selenium WebDriver, until, By and LambdaTest Rest Client are imported using require function.

A new automation client instance called AutomationClient with LambdaTest credentials is created.

Test capabilities are configured by passing browser, browser version, and operating system information with LambdaTest Selenium Grid capabilities through the capabilities object.

An async function called getElementById with parameters driver, id and timeout set to 2000 milliseconds are declared.

An async function called getElementByXpath with parameters driver, xpath and timeout set to 2000 milliseconds is declared.

A describe block function called Ecommerce Site Automated Test, where all the tests for the e-commerce website are defined.

Inside the describe block, a variable called driver is declared, and a beforeAll() Jest method is created where it takes two parameters which are a function and timeout.

In the code above, the beforeAll() method runs a function before any of the tests in a file run. If the function returns a promise or is a generator, Jest waits for that promise to resolve before running tests. You can provide a timeout in milliseconds to specify how long to wait before aborting.

A new instance of a driver is created using the new webDriver.Builder() constructor.

A usingServer() method defines the remote URL for all builder instances created where the URL should be fully qualified for a WebDriver server.

A withCapabilities() method is created that sets the desired capabilities when requesting a new session. In this case, the withCapabilities() method takes the desired capabilities stored in the chromeWindowsCapability, safariMacosCapability, and firefoxWindowsCapability variables declared earlier.

A build() method that generates an action that contains all the actions gathered and ready to be performed is created.

An instance method called getSession() that returns a promise for a session is created.

A get() method opens the browser and navigates to the page URL you specify inside the method’s parentheses is created.

A afterAll() Jest method that takes two parameters which are function and timeout, is created.

A test block function called Add Item To Cart containing tests we want to run is created.

Inside the test block, a JavaScript try and catch statement is created.

Inside the try block, the path for web elements, input fields, and buttons on the e-commerce website we want to be tested is defined.

An async function called webdriverErrorHandler below the describe block with two parameters err, and the driver is created. Inside the async function, the error() method, which writes an error message to the console, is used.

A function called updateJob with parameters sessionId and status is created. Inside the function, a JavaScript Promise object is created.

Step 9: Run the command below on the command line to run the tests.

npm test main.test.js

Once the command completes running, you should see on the command line that the tests have passed, as shown below.

Creating and Running a Test Script using Mocha

In this section of this tutorial on JavaScript automation testing, we will learn how to create and run a test script using the Mocha framework.

Step 1: Run the command below on the command line to install Mocha in your project.

npm i mocha

Step 2: Install the latest version of the Selenium WebDriver in the project folder by running the command below on the command line.

npm install selenium-webdriver

Step 3: Run the command below on the command line to install cross-env, so you can have a single command without worrying about setting or using the environment variable properly for your project.

npm i cross-env

Step 4: Configure the npm test script to run the Mocha tests when the command npm test is executed. To do that, update the package.json file and add a script section, as shown below.

"scripts": {
    "test": "npm run single",
    "single": "cross-env CONFIG_FILE=single ./node_modules/.bin/mocha specs/addToCart.js conf/addToCart.conf.js"
  },

The package.json file code should now look as shown below.

{
  "scripts": {
    "test": "npm run single",
    "single": "cross-env CONFIG_FILE=single ./node_modules/.bin/mocha specs/addToCart.js conf/addToCart.conf.js"
  },
  "dependencies": {
    "cross-env": "^7.0.3",
    "mocha": "^10.2.0",
    "selenium-webdriver": "^4.15.0"
  }
}

Step 5: Create two folders called Conf and Specs in the Mocha project folder, as shown below.

Step 6: In the Conf folder, create a file called addToCart.conf.js and add the following code.

LT_USERNAME = process.env.LT_USERNAME || "Username";
LT_ACCESS_KEY = process.env.LT_ACCESS_KEY || "accessKey";

exports.capabilities = {
  'build': 'Mocha-Selenium', //Build name
  'name': 'Add To Cart', // Test name
  'platform':'Windows 10', // OS name
  'browserName': 'chrome', // Browser name
  'version': 'latest', // Browser version
  };

The code above sets up configuration object capabilities with specific settings for running tests on LambdaTest with Mocha JavaScript.

Step 7: In the Specs folder, create a file called addToCart.js and add the following code.

var assert = require("assert"),
  webdriver = require("selenium-webdriver"),
  conf_file = process.argv[3] || "conf/addToCart.conf.js";

var caps = require("../" + conf_file).capabilities;

var buildDriver = function(caps) {
  return new webdriver.Builder()
    .usingServer(
      "http://" +
      LT_USERNAME +
      ":" +
      LT_ACCESS_KEY +
      "@hub.lambdatest.com/wd/hub"
    )
    .withCapabilities(caps)
    .build();
};

describe("Ecommerce Automated Tests", function() {
  var driver;
  this.timeout(0);

  beforeEach(function(done) {
    caps.name = this.currentTest.title;
    driver = buildDriver(caps);
    done();
  });

  it("Add To Cart Test", function(done) {
    driver.get("https://ecommerce-playground.lambdatest.io/").then( function() {
      setTimeout(function() {
        driver.findElement(webdriver.By.xpath('//a[normalize-space()="Shop by Category"]')).click()
        driver.findElement(webdriver.By.xpath('//a[normalize-space()="Shop by Category"]')).click()
        driver.findElement(webdriver.By.xpath('//a[normalize-space()="iPhone"]')).click()
        driver.findElement(webdriver.By.xpath('//div[@id="entry_216842"]//button[@title="Add to Cart"][normalize-space()="Add to Cart"]')).click()
        driver.findElement(webdriver.By.xpath('//a[@class="btn btn-primary btn-block"]')).click()
        driver.findElement(webdriver.By.xpath('//td[@class="text-left"]//a[contains(text(),"iPhone")]')).click()
        done();
      }, 10000);
    });
  });

  afterEach(function(done) {
    if (this.currentTest.isPassed()) {
      driver.executeScript("lambda-status=passed");
    } else {
      driver.executeScript("lambda-status=failed");
    }
    driver.quit().then(function() {
      done();
    });
  });
});

Code Walkthrough:

The assert module for assertions and selenium-webdriver module are imported. Then process.argv is used to retrieve the configuration file path from the command line arguments, defaulting to "conf/addToCart.conf.js" if not provided.

The capabilities object from the specified configuration file conf/addToCart.conf.js is loaded.

A function buildDriver that creates a new WebDriver instance with LambdaTest server configuration and the specified capabilities is defined.

A test suite called Ecommerce Automated Tests is described using a describe block.

A beforeEach function that sets the test name in the capabilities and builds a new WebDriver instance before each test is defined.

A test case called Add To Cart Test is created using an it block.

Inside it block, the path for web elements on the e-commerce website we want to be tested is defined.

An afterEach function to be executed after each test is defined. If the test is passed, the function sets a custom status attribute using JavaScript on the browser and then quits the WebDriver after the test is completed.

Step 8: Run the command below on the command line to run the tests.

npm test

Once the command completes running, you should see on the command line that the tests have passed, as shown below.

Visit your LambdaTest Dashboard, and on the right side of the screen, you should be able to see your recent tests, as shown below.

Click on one of the tests, and you will be redirected to the Automation Dashboard, as shown below.

The Automation Dashboard has all the information about the test, including a video and a screenshot showing how the test went. You can also access the report on the Analytics Dashboard, which displays all the details and metrics related to your tests.

To see all the details and metrics related to your tests, navigate to the Analytics Dashboard, and you will be prompted to select an analytics template, as shown below.

In this case, you can select the Tests Summary Report template that provides all the summaries of the tests run on the LambdaTest Cloud Selenium Grid. On the right side of your page, you are prompted to create a dashboard where the test analytics will be displayed.

The first thing you need to do is give the dashboard a name. In this case, you can name the dashboard JasmineSeleniumE2E, as shown below.

Then filter the web automation reports you want to be displayed on the JasmineSeleniumE2E dashboard. In this case, you can filter the reports by Projects and then add the Projects, as shown below.

Finally, click the Create New Dashboard button at the bottom. You will then be redirected to the Test Summary report, as shown below.

Whether you're a developer or a tester aiming to enhance your skills as a JavaScript automation tester, join the Selenium JavaScript 101 certification program to strengthen your JavaScript expertise. This certification offers a solid groundwork, enabling you to effectively leverage Selenium JavaScript in testing endeavors and advance in your JavaScript automation testing journey.