Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to test the name of tag of an element using Protractor?
We will learn to use protractor to test the name of the tag of an element. Protractor is an end-to-end testing framework for Angular and AngularJS applications. Protractor is built on top of WebDriverJS, which is a JavaScript implementation of the WebDriver API, and supports multiple browsers such as Chrome, Firefox, and Safari. It is popular among developers and testers because it provides a simple and effective way to test Angular applications without having to write complex code.
Learning how to test the name of the tag of an element using a Protractor is a crucial aspect of automated testing for web applications. By testing the name of the tag, we can ensure that the elements on the page are properly constructed and functioning as intended. This can help to catch errors and bugs early in the development process, leading to more robust and reliable web applications.
We will take two different examples to test the name of the tag of an element so that you will be able to understand the topic clearly.
Test the tag name of a single element
Test the tag names of multiple elements
Test the tag Name of a Single Element
Let suppose we have one button with the id “btn”. We can find the button using the id and then test the name of the tag using a protractor.
Syntax
Users can follow the below syntax to use the protractor to test the tag name of single element.
expect(elementFinder.getTagName()).toEqual(expectedTagName);
Here elementFinder is the Protractor ElementFinder object that represents the HTML element you want to test. And expectedTagName is a string that represents the expected name of the tag for the HTML element.
Example
In the below example, we have created 3 files – conf.js, test.html and test.js.
We have a conf.js file in a folder conf, and the tests folder contains test.html and test.js.
conf.js
This file is the configuration file for Protractor. It sets the browser capabilities to Chrome, specifies the Jasmine framework, and specifies the location of the test script file. It also sets a default timeout interval and the base URL for the tests. The onPrepare function is used to set the browser's reset URL.
exports.config = {
directConnect: true,
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome'
},
// Framework to use. Jasmine is recommended.
framework: 'jasmine',
/* Spec patterns are relative to the current working directory when protractor is called */
specs: ['../tests/test.js'],
// Options to be passed to Jasmine.
jasmineNodeOpts: {
defaultTimeoutInterval: 30000
} ,
// Define the baseUrl for the file
baseUrl: "file://" + __dirname + "/",
onPrepare: function () {
browser.resetUrl = "file://";
}
} ;
test.html
This HTML page contains a button element with an id of "btn".
<html> <head> </head> <body> <h2>Test the tag name of single element</h2> <button id = "btn"> Click Me </button> </body> </html>
test.js
This test.js file tests the name of tag of an element on a web page. The beforeEach disables waiting for Angular render update and loads our test HTML file. In it block, the element with ID "btn" is selected, and then getTagName() method is used to retrieve the tag name of the selected element. The expect() function is used to compare the retrieved tag name with the expected value, which is "button" in this case. This test verifies that the tag name of the element with ID "btn" is equal to "button".
describe('Testing the name of tag of an element', function() {
beforeEach(function() {
// Disable waiting for Angular render update
browser.waitForAngularEnabled(false);
// Load the web page
browser.get('../tests/test.html');
});
it('should check the tag name of button element', function() {
// Get the element by ID
let buttonTag = element(by.id('btn') );
// verify if the tag name is equal to 'button'
expect(buttonTag.getTagName()).toEqual('button');
});
});
Command to run configuration file
protractor conf.js(file path)
Output
We can see that we are getting all the tests passed, and there is no error.
Test the tag Names of Multiple Elements
Let say we have multiple div elements with different IDs and the same class. Then we do not need to check the tag name for each element using IDs. We can simply check the tag names of multiple elements using the class in the protractor.
Example
This is an example of using a Protractor to test the name of tag when there are multiple elements having the same tag.
test.html
This HTML page contains three div elements with unique IDs and the same class of “collection”.
<html>
<head>
</head>
<body>
<h2>Test the tag names of multiple elements</h2>
<div id = 'firstDiv' class = "collection" >
<p> It is first div element </p>
</div>
<div id = 'secondDiv' class = "collection" >
<p> It is second div element </p>
</div>
<div id = 'thirdDiv' class = "collection" >
<p> It is third div element </p>
</div>
</body>
</html>
test.js
This Protractor test file tests the tag names of the div elements with the class name 'collection' in a web page. It loads the web page, finds all div elements with the class name 'collection' using the 'element.all' method and CSS selector, and then verifies that the tag name of each div element is equal to 'div' using the 'getTagName' method and 'expect' statement.
describe('Testing tag names of elements', function() {
beforeEach(function() {
browser.waitForAngularEnabled(false);
// Load the web page
browser.get('../tests/test.html') ;
});
it('should check the tag names of all div elements', function() {
// Find all div elements with class name 'collection'
let divTags = element.all(by.css('.collection'));
/* For each div element, verify that the tag name is 'div' */
divTags.each(function(element) {
expect(element.getTagName()).toEqual('div');
} );
} );
} );
Output
In conclusion, by testing the name of the tag of an element using Protractor, we can easily catch errors and bugs and check whether the web page is properly constructed and functioning. Through the provided examples, we can understand how Protractor can be used to test the tag names of single and multiple elements, making it an essential tool for web application development and testing.
256 Views
