How to get data of attributes in JavaScript using Selenium

Knowing how to get attribute value in Selenium is indispensable for validating web elements during mechanization quiz. By employ methods like getText () and getAttribute (), quizzer can verify UI conduct, compare attribute datum, and guarantee covering function as expected across different browsers and environments.

This article explains in detailwhat ascribe are in Selenium, how to convey their values using JavaScript, the stairs to apply tests, and how to scale with Selenium Grid and BrowserStack.

What are Attributes?

Attributes are additional info added to the HTML tags that are used to adjust the behavior or display of an HTML element. There are many tags in HTML that can include dimension in them.

For model, & lt; input typecast = & # 8220; email & # 8221; & gt;, here the input tag has the attribute of eccentric, which give a value of e-mail. In this example, an attribute is useful in clarifying what eccentric of value must be put in the remark element, i.e., email.

Here is the syntax of HTML component containing attributes:

& lt; element attribute= '' value '' & gt; content & lt; /element & gt;

There are legion attributes in HTML, used for several HTML tags, however, only a few are majorly habituate in automation testing. Some ordinarily used HTML attributes are id, class, src, style, etc.

Types of Attributes

HTML attributes are broadly relegate under four category:

1. Required attributes:These are the type of attributes that are always required in HTML tags. Without these attributes, HTML tatter are incomplete. For example, the & lt; img & gt; tag must have the src dimension.
2. Optional attributes:As the name suggests, these are optional HTML attributes which are not necessarily needed to be bestow. However, when added, give more information about the HTML tag.
3. Standard attributes:These are global attributes that function with almost all the HTML tags.
4. Event attributes:These are the attributes that trigger an event when a user performs some actions against them. For example, onclick attribute on an element performs an event when a user clicks on the web element.

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

How to get data of attributes in JavaScript habituate Selenium

In this tutorial, let ’ s see two effective methods to get datum of attributes in JavaScript employ Selenium.

• get_text method

Selenium insert this method to get the inner text from a specific web ingredient. It will return a string eccentric value, a text which is not hidden by any CSS. It simply extracts the schoolbook between the tags.

• get_attribute method

Where get_text method fetches the inner text, get_attribute retrieves the value of the give property. If there is no value nowadays, it returns zip. Also, it revert true and null for boolean values.

Steps to Get Data of Attributes using Selenium with JavaScript

Prerequisites

• Node.js: Install the latest edition of Node.js in your system. You candownloadit from its official site. Installing Node.js will automatically instal the latest version of NPM.
• IDE: IDE is used for writing your code; in this example, let & # 8217; s use VS codification to pen our test codification; withal, you can use any IDE.

Step 1: Setting up the project

• Navigate to your project leaflet and create a package.json file with the undermentioned command.

npm init

• Install the from the CLI with the following dictation.

npm install selenium-webdriver

• Now, establish a browser-driver, to run tests on a browser. In this example, let & # 8217; s use the Google Chrome web driver.

npm install chromedriver

• To add node modules to your project, install mocha. Mocha will also be habituate here as a test smuggler.

npm install mocha

• After performing the above installations, let us cut the scripts section in the package.json file.

& # 8220; scripts & # 8221;: {
& # 8220; test & # 8221;: & # 8220; mocha & # 8211; timeout 60000 & # 8221;

}

Step 2: Writing Test script

In this tutorial, let us use thissamplesite to learn to get data of attributes in Selenium. In this test, let us check whether the device has the correct picture name attached to it. Therefore, you will have to take two dimension ’ value and compare them if they have the device ’ s name in them.

To get the property, right-click the webpage and move to inspect the constituent.

Create a JavaScript file and enrol the following exam script into it

var webdriver = require ('selenium-webdriver '); const {By} = require ('selenium-webdriver '); describe ('Check twist has right image ', function () {var driver = new webdriver.Builder () .forBrowser ('chrome ') .build (); before (async function () {await driver.get ('https: //www.bstackdemo.com/ ');}); it ('Check device match with image gens ', async use () {let attribute = await driver.findElement (By.id (' 1 ')); let name = await driver.findElement (By.className ('shelf-item__title ')); console.table ([await attribute.getAttribute ('data-sku '), await name.getText ()])}); after (() = & gt; driver.quit ());}

Step 3: Executing Test

To run the exam, execute the following command.

npm test

After running the test, you will see a end like this, where both the values indicate that the image of the product matches the title of the production.

This tutorial explicate some of the effective ways to get data of property in JavaScript using Selenium. The methods discussed above are not limited to JavaScript and can be apply with any Selenium-supported language or framework. You can set up the project in the Localhost. However, you may use Selenium grid to broaden your automation testing experience. allows you to perform testing on multiple operating systems and browsers simultaneously. BrowserStack allows you to run Selenium tests on 3000+ real devices, browsers, and operating systems.

Related Guides