I have a small CasperJS test script as below. The website used in the url is build on angular.
var deals;
var url;
var login_url;
casper.test.begin('Paytm test', function(test) {
casper.start(login_url, function() {
test.assertExists('form', 'form is found');
this.fill('form', {
username: 'username',
password: 'password'
}, true);
});
casper.then(function(){
casper.start(url);
casper.waitForSelector(".border-radius.profile1",
// click login/signup button on home page
function success() {
test.assertExists(".border-radius.profile1");
this.click(".border-radius.profile1");
},
function fail() {
test.assertExists(".border-radius.profile1");
});
casper.waitForSelector(deals,
// click on deals
function success() {
test.assertExists(deals);
this.click(deals);
},
function fail() {
test.assertExists(deals);
});
casper.waitForSelector("selector",
// select an item from coupons page
function success() {
test.assertExists("selector");
this.click("selector");
},
function fail() {
test.assertExists("selector");
});
casper.waitForSelector(".discraption button",
// clicked on buy button
function success() {
test.assertExists(".discraption button");
this.click(".discraption button");
},
function fail() {
test.assertExists(".discraption button");
});
casper.waitForSelector("#mpCart div div.order-summary.fr > button",
// clicked on proceed button from cart
function success() {
test.assertExists("#mpCart div div.order-summary.fr > button");
casper.debugHTML("#mpCart div div.order-summary.fr > button");
console.log('clicked on proceed button');
},
function fail() {
test.assertExists("#mpCart div div.order-summary.fr > button");
});
casper.thenEvaluate(function(){
console.log('in then evaluate');
angular.element(document.querySelectorAll('#mpCart div div.order-summary.fr > button')).triggerHandler('click');
}, 'CasperJS');
});
casper.run(function() {
test.done();
});
});
Every waitforSelector is working fine, but the control is not going into the casper.thenEvaluate function where I want to trigger an angular click event.
I have tested the
angular.element(document.querySelectorAll('#mpCart div div.order-summary.fr >
button')).triggerHandler('click');
It works fine from the firebug console, but not here.
Any help would be really appreciated.
I debugged the final url call and now I am doing a this.openUrl('that particular url').
As os this scenario it works.
Thanks all for their responses.
Related
I am new to AngularJS, and I want to create a pdf of a particular div with a button click. Currently I'm having code that works on page load. If I
refresh the page it will automatically download that particular div. But I need the download to happen after the click event. This is
my code. Please help me. I have added necessary scripts of html2canvas etc.
html2canvas(document.getElementById('exportthis'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
}
});
You should create a function in your controller, and add a click event to a button.
Your view:
<input type="submit" ng-click="createPdf()" value="Create PDF"/>
Your controller:
$scope.createPdf = function () {
html2canvas(document.getElementById('exportthis'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
}
});
};
js click event
function myClick() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
html
<input type="submit" id="testhtm2canvas" onclick="myClick()" value="html2"/>
I'm using angular-web-notification (https://github.com/sagiegurari/angular-web-notification) and i've built a factory in order to avoid copy-pasting every time I want to display it. My factory is this
module.registerFactory('browserNotification', function($rootScope, webNotification) {
return {
show: function(title, body, callback) {
webNotification.showNotification(title, {
body: body,
icon: 'img/icon.png',
onClick: callback,
autoClose: 5000 //auto close the notification after 4 seconds (you can manually close it via hide function)
}, function onShow(error, hide) {
if (error) {
console.log('Unable to show notification: ' + error.message);
} else {
console.log('Notification Shown.');
setTimeout(function hideNotification() {
console.log('Hiding notification....');
hide(); //manually close the notification (you can skip this if you use the autoClose option)
}, 5000);
}
});
}
}
})
As you can see I pass to the show() 3 variables, one of them is a callback for the onClick function, in order to do stuff when the notification is clicked. The thing is that i want to close that notification once its clicked, but i can't figure out how, because the hide() functions doesn´t exist in the context where the callback function is executed. For example, in my contrller I have this
browserNotification.show('Test title', 'Test body', function() {
hide();
alert('Entro al callback!');
});
There, hide() didn't exist. So, how can I close the notification from my callback function?
This makes the trick!
module.registerFactory('browserNotification', function($timeout,webNotification) {
return {
show: function(title, body, callback) {
var snd = new Audio('audio/alert.mp3');
snd.play();
//the timeout is to sync the sound with the notification rendering on screen
$timeout(function() {
var hideNotification;
webNotification.showNotification(title, {
body: body,
icon: 'img/icon.png',
onClick: function onNotificationClicked() {
callback();
if (hideNotification) {
hideNotification();
}
},
autoClose: 5000 //auto close the notification after 4 seconds (you can manually close it via hide function)
}, function onShow(error, hide) {
if (!error) {
hideNotification = hide;
}
});
}, 150);
}
}
});
I have two clickable elements on my webpage, which is a login page. One is a remember-me checkbox, and the other is a login button. The code below executes successfully on chrome. However, when I run the test against IE 11, the tests actually pass! But the buttons are never clicked. Only the 'will recieve a login error' test fails with IE because the error message is never presented since the login button is never clicked.
Here is the code:
//run test
describe('Test my Login webpage', function () {
var usernameInput = element(by.id('UserName'));
var passwordInput = element(by.id('Password'));
var loginButton = element(by.tagName('button'));
it('will open the login webpage', function () {
browser.get('http://<my website>/Account/Login');
});
it('will click the remember-me checkbox', function () {
expect(element(by.id('RememberMe')).isSelected()).not.toBeTruthy();
element(by.id('RememberMe')).click();
});
it('will type a username', function () {
expect(element(by.id('UserName')).isDisplayed()).toBe(true);
usernameInput.sendKeys('testing...').then(function () {
expect(element(by.id('UserName')).getText()).toBe('');
});
});
it ('will type a password', function () {
expect(element(by.id('UserName')).isDisplayed()).toBe(true);
passwordInput.sendKeys('fakePassword').then(function () {
expect(element(by.id('Password')).getText()).toContain('');
});
});
it('will click login button', function () {
expect(loginButton.isDisplayed()).toBe(true);
loginButton.click();
browser.waitForAngular();
usernameInput.clear();
usernameInput.sendKeys('my second attempt');
});
it('will recieve a login error', function () {
expect(element(by.css('.error-msg')).isDisplayed()).toBe(true);
//expect(element(by.class('error-msg')).getText()).toMatch('Username or password was invalid, please retry');
});
});
You could try putting an explicit wait in before you .click(). IE is notorious for being slower to load objects, and thus more synchronization is needed.
I have such code inside directive :
$document.bind('keydown', function ($event) {
if ($event && $scope.visible && $event.which === escapeKey) {
$scope.toggle();
$scope.$apply();
}
});
I want to test if user click escape toggle will run. At moment I have such test:
it('should toggle window visibility to false when keypress escape', function () {
var doc,
$event;
$httpBackend.when(method, url)
.respond(template);
$event = {
event: 'keydown'
};
directive = createDirective();
$httpBackend.flush();
$isolateScope = directive.isolateScope();
$isolateScope.toggle();
$document.triggerHandler('keydown');
});
But how can I pass that certain key was pressed thought triggerHandler. Don't want to use any jQuery . Is there another way of testing this?
element.triggerHandler({type: 'keydown', which: escapeKey});
We have researched and tried all we could find but cannot see why button click even is not firing. If we change the view render html color it shows the change, so view render is working okay but when the login button is clicked -> nothing. No error shows in js console. Tried with
button#login_button and #login_button and login_button - all nothing. what are we missing? thks for any help
SessionView = Backbone.View.extend({
el: ('#session'),
initialize:function () {
this.render();
},
render:function () {
if (!session) {
$(this.el).html(
"<button id=\"login_button\" class=\"login_button black\">"+
"Login"+
"</button>");
return this;
} else {
$(this.el).html(
"<button id=\"logout_button\" class=\"login_button black\">"+
"Logout</button>");
return this;
}
},
events: {
"click login_button" : "login",
"click logout_button": "logout"
},
login: function(){
alert("login");
console.log("login dialog");
//var loginView = new LoginView();
//loginView.render().showModal();
},
logout: function(){
alert("You Have Logged Out");
}
});
You should keep '#' in selectors:
events: {
"click #login_button" : "login",
"click #logout_button": "logout"
}
UPDATE
Do you wait for DOM ready to use new on this Backbone view class ?
The fact that your buttons are altered by the html calls means that you do.
As soon as you have checked that, you have to use this.$el instead of $(this.el).
If it still does not work, search for event blocking and be sure ids are unique.
This very simple JSFiddle works with the same conditions you are telling us.