Protractor - How to find an element inside an element when sub element is also a main element somewhere else in a page

Question

<div class="base-view app-loaded" data-ng-class="cssClass.appState">
<div class="ng-scope" data-ng-view="">
<div class="ng-scope" data-ng-include="'partial/navigation/navigation.tpl.html'">
<div class="feedback-ball feedback-ball-show feedback-ball-big" data-ng-class="feedback.cls" data-ng-click="outside($event)" data-feedback-ball="">
<span class="close-button"></span>
<h2 class="ng-binding">Welcome to Garbo</h2>
<div class="ng-scope ng-binding" data-ng-bind-html="feedback.html" data-ng-if="feedback.html">
<p>Here you can play in style in a safe and secure environment.</p>
<p>
<a class="btn" href="/account">My Account</a>
<a class="btn" href="/deposit">Deposit</a>
</p>
</div>
</div>
</div>

I want to find and click /account button inside data-ng-bind-html="feedback.html", I can find data-ng-bind-html="feedback.html" but I could not find account button inside it. when I try to find account button, it gives me error that page has multiple account button so be more specific.

I tried element.().element() but it didnt work, please help

Answer 1

The problem is that webDriver is finding more than one element that matches. You have element for finding just one, and element.all for taking an array of elements, then you can use .get() and the index of the element, or first() or last(). You can do,

element(by.css('[data-ng-bind-html="feedback.html"]')
.element(by.cssContainingText('.btn', 'My account'));

If it doesn't work then you might have more than one, if so, you can use,

element(by.css('[data-ng-bind-html="feedback.html"]')
.all(by.cssContainingText('.btn', 'My account')).first();

But there you will have more than one button in your HTML, webDriver will get only one, another thing, is to use the count() that gives you the length of the array of elements, and you can know how much you have.

Answer 2

element calls can be chained to find elements inside other elements, so your element().element() solution should work.

Alternatively, you can construct an xpath expression to reach the link inside the appropriate div:

element(by.xpath('//div[@data-ng-bind-html = "feedback.html"]//a[@href = "/account"]'))