I am trying to click on a dynamic auto-complete dropdown option to validate output on NewRelic synthetics. My code is not waiting and clicking the auto-complete option in the dropdown as expected.
This is my code:
$browser.get(url).then(function(){
$browser.findElement($driver.By.xpath('//header[#id="header"]//a[2][#href="https://nowcouriers.co.nz/addresschecker/"]')).click().then(function(){
return $browser.findElement($driver.By.className("auto-complete-container")).isDisplayed().then(function(){
$browser.findElement($driver.By.xpath('//input[#id="txt-address-auto-complete"]')).sendKeys("32 Botha Road, Penrose, AUCKLAND").then(function(){
return $browser.waitForAndFindElement($driver.By.xpath('li[class="ui-menu-item"]'), 5000).click().then(function(){
return $browser.findElement($driver.By.xpath('//div[#id="rowServicesOfferedMonToFriZone"]')).getText().then(function(text){
console.log(text)
assert.equal("MON - FRI STANDARD DELIVERY ",text, 'Mon-Fri standard delivery text error');
});
return $browser.findElement($driver.By.xpath('//div[#id="rowServicesOfferedSaturdayZone"]')).getText().then(function(text){
console.log(text)
assert.equal("SATURDAY DELIVERY".toUpperCase(),text.toUpperCase(), 'Saturday delivery text error');
});
return $browser.findElement($driver.By.xpath('(//div[#class="delivery-details"])[2]')).getText().then(function(text){
console.log(text)
assert.equal("BUSINESS DELIVERY ZONE".toUpperCase(),text.toUpperCase(), 'Business delivery text error');
});
});
});
});
});
});
Can anyone help me with the element wait and click here will be highly appreciated.
This is the snapshot when failing the test
Related
In mobile safari browser, sometimes when i click on goggle places options dropdown that doesn't work. So basically i select and the dropdwon closes but nothing appears in input.
I tried this solution also :
$timeout(function () {
var container = document.getElementsByClassName('pac-container');
// disable ionic data tab
angular.element(container).attr('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
angular.element(container).on("click", function(){
document.getElementById('autocomplete').blur();
});
}, 500);
}
}
But it doesn't work. Sometimes the selection works fine but not all time
I have a get request in my controller:
$http.get('/api/ideas').success(function(ideas) {
vm.ideas = ideas;
});
As soon as my controller is called, this api is called, and my UI becomes unresponsive until i get the result from the callback / all ideas are listed (with mg-repeat obviously). When i have e.g. 1000 ideas in my database, my UI is unresponsive for 3-5 seconds. But i thought that call was a callback ?!
This is how my backend looks like:
router.get('/api/ideas', controller.find);
exports.find = function(req, res) {
Idea.find(function (err, ideas) {
if(err) { return handleError(res, err); }
return res.json(200, ideas);
});
};
What is the problem here?
EDIT - SOLVED:
When i put a delay in backend like this:
exports.index = function(req, res) {
Idea.find(function (err, ideas) {
if(err) { return handleError(res, err); }
setTimeout(function() {
return res.json(200, ideas);
}, 3000);
});
};
although i just have 2 ideas, the UI is responsive during that 3 seconds. I can still click other parts till i get a response. So i think #Iggy is right. The problem is not the http get, but ng-repeat.
The problem is not the callback here (it's async), the problem is ng-repeat slowing your UI by adding your ideas one by one in the DOM.
To solve this you can use pagination, or look at the different way to improve ng-repeat performance.
A basic way to do so is to use the limitTo filter :
<div ng-init="totalDisplayed=20" ng-repeat="item in items | limitTo:totalDisplayed">
{{item}}
</div>
<button class="btn" ng-click="totalDisplayed = totalDisplayed+20">Load more</button>
I am new for testing Angular js app with Protractor.
I have a submit button on click of it, Toaster Message gets pop up on window.
Button to submit is below.
<button title="Add the Expense Claim" ng-show="addExpDetailsShow" class="btn btn-primary btn-sm" ng-click="addExpenseDetails()">Add</button>
Toaster div is as below
<div class="toast-top-right" id="toast-container"><div style="" class="toast toast-error"><button class="toast-close-button">×</button><div class="toast-message">Select Expense Type.<br>Amount should be between 0.10 to 100000000.</div></div></div>
Now i need to validate whether the toaster is displayed or not and need to validate toaster message. I am using jasmine to write my test case. By googling i wrote below code .
it('adding expense', function(){
element(by.xpath(".//*[#id='navbar-collapse']/ul[1]/li[2]/a")).click();
element(by.xpath(".//*[#id='main-container']/div[1]/div/div/div[3]/div/button[1]")).click();
element(by.css('[ng-click="addExpenseDetails()"]')).click();
toast = $$('.toast toast-error');
browser.manage().timeouts().implicitlyWait(1000);
expect(toast.getAttribute('value')).toEqual('some value');
expect(toast.isDisplayed()).toBe(true);
});
Validating toaster is similar to validating any other elements in protractor. However the challenge is to validate within the time frame it appears and disappears. To verify its details, try waiting for its appearance and then validate it. Here's how -
it('adding expense', function(){
var EC = protractor.ExpectedConditions;
element(by.css('[ng-click="addExpenseDetails()"]')).click()
//Verify toast after click event returns promise
.then(function(){
toast = $('.toast toast-error');
browser.wait(EC.visibilityOf(toast), 20000) //wait until toast is displayed
.then(function(){
expect(toast.getAttribute('value')).toEqual('some value');
});
});
});
Hope this helps.
it('adding expense', function(){
var EC = browser.ExpectedConditions;
element(by.css('[ng-click="addExpenseDetails()"]')).click()
//Verify toast after click event returns promise
.then(function(){
toast = $('.toast-message');
browser.wait(EC.visibilityOf(toast), 20000) //wait until toast is displayed
.then(function(){
expect(toast.getText()).toEqual('some value');
});
});
});
I am using protractor to Automate the mobile app. I need to verify if the toggle button(Toggle button Image attached) is checked or not, or enabled or disabled.
If not selected, select and do some operations, but everytime it says, selected even if not selected and disabled.
Here is my Code attached:::::::::::
var checkNoti = AppNoti.isSelected();
if (checkNoti)
{
checkNoti.then( function() {
console.log('The App notification is enabled Already!!');
});
}
else {
AppNoti.click().then( function() {
console.log('The App notification is Enabled');
});
};
Kindly advise...All the time, it says, toggle checkbox button is enabled, even if its disabled.
checkNoti value in the if (checkNoti) check would always evaluate as true since it is not a boolean value - it is a promise. You need to resolve it:
AppNoti.isSelected().then(function (selected) {
if (!selected) {
AppNoti.click().then(function() {
console.log('The App notification is Enabled');
});
}
});
You can click on it if it is enabled
AppNoti.click().then(function()
{
console.log('The App notification is Enabled');
}, function(err){
console.log('The App notification is Disabled');
});
I am working with ext js 4.1. I am developing an application that have to support IE9, the latest Firefox, the latest Chrome and Safari.
I need to show an alert message when the user wants to leave the if there are some data that is pending to submit.
I did the following using raw Javascript:
window.onbeforeunload=function(){
if (Ext.getStore('LocalChangesStore')){
if (Ext.getStore('LocalChangesStore').getCount() > 0) {
return 'Your changes are be lost.';
}
}
};
I am wondering if that would be possible with ext js. I saw the following function:
app.js:
EventManager.onWindowUnload( function(){
if (Ext.getStore('LocalChangesStore')){
if (Ext.getStore('LocalChangesStore').getCount() > 0) {
return 'Your changes are be lost.';
}
}
}, this
);
but it did not work.
Can somebody let me know which would be the best approach to solve this issue?
The onWindowUnload method attachs a function to the unload event but what you need is attach a function to the beforeunload event. Try this please
Ext.EventManager.on(window, 'beforeunload', function() {
return 'Your changes are be lost.';
});
Good luck.