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'
}
});
Related
I've to select a country from dropdown of https://www.parcelhero.com but when I use the below code for it, sometimes it works sometimes not, giving error of Element not found(xpath("//*[#id='dvQuoteFrom']/div/button"))
driver.findElement(By.xpath("//*[#id='dvQuoteFrom']/div/button")).click();
Thread.sleep(4000);
WebElement txt = driver.findElement(By.xpath("html/body/div[14]/div/div/input"));
txt.sendKeys("Great Britain");
List <WebElement> InnerDropdown1 =driver.findElements(By.xpath("//*[#class='active']"));
for(WebElement option1 : InnerDropdown1)
{ System.out.println(option1.getText());
if(option1.getText().contains("Great Britain")) {
option1.click();
break;
}
}
When I used
WebElement txt = driver.findElement(By.className("bs-searchbox")); then also I got the uable to find element error.
Please help me to select a country of my choice from the country dropdown?
Try doing this. I've changed a few of your locators and tested this on the page you mentioned.
public void foo() {
driver.get("https://www.parcelhero.com/");
//This will be your dropdown button. This needs to be clicked first.
driver.findElement(By.xpath("//button[contains(#data-id,'ConsignorAddressCountryId')]")).click();
//These are your input boxes. I found 3 input boxes on the same page having the same identifiers. We dont want to rely on using index based xpath so here we'll get all instances of input boxes.
List<WebElement> elems = driver.findElements(By.xpath("//*[contains(#class,'bs-searchbox')]//input"));
for (WebElement elem : elems) {
//Here we check if the input box is visible. If I'm not mistaken, there will only be 1 visible input box at a time because you have to click on the dropdown button first.
if (elem.isDisplayed()) {
//If visible, just enter your country of choice
elem.sendKeys("American Samoa");
//Assuming you always enter exact match string for your test, you can use the org.openqa.selenium.Keys for sendKeys()
elem.sendKeys(Keys.ENTER);
break;
}
}
}
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();
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 am using aloglia autocomplete.js and followed the tutorial.
I want to use autocomplete text box with others select2 selectbox.
var client = algoliasearch('YourApplicationID','YourSearchOnlyAPIKey')
var index = client.initIndex('YourIndex');
autocomplete('#search-input', { hint: false }, [
{
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
displayKey: 'my_attribute',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.my_attribute.value;
}
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
console.log(suggestion, dataset);
$("#search-input").val(suggestion.full_name.name)
});
Problem is when I clicked anywhere beside that autocomplete box autocomplete disappear and it showed only what I typed before.
I don't want it to disappear. How can I implement it? Thanks for helping.
Please see the example below for detail problem.
Assume you have a simple form with one auto complete input field,two select2 boxes and one submit button. After you choose auto complete filed, when you click anywhere, it changed to default text. I mean, you put "piz" and it shows "pizza". Therefore you select pizza and it display "pizza".Then, you try to choose one select2 box or click anywhere. The autocomplete input field changed back to "piz".
I tried autocomplete:closed , $("#search-input").focusout to set the input field but it just changed back to my query.
To prevent it from disappearing, you can use autocomplete.js's debug option:
autocomplete('#search-input', { hint: false, debug: true }, [ /* ... */ ]);
The complete options list is available on GitHub.
Now I have it. When you need to only select and not to do any action, you can safety remove autocomplete:selected. And make sure your display key is value not object.
It saves me for trouble.
This is strange and any alternative method to what I want to accomplish is welcome. My app uses the jqgrid 3.5.3 and I need to disable a select list on my edit form. When I do so using the code displayed below it breaks the edit form - meaning I can not cancel or submit it. Thanks. This code is in the edit options array of the navGrid method. The the dropdown is the 'serv_descr' field. The others are text boxes and don't pose a problem. The form does come up and the field is disabled - its just broken.
beforeShowForm: function(eparams) {
document.getElementById('equip_id').disabled = true;
document.getElementById('service_dt').disabled = true;
document.getElementById('serv_descr').disabled = true;
document.getElementById('calc_next_svc').checked = 'true';
}
afterShowForm: function(eparams) {
$('#equip_id').attr('disabled', 'disabled');
$('#service_dt').attr('disabled', 'disabled');
$('#serv_descr').attr('disabled', 'disabled');
$('#calc_next_svc').attr('checked', true);
}
Note:
replace event trigger afterShowForm
id name must be form controll