Need to select Shweta and click on that, how can I achieve that using repeat locator in protractor? I've tried some possible solutions, but it's not working. Could anybody please tell me how to achieve that.
You can achieve it by using element.all() with by.repeater() combination as shown below and index could be either 0,1,2,.. its depends on the number of elements you could get with ng-repeat='project in projects' locator.
Code
element.all(by.repeater('project in projects'))
.get(index)
.element(by.css("h2"))
.click();
You can locate all the elements in a repeater using the by.repeater() locator and filter the one having the "Shweta" title:
var repeater = element.all(by.repeater('project in projects'));
var project = repeater.filter(function (elm) {
return elm.$(".panel-body a h2").getText().then(function (title) {
return title.trim() === "Shweta";
});
});
project.$(".panel-body a").click();
Related
I would like to click and double-click select features at the same time in openlayers 3. The condition option when creating ol.interaction.Select takes only one function, so a workaround is necessary
I tried writing my own custom condition function that calls the appropriate function, I was thinking of something like...
this.selectType = (feature) => {
if (feature){
if(feature.onclick){
return ol.events.condition.singleClick
} else {
return ol.events.condition.doubleClick
}
}
}
this.selectInteraction = new ol.interaction.Select({
condition: this.selectType(),
toggleCondition: ol.events.condition.shiftKeyOnly,
layers: this.layerFilter,
features: this.features,
style: this.selectStyle,
});
...but without success.
I realize, I could create two separate interactions for selecting features, but would rather not because that would involve replicating a lot of code depending on the Select interaction.
Does anyone know if this is even possible in openlayers and how to handle a situation like this?
Thanx a lot
The condition is a function which takes a map browser event and returns a boolean. Based on Alt+Cick in the OpenLayers example https://openlayers.org/en/v4.6.5/examples/select-features.html to select on either single or double click you will need something like
this.selectType = (mapBrowserEvent) => {
return ol.events.condition.singleClick(mapBrowserEvent) ||
ol.events.condition.doubleClick(mapBrowserEvent);
}
this.selectInteraction = new ol.interaction.Select({
condition: this.selectType, // pass the function, don't call it!
toggleCondition: ol.events.condition.shiftKeyOnly,
layers: this.layerFilter,
features: this.features,
style: this.selectStyle,
});
In my e2e testing using protractor,I am taking data from a file and checking whether that data is present in the UI. If present,then click it.
There are about 10 chapters in the page and my file has 2 chapters(indicated as chapterName).I want to check whether the chapterNames in my file are there in the UI and if so,then click one by one.I am working with the below code,but dont know how to do the looping
How to do that in protractor?
element.all(by.repeater('chapter in chapters')).filter(function (ele,index) {
return ele.getText().then(function(text){
return text === chapterName;
});
}).click();
You need to use closure function to achieve looping inside a promise. look at the below example code.
function clickChapterByName(){
var chapterNames= ['chapter-1','chapter-2','chapter-3','chapter-4','chapter-5']
for(i=0;i<chapterNames.length;i++){
function closure(chapterName) {
element.all(by.repeater('chapter in chapters')).filter(function (ele,index) {
return ele.getText().then(function(text){
return text === chapterName;
});
}).click();
}
closure(chapterNames[i])
}
}
Not quite sure that i am correct, but i think you are almost there:
element.all(by.repeater('chapter in chapters')).filter(element=> {
return ele.getText().then(text=> text === chapterName);
});
}).map(element=> element.click());
Result of .filter will be only elements that match condition, so you will get new ArrayElementFinder, and you can iterate thru it with .map()
For your requirement, you need to do loop operation.So you can achieve this by each() method which is available in protractor api.
Code Snippet:
element.all(by.repeater('chapter in chapters')).
each(function (ele, index) {//for looping purpose
ele.getText().then(function(text){
if(text == inputChapterName){
ele.click();//click chapter is
}
});
})
I have a question regarding how protractor handles the locating of elements.
I am using page-objects just like I did in Webdriver.
The big difference with Webdriver is that locating the element only happens when a function is called on that element.
When using page-objects, it is advised to instantiate your objects before your tests. But then I was wondering, if you instantiate your object and the page changes, what happens to the state of the elements?
I shall demonstrate with an example
it('Change service', function() {
servicePage.clickChangeService();
serviceForm.selectService(1);
serviceForm.save();
expect(servicePage.getService()).toMatch('\bNo service\b');
});
When debugging servicePage.getService() returns undefined.
Is this because serviceForm is another page and the state of servicePage has been changed?
This is my pageobject:
var servicePage = function() {
this.changeServiceLink = element(by.id('serviceLink'));
this.service = element(by.id('service'));
this.clickChangeService = function() {
this.changeServiceLink.click();
};
this.getService = function() {
return this.service.getAttribute('value');
};
};
module.exports = servicePage;
Thank you in advance.
Regards
Essentially, element() is an 'elementFinder' which doesn't do any work unless you call some action like getAttribute().
So you can think of element(by.id('service')) as a placeholder.
When you want to actually find the element and do some action, then you combine it like element(by.id('service')).getAttribute('value'), but this in itself isn't the value that you are looking for, it's a promise to get the value. You can read all about how to deal with promises elsewhere.
The other thing that protractor does specifically is to patch in a waitForAngular() when it applies an action so that it will wait for any outstanding http calls and timeouts before actually going out to find the element and apply the action. So when you call .getAttribute() it really looks like
return browser.waitForAngular().then(function() {
return element(by.id('service')).getAttribute('value');
});
So, in your example, if your angular pages aren't set up correctly or depending on the controls you are using, you might be trying to get the value before the page has settled with the new value in the element.
To debug your example you should be doing something like
it('Change service', function() {
servicePage.getService().then(function(originalService) {
console.log('originalService: ' + originalService);
});
servicePage.clickChangeService();
serviceForm.selectService(1);
serviceForm.save();
servicePage.getService().then(function(newService) {
console.log('newService: ' + newService);
});
expect(servicePage.getService()).toMatch('\bNo service\b');
});
The other thing that I'm seeing is that your pageObject appears to be a constructor when you could just use an object instead:
// name this file servicePage.js, and use as 'var servicePage = require('./servicePage.js');'
module.exports = {
changeServiceLink: element(by.id('serviceLink')),
service: element(by.id('service')),
clickChangeService: function() {
this.changeServiceLink.click();
},
getService: function() {
return this.service.getAttribute('value');
}
};
Otherwise you would have to do something like module.exports = new servicePage(); or instantiate it in your test file.
When you navigate another page, the web elements will be clear, that you selected. So you have to select again. You can select all elements that is in a page of HTML. You can click that you see. So the protactor + Selenium can decide what is displayed.
You have a mistake in your code, try this:
expect(servicePage.getService()).toMatch('\bNo service\b');
Hi I have been doing protractor test and I'm having a problem with my tests. My ionic app do have a drop down having a model name and I tried to access it using the model name and it works but the problem is it can not select the exact option that i need to select from that dropdown option. It selects only the first one? I wrote the protractor syntax like this.
element(by.model('generalPowerOfAttorney.grantorGeneralPowerOfAttorneyForm.region')).$('[value="59"]').click();
But this code selects not the value 59 rather value 0 which is the default option. Is there anyone who could help me?
You should add the html source to facilitate the answer.
You can use the filter method in order to get the correct element clicked.
var elements = element.all(by.model('generalPowerOfAttorney.grantorGeneralPowerOfAttorneyForm.region'));
elements.filter(function(elem, index) {
return elem.getText().then(function(text) {
return text === 'value="59"';
});
}).then(function(filteredElem){
if(filteredElem[0] !== undefined){
filteredElem[0].click();
}
else {
throw 'element not found'
}
});
I'm making a mobile-app using Phonegap and HTML. Now I'm using the google maps/places autocomplete feature. The problem is: if I run it in my browser on my computer everything works fine and I choose a suggestion to use out of the autocomplete list - if I deploy it on my mobile I still get suggestions but I'm not able to tap one. It seems the "suggestion-overlay" is just ignored and I can tap on the page. Is there a possibility to put focus on the list of suggestions or something that way ?
Hope someone can help me. Thanks in advance.
There is indeed a conflict with FastClick and PAC. I found that I needed to add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
There is currently a pull request on github, but this hasn't been merged yet.
However, you can simply use this patched version of fastclick.
The patch adds the excludeNode option which let's you exclude DOM nodes handled by fastclick via regex. This is how I used it to make google autocomplete work with fastclick:
FastClick.attach(document.body, {
excludeNode: '^pac-'
});
This reply may be too late. But might be helpful for others.
I had the same issue and after debugging for hours, I found out this issue was because of adding "FastClick" library. After removing this, it worked as usual.
So for having fastClick and google suggestions, I have added this code in geo autocomplete
jQuery.fn.addGeoComplete = function(e){
var input = this;
$(input).attr("autocomplete" , "off");
var id = input.attr("id");
$(input).on("keypress", function(e){
var input = this;
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.2555, -121.9245),
new google.maps.LatLng(37.2555, -121.9245));
var options = {
bounds: defaultBounds,
mapkey: "xxx"
};
//Fix for fastclick issue
var g_autocomplete = $("body > .pac-container").filter(":visible");
g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function(event) {
$(".pac-item", this).addClass("needsclick");
});
//End of fix
autocomplete = new google.maps.places.Autocomplete(document.getElementById(id), options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
//Handle place selection
});
});
}
if you are using Framework 7, it has a custom implementation of FastClicks. Instead of the needsclick class, F7 has no-fastclick. The function below is how it is implemented in F7:
function targetNeedsFastClick(el) {
var $el = $(el);
if (el.nodeName.toLowerCase() === 'input' && el.type === 'file') return false;
if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) return false;
return true;
}
So as suggested in other comments, you will only have to add the .no-fastclick class to .pac-item and in all its children
I was having the same problem,
I realized what the problem was that probably the focusout event of pac-container happens before the tap event of the pac-item (only in phonegap built-in browser).
The only way I could solve this, is to add padding-bottom to the input when it is focused and change the top attribute of the pac-container, so that the pac-container resides within the borders of the input.
Therefore when user clicks on item in list the focusout event is not fired.
It's dirty, but it works
worked perfectly for me :
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Configuration: Cordova / iOS iphone 5