Testing AngularJS app with Protractor- how to get HTML elements without using IDs?

Question

I was recently tasked with implementing some automated testing for an AngularJS application developed by my company. After doing some research into the different testing frameworks available, I decided to use Protractor as it seems to provide all of the functionality that we will need, and appears to be well documented & maintained.

When I started designing & writing the tests, I noticed that most of the HTML elements in the code had not been given ID attributes- so I started assigning ID attributes to the various elements that would be used in the tests, so that I could access them using functions such as element(by.id('abc')); to assign them to variables for use within the test scripts.

However, I have just been informed that not giving the HTML elements ID attributes was a deliberate design choice in order to make the source code easier to compress for distribution to our customers. So this means that I now need to re-write my tests so that they no longer use ID attributes to get hold of the elements, but I'm not sure quite how to do this...

When I inspect those menu item in the browser, it shows the following HTML structure:

<ul id="nav" class="nav" data-slim-scroll ... >
    <li data-ng-mouseenter="setMenuTop($event)" ...
        <a href="#/pages" id="pagesMenuBtn" ... >
            ...
        <a href="#/alarms" id="alarmsMenuBtn" ... >
            ...
        ...
    </li>
    ...
</ul>

The goal is to be able to remove the id attributes from the tags above, but still be able to access those HTML elements to run tests on them.

For example, where I previously had:

describe('myApp', function() {
    var alarmsMenuBtn = element(by.id('alarmsMenuBtn'));
    var chartsMenuBtn = element(by.id('chartsMenuBtn'));
    ...
    it('should navigate to the Charts page', function(){
        browser.waitForAngularEnabled(false);
        browser.actions().mouseMove(chartsMenuBtn).perform();
        chartsMenuBtn.click();
        browser.waitForAngularEnabled(true);
        browser.call(closeDlg).then(function(){
            expect(browser.getCurrentUrl()).toBe('chartsURL');
    });

I now have:

describe('myApp', function() {
    var menuItems = $(".slimScrollDiv").$(".nav").$$("li");
    var alarmsMenuBtn = menuItems.get(1).$("a");
    var chartsMenuBtn = menuItems.get(2).$("a");

But when I run this with the same tests, my tests now fail, giving me messages such as:

Failures: 1) App should navigate to the Alarms page Message: Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL. Stack: Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL. at ontimeout (timers.js:386:11) at tryOnTimeout (timers.js:250:5) at Timer.listOnTimeout (timers.js:214:5) Message: Failed: element not visible (Session info: chrome=61.0.3163.100) (Driver info: chromedriver=2.33.506120 (e3e53437346286c0bc2d2dc9aa4915ba81d9023f),platform=Windows NT 10.0.15063 x86_64) Stack: ...

and:

2) App should navigate to the Charts page Message: Failed: element not visible (Session info: chrome=61.0.3163.100) (Driver info: chromedriver=2.33.506120 (e3e53437346286c0bc2d2dc9aa4915ba81d9023f),platform=Windows NT 10.0.15063 x86_64)

The HTML for these elements is:

<li><a href="#/alarms" id="alarmsMenuBtn" target="_self"><i class="ti-alert"></i><span data-i18n="Alarms"></span></a></li>
<li><a href="#/charts" id="chartsMenuBtn" target="_self"><i class="ti-bar-chart"></i><span data-i18n="Charts"></span></a></li>

So my question is, how can I access these (or any other) HTML elements using something other than ID attributes to get them?

Answer 1

The Protractor API documentation provides a full list of locators you may use in addition to ID to locate DOM elements. The documentation also provides sample code to demonstrate how each locator can be implemented in practice.

Here is the full list as of Protractor version 5.2.0:

ProtractorBy

The Protractor Locators. These provide ways of finding elements in Angular applications by binding, model, etc.

addLocator - Add a locator to this instance of ProtractorBy.

binding - Find an element by text binding.

exactBinding - Find an element by exact binding.

model - Find an element by ng-model expression.

buttonText - Find a button by text.

partialButtonText - Find a button by partial text.

repeater - Find elements inside an ng-repeat.

exactRepeater - Find an element by exact repeater.

cssContainingText - Find elements by CSS which contain a certain string.

options - Find an element by ng-options expression.

deepCss - Find an element by css selector within the Shadow DOM.

Extends webdriver.By

className - Locates elements that have a specific class name.

css - Locates elements using a CSS selector.

id - Locates an element by its ID.

linkText - Locates link elements whose visible text matches the given string.

js - Locates an elements by evaluating a JavaScript expression, which may be either a function or a string.

name - Locates elements whose name attribute has the given value.

partialLinkText - Locates link elements whose visible text contains the given substring.

tagName - Locates elements with a given tag name.

xpath - Locates elements matching a XPath selector.

Answer 2

following by id is bad idea.. please use data-test-hooks... and you already have documentation about protractor. http://www.protractortest.org/#/api