I am new to Protractor. Can anyone advise me how to deal with Promises and how to know what methods I can call on an element?
For example, I may access an element like: var element = element(by.css('.fileName'));
That brings back a promise correct? So, when can I act on it and how do I know what I can actually do to?
In ruby for example, I can do element.methods and see all that I can do for this object.
Please advise
Thanks,
JC
I have been working on the new protractor documentation. It should be published to http://protractortest.org soon. In the meantime take a look at this:
http://angular.github.io/protractor/#/api?view=ElementFinder
See the documentation: https://github.com/angular/protractor/blob/master/docs/api.md#elementfinder
The ElementFinder can be treated as a WebElement for most purposes, in particular, you may perform actions (i.e. click, getText) on them as you would a WebElement.
So, beasically, you can call click() (for example) on the element (the promise) as soon as it's returned. This will tell protractor that, once the element has actually been found, it will have to click on it.
Related
I'm editing an existing code that has a lot of angular js expressions which are being detected as unsafe by our automated testing system. I was able to see the article below that describes my case, but I was not able to get any specific way to solve it (I'm mostly seeing $watch and $apply). I guess what I need to know here is where do I make changes on the code?
Related links:
http://blog.angularjs.org/2016/09/angular-16-expression-sandbox-removal.html
https://docs.angularjs.org/guide/security#angularjs-templates-and-expressions
Sample snippets on my code:
Your code looks perfectly fine. I think what you're missing is the "passing user provided content" portion of that warning.
In the first example the only thing you are passing to $apply is a function that YOU have defined, same as the second example. In the last example you don't pass anything to $apply.
The reason they have these warnings is because $apply can be passed a string to evaluate an expression on $scope.
In the same way that
{{$scope.hello = 'Hello, World'}}
will set the hello property of $scope
$scope.$apply('hello = "Hello, World"')
Will do exactly the same. now imagine you pass user defined content to this
$scope.$apply(userPassedString)
Now you have given a user the ability to run arbitrary javascript expressions in your apply function.
To see exactly what I mean by this (and how this is exploitable), I have created a codepen demo for you here: https://codepen.io/codymikol/pen/bGbzbvp
(You'll have to scroll down in the HTML to see the script, I was lazy and din't link it as a separate JS file \_('__')_/
Also if you REALLY want to understand how the above snippet is able to function (and where I learned about getting the function constructor in such a way) you should watch this video by liveoverflow: https://www.youtube.com/watch?v=DkL3jaI1cj0
This was made back when the AngularJS team was trying to create a sandbox around scope expressions to prevent XSS. There are a bunch of videos detailing different exploits people used to get around the sandbox. Because of how complicated creating a sandbox is and how often it was being exploited they decided to remove it entirely and just warn developers about passing user content in such a way.
What is the use of .scope() in AngularJS? I have seen some code examples using this but I am not quite sure what the use is, and I have been unable to find an answer in SO posts and in AngularJS documentation. For example:
var scope = angular.element(document.getElementById("MainWrap")).scope();
Is this somehow similar to use of $digest or $apply?
Here an example of what I use it for every day:
Open Console in dev tools.
Right-click an element in your page that is managed by AngularJS, select inspect element option
Now write in console: angular.element($0).scope()
You just got a scope of said element as that element sees it. You can go up through the parent, manage its content (don't forget to $apply() afterward to test the change, otherwise, it won't bind) or do similar things you can in console with any JS object.
There are more uses for it for sure internally, but this one I find really helpful when debugging. So in relation to $apply() it is and is not linked to it, depending what you use it for.
Is there any built-in method or conventionally correct approach to this? I'm not asking about issuing an update, but rather, requesting one. I could query for it again, but the goal is that the object reference stay the same.
The approach I've taken so far is to define an instance method called "refresh" that gets the same resource instance by ID and then iterates over its properties, copying them over to the original object (how I love thee _.extend). But it seems like something that might already be included functionality in ngResource and I just can't find it. If not, does Angular provide a means to make such a "refresh" method default to all $resources the same way save, delete, etc already are?
So I actually found the answer as I was writing the question, but I'm going to post it and answer anyway in case it might help someone else.
While writing that and looking stuff up, I realized that get is not restricted to being a static method of the resource. What threw me here was that on an instance, it's named $get. And lo, $get does exactly what I wanted. However it does not seem to be documented on Angular's site -- in fact the site says that only non-GET actions are instance methods, so who'd have thought? I mean, aside from that it seems totally obvious now.
I upgraded my App to AngularJS 1.2 and so also switched to ui-sortable v 1.2.
The sorting is implemented for Accordion-Groups (from ui-bootstrap). With the master-tree version of sortable i could listen to ng-mouseover/ng-mouseleave inside the accordion headers but with the 1.2 version, the mouseevents are only listening as long as i haven't done any sorting. After performing any change to the sortorder, the mouseevents become deaf...
Here's a Plunker: http://plnkr.co/edit/n8yms9pb7uJp77zZ9LFK?p=preview
Can anybody give me some advice how to fix that?
Thank you
Identity Problem.
elementInsertedByDropping !== elementSelectedAndDragged
In the console, one can verify the assertion above. So that narrows down the category of problem to a relatively familiar one.
I'm learning Angular myself, and I'm also having trouble with ui-sortable; please don't regard my opinions as definitive. However, I believe that the problem is that the $watch listeners need to be re-bound to the new element, as it is being created asynchronously outside of Angular.
The "ng.$rootScope.Scope" documentation describes this situation somewhat clearly in the $apply section. If I am correct, you would need to either $scope.$apply(...) code in your controller, or [preferably] write a custom directive that handles the insertion.
Fortunately, it seems that jQuery-ui-sortable's "update" event can be easily used in a custom directive to ensure that the element is bound. I found that bloggers respectTheCode and Michal Ostruszka discuss the problem of writing jQuery-ui-sortable directives in fairly clear terms; so does a fellow named Greg Gigon and several others, but I'm only allowed to offer you two links at this point.
If I can provide more precise information at a later point, I will revise this answer; I'm still learning this stuff myself, and I would like to know how to do something quite similar.
[edit: I'm not familiar enough with Angular-UI-Sortable to know whether this is a bug or simply missing functionality.]
Looks like a bug in ui-sortable.
My guess: It seems to be losing the bindings from the event directives, probably because it's destroying the old DOM elements and creating a new ones without re-attaching the scope with $compile. I'd save this plunk and submit and issue on their GitHub repository
I have an app that uses a mixture of angular and asp.net. My issue is that the home page is redirected by setting window.location and then the required data and page is requested form the server.
Previously this was not the case and all routing was done via the angular app. However due to requirements the applications routing had to be changed to what it is now.
Now because the application requires a server side request/response (I believe) this is causing a race condition in my tests as I only receive the expected result once in every 5 tests.
At present I am not able to provide code to explain my situation. However, I will be albe to provide some code in a edit later today.
The only code I can provide for now would be the test that is being run. Although I do not believe this would help without the code running the application.
Recent frameworks have this feature where it sets the document.readState of browser to complete and the content is loaded afterwards. Due to this the test may fails as we will be expecting an element to be present.
For such conditions you have to use explicit wait for the element to be present for which you want to take an action after the page is loaded or changed.
Here is an example how we wait for elements in our project (The application is also angularjs, we use Java for webdriver):
In our Webdriver implementation we added:
private WebDriverWait iWait(int timeoutInSeconds) {
return new WebDriverWait(webDriver, timeoutInSeconds);
}
we want to wait for an element to be visible ("Visibility means that the element is not only displayed but also has a height and width that is greater than 0"):
public void waitForElementToAppear(By by, int timeoutInSeconds) {
iWait(timeoutInSeconds).ignoring(StaleElementReferenceException.class).until(ExpectedConditions.visibilityOfElementLocated(by));
}
the ExpectedConditions class provides many other out of the box condition, here are some:
elementToBeClickable
textToBePresentInElement
titleContains
elementSelectionStateToBe
for more, please look at the ExpectedConditions Javadoc
if you need to create your own conditions, you can use ExoectedCondition (no 's') class
ExpectedCondition Javadoc