Protractor is an end-to-end test framework developed for Angular and AngularJS applications. It runs tests against the application interacting with it as a real user would, running in a real browser. In this article, we are going to test the id of an element.
Pre-requisite: Installation and Setup of Protractor
Approach:
- We are going to create a basic test program in which we are going to test the id of an element.
- All the Protractor tests will have a file that will contain the configuration and this will be the initial file that will initiate the test.
- Let’s create this file with the name conf.js.
conf.js:
Javascript
exports.config = {   Â// 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: ['test.js'],   Â// Options to be passed to Jasmine   ÂjasmineNodeOpts: {       ÂdefaultTimeoutInterval: 30000   Â},   Â// Url for the file   ÂonPrepare:function() {   Â}};- Now let’s create our HTML file called test.html which will contain the element to be tested.
HTML
<!DOCTYPE html><htmllang="en">ÂÂ<head>   Â<metacharset="UTF-8">   Â<metaname="viewport"content=   Â"width=device-width, initial-scale=1.0">   Â<title>Testing</title></head>ÂÂ<body>   Â<!-- The element to be tested -->   Â<sectionclass="sample-element"       Âid="neveropen">       ÂInner text   Â</section></body>ÂÂ</html>
- Now let’s create our test file test.js. In this file, we are going to access an HTML file and test the id of an element.
- Browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get.
- The describe and it syntax is from the Jasmine framework where describe is a description of your test while it is the steps for the test.
The spec file named test.js:
Javascript
describe('Protractor Demo App',function() {   Âit('should have a id',function() {       Â// Disabling waiting for angular       Âbrowser.waitForAngularEnabled(false)       Â// Get our html file for testing       Âbrowser.get('test.html');       Â// Test if the element with class       Â// 'sample-element' has the id       Â// 'neveropen'       Âlet sampleDiv = element(           Âby.className('sample-element'));       Âexpect(sampleDiv.getAttribute('id'))           Â.toEqual('neveropen');   Â});});- Finally, we are ready to run our file using the command given below:
protractor conf.js
- This will run the configuration file and the test will be run as shown in the screenshot below:
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now! - Now let’s create our HTML file called test.html which will contain the element to be tested.
