How do I locate elements in protractor that are in other views and are not visible when viewing page source

问题

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.....

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/33811895/how-do-i-locate-elements-in-protractor-that-are-in-other-views-and-are-not-visib

标签

css

angularjs

protractor

ng-view