I want to test if two elements in two different pages are equal. The reason for this is that I need to check a "copy" function that already works in my page, so both elements (divs in this case) have to be indentical:
I found that there's a method in protractor for element objects called "clone" but doesn't explains its purpose that much. Anyway I tried this:
// In the first page:
browser.get("/page1");
var clone1 = element(by.id("firstElem")).clone();
// then navigating to the other page
browser.get("/page2");
var clone2 = element(by.id("secondElem")).clone();
// then the expectation of them to be equal
expect(clone1).toEqual(clone2);
but the expectation fails with a very heavy stacktrace. Also tried comparing:
expect(clone1 == clone2).toBeTruthy();
which fails again.
What is "clone()" supposed to be used for? and,
How do I compare two divs in two separate pages for being identical?
What is "clone()" supposed to be used for?
I've recently created a closely related question, you can follow the updates there:
Cloning element finders
How do I compare two divs in two separate pages for being identical?
Depending on your end goal, you may compare "outer HTML" representations of the elements using getOuterHtml() , example:
browser.get("/page1");
element(by.id("firstElem")).getOuterHtml().then(function(value) {
browser.get("/page2");
expect(element(by.id("secondElem")).getOuterHtml()).toEqual(value);
});
Can you try this:
expect(angular.equals(clone1, clone2).toBe(true));
Read more about angular.equals here: https://docs.angularjs.org/api/ng/function/angular.equals
try without clone
browser.get("/page1");
var clone1 = element(by.id("firstElem"));
browser.get("/page2");
var clone2 = element(by.id("secondElem"));
expect(clone1).toEqual(clone2);
Related
Actually i want to read emails one by one in junk folder of "outlook:live" and mark emails "Not spam".
emails = WebDriverWait(driver, 5).until(EC.element_to_be_clickable((By.XPATH,"//div[#class = 'xoCOIP8PzdTVy0T6q_uG6']")))
This xpath matches 400 instances. I want to make a loop to select one email at a time like select first email, click on the div and perform action and then 2nd email and so on. I'm trying this
emails = WebDriverWait(driver,
5).until(EC.element_to_be_clickable((By.XPATH,"//div[#class =
'xoCOIP8PzdTVy0T6q_uG6']")))
for count in range(0,len(emails)):
(emails)[count+1].click()
Please help me know where im doing wrong. Thanks in advance
It appears that the function you're using to return the clickable elements is only returning a single element, so you'll have to use a different function, make a change in your logic, etc.
For instance, you could use Selenium's find_elements_by_xpath("//div[#class = 'xoCOIP8PzdTVy0T6q_uG6']") which will return a list of WebElement object(s) if the element(s) are found, or an empty list if the element(s) is not found. This will, of course, not take into consideration the possibility of the elements not being completely loaded on the page. In my experience, just slapping a time.sleep(10) after you open the page is "'good enough".
I recommend making sure your elements can be discovered and interacted with first to make sure this isn't all in vain, if you haven't already.
Another option is to add another function, something like a elements_to_be_clickable() function, to the Expected Conditions source code.
From the Expected Condition documentation, I've done some research and it looks like the element_to_be_clickable() function only returns a single element. Moreover, from the source code, said function mainly makes use of the visibility_of_element_located() function. I believe you could follow similar logic to the element_to_be_clickable() function, but instead use the visibility_of_all_elements_located() function, in order to return multiple WebElements (since visibiilty_of_all_elements_located() returns a list of WebElements).
I have an array with a few items in it. Every x seconds, I receive a new array with the latest data. I check if the data has changed, and if it has, I replace the old one with the new one:
if (currentList != responseFromHttpCall) {
currentList = responseFromHttpCall;
}
This messes up the classes provided by ng-animate, as it acts like I replaced all of the items -- well, I do actually, but I don't know how to not.
These changes can occur in the list:
There's one (or more) new item(s) in the list - not necessaryly at the end of the list though.
One (or more) items in the list might be gone (deleted).
One (or more) items might be changed.
Two (or more) items might have been swapped.
Can anyone help me in getting ng-animate to understand what classes to show? I made a small "illustation" of my problem, found here: http://plnkr.co/edit/TS401ra58dgJS18ydsG1?p=preview
Thanks a lot!
To achieve what you want, you will need to modify existing list on controller (vm.list) on every action. I have one solution that may work for your particular example.
you would need to compare 2 lists (loop through first) similar to:
vm.list.forEach((val, index)=>{
// some code to check against array that's coming from ajax call
});
in case of adding you would need to loop against other list (in your case newList):
newList.forEach((val, index)=>{
// some code to check array on controller
});
I'm not saying this is the best solution but it works and will work in your case. Keep in mind - to properly test you will need to click reset after each action since you are looking at same global original list which will persist same data throughout the app cycle since we don't change it - if you want to change it just add before end of each function:
original = angular.copy(vm.list);
You could also make this more generic and put everything on one function, but for example, here's plnkr:
http://plnkr.co/edit/sr5CHji6DbiiknlgFdNm?p=preview
Hope it helps.
It seems that angular.copy() is not properly working on one of the items that I am using it on. Here's the sample code and the screenshot that follows.
console.log("Copy");
$scope.traffic_data = traffic_data;
$scope.total_data = total_data;
console.log($scope.traffic_data);
console.log($scope.total_data);
console.log("Original");
$rootScope.original_traffic_data = angular.copy($scope.traffic_data);
$rootScope.original_total_data = angular.copy($scope.total_data);
console.log($rootScope.original_traffic_data);
console.log($rootScope.original_total_data);
console.log("Variable data");
console.log(total_data);
console.log("=============");
The problem I am facing is that the
$rootscope.original_total_data
is not copying the contents of the
$scope.total_data
as seen on the screenshot. I have highlighted the different console logs to differentiate them from one another.
The line
console.log($rootScope.original_total_data);
shows no contents even though I have used angular.copy on that variable.
What am I missing here? Please help. Thanks.
Also $rootScope is already declared in the controller and it is working for the
$rootScope.original_traffic_data
so why is it not working for
$rootScope.original_total_data?
Thanks.
total_data is an array, whereas traffic_data is an object.
angular.copy() distinguishes between arrays and objects. For objects it will copy all the keys (properties). For arrays, it will only copy the array elements and not any custom properties attached to it - see source code.
If you want to set properties on total_data, you should make it into an object instead. It does not appear to have any indexed values, so this should not be a problem, and it probably should have been an object in the first place.
I'm using angular-ui-grid 3.0.5 with the treeview extension to display a tree. The data loads normally, everything works as expected, except that expandRow fails silently.
My use case is this: suppose we have a path like a > b > c and I need c shown to the user as preselected. I know the selection is correctly done because when I manually expand the parent rows, the child row is indeed selected.
Should I call expandAllRows, all rows would be expanded. However, calling expandRow with references on rows a and b taken from gridOptions.data leads to nothing happening: all rows will remain collapsed.
Is there any precaution to be taken that I have maybe overlooked, or is this a bug?
There's one mention in a closed issue that may be related to this but problem I'm having, but I'm not even sure it's related, given how dry the comment/solution was.
There's no example of using expandRow in the documentation but it's in both the API and the source code.
The gridRow objects mentioned in the documentation http://ui-grid.info/docs/#/api/ui.grid.treeBase.api:PublicApi are not the elements you put into the data array (though this seems to be not explained anywhere).
What the function expects is an object that the grid creates when building the tree, you can access them by looping through the grids treeBase.tree array. This will only be valid when the grid has built the tree, it seems, so it is not directly available when filling in the data, that's why registering a DataChangeCallback helps here https://github.com/angular-ui/ui-grid/issues/3051
// expand the top-level rows
// https://github.com/angular-ui/ui-grid/issues/3051
ctrl.gridApi.grid.registerDataChangeCallback(function() {
if (ctrl.gridApi.grid.treeBase.tree instanceof Array) {
angular.forEach(ctrl.gridApi.grid.treeBase.tree, function(node) {
if (node.row.treeLevel == 0) {
ctrl.gridApi.treeBase.expandRow(node.row);
}
});
}
});
self.onContentReady = function (e) {
e.component.expandRow(e.component.getKeyByRowIndex(0));
e.component.expandRow(e.component.getKeyByRowIndex(1));
};
selec which row you wanna expand
Usually in protractor you can select singular element with:
element(protractor.By.css('#fdfdf'));
Occasionally you get something like this:
element(protractor.By.css('.dfdf'));
which potentially has more than one element. What's the correct way to select an index from a locator that locates multiple elements, and still contain the protractor's methods for sending Keys?
You can get an indexed element from an array returned with
// Get the 5th element matching the .dfdf css selector
element.all(by.css('.dfdf')).get(4).sendKeys('foo');
If you want to get the first element then
element.all(by.css('.dfdf')).first();
element.all(by.css('.dfdf')).get(0);
Try this one. It will work:
element.all(by.css('.dfdf')).get(4).getText();
I don't know why xpath is so much underestimated but you can solve thousands of problems with it, including this one
let elem = element(by.xpath('(//div//a)[3]'))
You can specify the number of element to use. Keep in mind the numbers start from 1, not 0 as usually in js