1

I am new to Angular & Protractor (and web development for that matter), so I apologize of this is an obvious question.

I am trying to test our angular app with protractor, and it appears that I can locate the first element on the page. But cannot find any of the other elements using (id, name, model, css). I have tried chaining off of the first element, but always get the element not found error on the second element in the chain. I've have triple check the spelling so I am confident everything is correct.

Our page is setup up with multiple sections and when I "view source" I only see the root div.

<head>
</head>
<body>

<div ng-app="app" id="wrap">
    <div ui-view></div>
</div>

</body>
</html>

But when I inspect the elements using the developer tools (F12), they exist in the DOM, I just don't know how to get to them.

<input type="text" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" data-ng-model="vm.searchText" id="searchText" placeholder="(Account # / Name / Nickname / Phone #)">

I tried to access the control listed above using the following:

browser.element(by.id("searchText").sendKeys("test");
browser.element(by.model("vm.searchText").sendKeys("test");
element(by.id("searchText").sendKeys("test");
element(by.model("vm.searchText").sendKeys("test");

I also create a single button and used partialButtonText & buttonText, neither of which worked.

I also tried to add some async functionality with "then" but that didn't work either. How do I access these elements are are not contained in a single html file?

thanks.....

Donald Bardinelli
  • 11
  • 2
  • Would be useful to see the actual test and output from Protractor. – Jacek Ciolek Nov 21 '15 at 14:04
  • try this: browser.element(by.id("searchText")).sendKeys("test"); browser.element(by.model("vm.searchText")).sendKeys("test"); element(by.id("searchText")).sendKeys("test"); element(by.model("vm.searchText")).sendKeys("test"); – rajana sekhar Nov 24 '15 at 04:18

3 Answers3

0

If an element is not visible, I believe protractor isnt able to interact with it. It can't click or get text or anything if it is not visible, that is actually checked before it can perform the action.

What you can do is check the element is present to ensure it is somewhere on the html.

var searchText = $('#searchText');
expect(searchText.isPresent()).toBeTruthy('Search Text element not present');

This will find an element with a css selector of id searchText, and then check if it is present(exists on the html).

If you want to interact with it, remember that protractor looks around like a human would. If a human cant click it, neither can protractor! Make sure it is on the page and visible.

user2020347
  • 883
  • 7
  • 17
  • I don't believe it's a visibility issue as the elements I am looking for are on the screen, but do not exist in the "view source" of the current page, as they are broken out in separate html (views) & js(controllers) files. – Donald Bardinelli Nov 23 '15 at 13:39
  • Can you set up a plunkr example of this? As far as I know, any element on the page must exist in source of the page. It can be dynamically added and removed, but at the time it is present on your screen, it MUST be present in the DOM and visible by viewing the source. Even with separate html views and controllers, they get added in the DOM when called and are then visible and workable with protractor. – user2020347 Nov 23 '15 at 16:17
0

Don't have the reputation points to add this in the comments to user2020347's response so...When you say not in "view source" I assume you're talking about dynamically generated content. Instead of using view source either use chrome or firefox developer tools to make sure you're using the right locators.

For example in chrome's console the following should return a result once the page is loaded: $$('#searchText') $$('input[data-ng-model="vm.searchText"]')

It also looks like you're sending keys to the same element.

Since you have an angular app protractor should wait for all elements to load, but just in case you might want to wait for the element to be present and/or visible on the page.

user2157249
  • 31
  • 3
0

Same happened to me, because Protractor executed on the original (first) tab. Try to switch between the tabs before accessing the elements:

browser.getAllWindowHandles().then(function (handles) {
browser.driver.switchTo().window(handles[1]);
});
M András
  • 29
  • 4