Selenium with Javascript – Accessing Elements Example

by

Selenium with Javascript – Accessing Elements Example

In this session today, we are going to see, How can we access different type of elements in a web application. We are going to see 3 types of elements.

  1. Button or Link – We have to use click() method on them.
  2. Text Area or Input Field – We have to use sendKeys() method on them.
  3. Dropdown – We have to use Select class and selectByVisibleText method on them.

So, Let’s start now.

Let’s see the example for accessing different types of Elements in a Web Application.

  1. Navigate to the eCommerce Website.
  2. Click on any of the Item.
  3. Click on Add to Basket Button
  4. Click on View Basket Button
  5. Click on Proceed to checkout Button
  6. Enter Shipping and Billing details and click on place Order.
const {Builder, Browser, By, Key, Select, selectByVisibleText} = require('selenium-webdriver');

(async function example2() {

    //launch a browser
    let driver = await new Builder().forBrowser(Browser.FIREFOX).build();

    //Maximize the window
    await driver.manage().window().maximize();

    //Navigate to the Web Application
    await driver.get('https://qpdemoecommerce.com');

    //click on the product
    const ProductImage = await driver.findElement(By.xpath("//ul[@class='products columns-4']/li[1]"));
    await ProductImage.click();

    //click on add the cart button
    const AddtoCartButton = await driver.findElement(By.name("add-to-cart"));
    await AddtoCartButton.click();

    //click on View Cart button
    const ViewCart = await driver.findElement(By.className("button wc-forward"));
    await ViewCart.click();

    //click on proceed to checkout button
    const ProceedToCheckout = await driver.findElement(By.xpath("//div[@class='wc-proceed-to-checkout']/a"));
    await ProceedToCheckout.click();

    //enter first name
    const firstNameField = await driver.findElement(By.id("billing_first_name"));
    await firstNameField.sendKeys("QA");

    //enter last name
    const lastNameField = await driver.findElement(By.id("billing_last_name"));
    await lastNameField.sendKeys("Peddia");

    //enter address line 1 
    const addressline1 = await driver.findElement(By.name("billing_address_1"));
    await addressline1.sendKeys("42 Test Street");

    //enter city
    const CityField = await driver.findElement(By.name("billing_city"));
    await CityField.sendKeys("Hyderabad");

    //select State from dropdown
    const StateDD = await driver.findElement(By.id("billing_state"));
    const option = new Select(StateDD);
    await option.selectByVisibleText('Telangana');

    //enter Pin Code Value
    const PINCode = await driver.findElement(By.name("billing_postcode"));
    await PINCode.sendKeys("500055");

    //enter phone number
    const PhoneNo = await driver.findElement(By.name("billing_phone"));
    await PhoneNo.sendKeys("1234567890");

    //enter email 
    const emailField = await driver.findElement(By.name("billing_email"));
    await emailField.sendKeys("test@test.com");

    //click on place Order Button
    const placeOrderButton = await driver.findElement(By.id("place_order"));
    await placeOrderButton.click();


}) ();

Leave a Comment