I have a non-angular app where I click a link and a new popup modal appears. I then can select to upload a picture or video. I tell protractor and/or webdriver to click on the upload photos button.
If I use:
var addPhotos = element(by.css('#px-select-photo')).click();
I can visually see the button being pressed down however the test is then failed and the error not clickable at...(215, 251)
So then I thought I could trick it into clicking x y position (which I'm assuming those two numbers in the error are) and I get nothing
Code I used for that is:
browser.actions().mouseMove({
x: 702,
y: 621
}).click().perform();
It clicks, but not on the button.
Lastly I tried this:
var addPhotos = element(by.css('#px-select-photo'));
browser.executeScript('arguments[0].scrollIntoView()', addPhotos.getWebElement());
browser.actions().mouseMove(addPhotos).click().perform();
Which also yields no results.
Also, I am receiving this warning:
WARNING - more than one element found for locator By.cssSelector("#px-select-photo") - the first result will be used
However, there is only one element in the html file, don't know what thats all about either.
Please try below code:-
browser.executeScript('arguments[0].click()', addPhotos.getWebElement());
browser.actions().mouseMove(addPhotos).click().perform();
The warning might be the key to solving the problem.
Make your selector more specific and wait for the upload button to become clickable:
var EC = protractor.ExpectedConditions;
var addPhotos = element(by.css('#pxupload3 input#px-select-photo'));
browser.wait(EC.elementToBeClickable(addPhotos), 5000);
addPhotos.click();
Alternative option would be to get all elements by px-select-photo id and filter visible:
var addPhotos = element.all(by.css("#px-select-photo")).filter(function (addButton) {
return addButton.isDisplayed();
}).first();
addPhotos.click();
Related
I have a strange problem with Here maps (JS).
After catching a click event on another element in the page (ex: custom bubble or search field) the map starts to flick like in the gif below
Example : https://i.imgur.com/kKrtwMj.gif
Any idea?
Thanks
I found a temporary solution.
It consist of re-instantiate the H.mapevents.MapEvents object and the H.mapevents.Behavior at the time the bug occurs.
mapEvents.dispose();
mapEvents = new H.mapevents.MapEvents(map);
behavior = new H.mapevents.Behavior(mapEvents, { kinetics: { duration: 3, power: 1 } });
Passing text through
sendKeys("dublin,south Africa");
It is unable to select the first element in autocomplete.
issue resolved.
this.checkin = function(text,index){
element( by.css('[ng-click="showMapTextBox2()"]') ).click();
// element(by.model("location")).sendKeys(text);
browser.actions()
.mouseMove(element(by.model("location"))
.sendKeys(text))
.perform().then(function(){
browser.sleep(500);
// press the down arrow for the autocomplete item we want to choose
for(i = 0; i < index ; i++){
browser.actions().sendKeys(protractor.Key.ARROW_DOWN).perform();
}
browser.sleep(500);
browser.actions().sendKeys(protractor.Key.ENTER).perform();
});
browser.sleep(3000);
};
spec_test code:
post_text.checkin("new Delhi, India",1);
Manually type what you want the test to perform and inspect the element of the autocomplete. You'll use protractor.ExpectedConditions to wait for that element then click on it after you send keys.
You need to do 2 things:
Enter text. Sometimes it is needed to press Tab to force the autocomplete to display options
Select appropriate drop down option
Example code in C#:
fieldElement.ClearAndSendKeys(partialValue);
fieldElement.SendKeys(Keys.Tab);
GetFieldDropdown(completeValue).Click();
GetFielDropdown() method details depending on your DOM. Here is a simplified example from a project I'm working on:
private IWebElement GetFieldDropdown(string dropdownValue)
{
return FindElement(By.XPath($"//span[contains(.,'{dropdownValue}')]"));
}
Note that if there is a delay in autocomplete being displayed above code won't work unchanged (The FindElement will not return an element). You'll need to wait for the dropdown option to be displayed before clicking on it.
PS - partialValue and completeValue can be the same
I have tabs with forms and I want ask the user to confirm or discard their changes when changing tabs. My current code works
<uib-tab heading="..." index="3" deselect="main.onDeselect($event)" ... >
this.onDeselect = function($event) {
if(...isDirty...) {
if($window.confirm("Do you want to discard?")) {
... discard (and go to new tab) ...
} else {
$event.preventDefault(); //stays on current tab
}
}
}
The problem is I want to change confirm to javascript dialog and I will get result in callback.
I planed to preventDefault() all and then switch manually, but I cannot figure out where to get new tab id.
Any solution is appreciated. Even if it is easier in other tab implementations.
I use AngularJS v1.4.7, ui-bootstrap-tpls-1.3.3.min.js
You can make use of $selectedIndex and the active property for that purpose. See this Plunk
One thing to be noted here is that when we manually change the active property, it again fires the deselect event which needed to be handled. Otherwise it seems to do what you wanted.
Edit
Indeed as noted in the comments, the deselect carries the HTML index rather than what is passed in in the tab index property. A workaround could be in this: Another Plunk. Here I'm pulling the actual index from the HTML index.
And a little research indicates that this issue might as well be fixed already with 3.0 bootstrap tpl See this.
I spent some time with different approaches and this one is stable for some time. What I do is to prevent deselect at the beginning and set the new tab in callback if confirmed to loose changes...
this.onDeselect = function($event, $selectedIndex) {
var me = this;
if(this.tabs.eventDirty || this.tabs.locationDirty || this.tabs.contractDirty) {
$event.preventDefault();
var alert = $mdDialog.confirm({
title: 'Upozornění',
textContent: 'Na záložce jsou neuložené změny. Přejete si tyto změny zrušit a přejít na novou záložku?',
ok: 'Přijít o změny',
cancel: 'Zůstat na záložce'
});
$mdDialog
.show( alert )
.then(function() {
$rootScope.$emit("discardChanges");
me.tabs.activeTab = $selectedIndex;
})
}
};
i have a table where i can turn pages, you can choose a color for a user and that color is shown in the circle, but when i turn one page, the color is gone!
I read about dom manipluation in directives, but that still didnt solve my problem:
the tutorials mostly show one with a click funktion, and i dont to click the circle
they also werent "permanent"
maybe i did something wrong? please can someone help or give me a hint?
i made also a plnkr :
Here's the link!
You need to save chosen color to currect user object. Maybe like this:
$scope.showColorPicker = function(user) {
data = $scope.colors;
dlg = $dialogs.create('/dialogs/pickColor.html','pickColorCtrl',$scope.colors,{},{key:false ,back:'static'});
dlg.result.then(function(data) {
var colnr = data;
var user_circle = angular.element(document.getElementById('color_' + user.id));
user_circle.context.style.backgroundColor = $scope.colors[colnr-1].color;
user.color = $scope.colors[colnr-1];
});
};
HTML for color circle:
<span class="smallcircle" ng-bind="color_{{user.id}}" id="color_{{user.id}}" name="color_{{user.id}}" style="background-color: {{user.color.color || 'lightgray'}};"></span>
Make sure you pass user object to showColorPicker function:
Change Color
Demo: http://plnkr.co/edit/em0ZUHjbXUNa7MYgpC5f?p=info
How can I set a different position for Ext.Msg.show in senchatouch. I have tried using the methods
msg.getDialog().getPositionEl().setTop(50);
&
msg.getDialog().setPosition(undefined,50)
However I am getting a error Object [object Object] has no method 'getPositionEl' or Object [object Object] has no method 'getDialog'.
I have even checked these methods in my MessageBox.js file in sencha but they do not exist.
However almost solution on the net seems to recommend these methods.Experts could you kindly advise.
You can place messagebox to certain position by specifying left and top config options.
launch: function() {
var msg = Ext.Msg.show({
title:'Some title',
message:'Sample message container.',
left:50, // mention initial positioning with left and top config.
top:50,
buttons:[{ //create as many buttons you want.
text:'Ok',
ui:'action',
handler:function(btn){
if(msg.getTop() == 200) // Just for demo. Click Ok and place msg box to some other position. If clicked again, hide message box
msg.hide();
else{
msg.setTop(200);
msg.setLeft(200);
}
}
}]
});
}
Other than config options, you can align message box with setTop() and setLeft() methods as well.
See Demo. As you can see, message box is not placed at center as it's default position is center but instead it is placed with top and left set to 50.