This is my code I would like to accept confirm dialog but I couldn't catch dialog however I click on correct selector. I expect that where dialog window appeared the popup.loaded event will be triggered.
which :
casper.test.begin('Sign up with Yahoo' , 2 , function(test) {
casper.on('popup.loaded', function () {
this.echo("HELLOOPOPUP")
});
x=require('casper').selectXPath;
casper.start("file:///home/sb/mytest/casperlogin-master/caspertest/ak.html" , function() {
this.wait(3000, function() {
this.on('popup.loaded', function () {
this.echo("HELLOOPOPUP")
});
this.click(x('/html/body/div[6]/div/div[11]/div/button'));
});
this.wait(2000, function() {
this.setFilter('page.confirm', function(message) {
return true;
});
})
});
});
casper.run(function() {
});
Mark up link:
https://drive.google.com/file/d/0B5Nj-vLTRyujTm1zeGdZbmVmcnc/view?usp=sharing
Related
I'm trying to write a Nightmare.js test that asserts/evaluate() things at multiple points during its execution.
it("should return to home page when quit button is pressed", function (done) {
var username = 'sinbad';
new Nightmare({ show: true })
.goto(url)
.type('#choosenickname', username)
.click('#write-btn')
.wait('div.game')
.evaluate(function () {
return document.querySelectorAll('#write-btn').length;
})
.then(function (result) {
// No 'write' buttons found
result.should.eql(0);
})
// Everything after this point doesn't work
.click('#quit-btn')
.wait('div.home')
.evaluate(function () {
return document.querySelectorAll('#write-btn').length;
})
.then(function (result) {
// After quitting, we should have a write button
result.should.eql(1);
done();
});
});
When I run this, I get
TypeError: (intermediate value).goto(...).type(...).click(...).wait(...).evaluate(...)
.then(...).click is not a function
According to this sample, the answer seems to be composing then()s like so:
it("should return to home page when quit button is pressed", function (done) {
var nightmare = loginPlayer('sinbad')
nightmare
.evaluate(function () {
return document.querySelectorAll('#write-btn').length;
})
.then(function (result) {
// No 'write' buttons found
result.should.eql(0);
}).then(function () {
return nightmare
.click('#quit-btn')
.wait('div.home')
.evaluate(function () {
return document.querySelectorAll('#write-btn').length;
})
})
.then(function (result) {
// After quitting, we should have a write button
result.should.eql(1);
done();
});
});
I am trying to automate a process in CasperJS. However, I am facing some discrepancy between the behavior on a real browser vs the same in CasperJS.
Update: Process works fine with slimerJS but gives issue with headless
Here is my script:
var casper = require('casper').create({
"waitTimeout": 10000
});
var inputElements = {
"url": "http://www.jabong.com/incult-Tapered-Jeans-In-Indigo-1032119.html?pos=4",
"size": "34",
"address": {
"email": "someemail#xyz.com"
}
}
casper.options.viewportSize = {width: 1679, height: 902};
casper.start(inputElements.url, function (){
this.wait(10000, function (){
console.log("loaded");
})
});
var x = require('casper').selectXPath;
var sizeToSelect = inputElements.size;
// select size
casper.thenClick(x("//*[contains(#class,'size-desktop')]//"+
"li[contains(#class,'first') and contains(#class,'popover-options')]//"+
"span[contains(text(),'"+sizeToSelect+"')]/"+
".."));
// add to bag
casper.thenClick(x("//*[#id='add-to-cart']"));
// view cart
casper.thenClick(x("//*[#id='header-bag-sec']/a"))
// take a screenshot
casper.then(function() {
console.log("saving screenshot");
this.capture('../../1_view_cart.png');
});
casper.then(function() {
console.log('clicked ok, new location is ' + this.getCurrentUrl());
});
// place order
casper.then(function (){
this.click("[href='https://www.jabong.com/checkout/']");
})
// take a screenshot
casper.then(function() {
console.log("saving screenshot");
this.capture('../../2_address_details.png');
});
casper.then(function (){
this.sendKeys("#login-email", inputElements.address.email);
})
casper.then(function (){
this.click("#do-guest-checkout");
});
// take a screenshot
casper.then(function() {
console.log("saving screenshot");
this.capture('../../3_guest_checkout.png');
});
casper.waitFor(function check() {
return this.evaluate(function() {
return document.querySelector('#btn-login-checkout').textContent == "Continue as Guest";
});
}, function then() {
this.click('#btn-login-checkout');
});
casper.run();
On the last page, clicking on checkbox "Checkout as Guest" on a browser removes the password input field and changes the text of the Login button to "Continue as Guest". Attached screenshot:
However, in CasperJS, the password input field and the Login button are not changing. Any idea what am I doing wrong ?
I have made this little test:
casper.test.begin('Test', function() {
casper.start();
casper.then(function() {
casper = this;
setTimeout(function(casper) {
casper.echo('wait 5s');
}, 5000);
});
casper.then(function() {
this.echo('should appear after 5s');
});
casper.run(function() {
this.test.done();
});
});
When I execute this test, my console shows only this line "should appear after 5s" but not the first sentence, in fact the second 'then' does not wait for 5 seconds.
It's a huge problem because it's the possible cause of many random failure in my casperjs test suite.
Maybe I have to use async (with series) to execute each step after the other.
Do you have this problem ? What's the best practice to execute some javascript functions one after the other in casperjs tests ?
Try to use wait() here:
casper.then(function() {
casper = this;
casper.echo('wait 5s');
});
casper.then(function() {
casper.wait(5000, function() {
this.echo('should appear after 5s');
});
});
"What's the best practice to execute some javascript functions one after the other in casperjs tests ?"
Here how i do :
login.js
casper.login = function (id,password) {
casper.then(function(){ //or this.then(...)
this.test.comment('----------------Connexion Only ! : --------------------');
if (!this.visible('#div_boxhover')) {
this.echo('Connexion box not visible before mouse on it!');
}
this.mouse.move(x('//*[#id="identification"]'));
if (this.visible('#div_boxhover')) {
this.echo('Connexion box visible after mouse on it!');
} else { this.echo("FAIL : Connexion box doesn't appear");}
//this.echo("I can see the logo");
this.fill(x('//*[#id="div_boxhover"][1]'), {
login: id,
pass: password
}, false);
this.click(x('//*[#name="log_in"]'));
this.waitForSelector(('.boxValid'), function() {
this.test.assertSelectorHasText('.boxValid', 'Vous êtes identifié en tant que Membre !');
this.test.assertTextExists('Succès', 'Page contains "succès" : so identification done');
});
});
};
scenario1.js
var x = require('casper').selectXPath;
phantom.injectJs( 'C:/bin/Aptana_casperjs/ccm/_functions/login.js');
casper.test.begin('\n********* Stack title : ***********\n', 3 , function suite(test) {
casper.start(yourUrl,function(){
//check one main element in the page
this.test.assertExists('.search','Search toolbar present');
})
//set a viewport (for slimerJS)
.viewport(1200,800)
//call an external function
.then(function() {
casper.login("pseudo","password");//this.login("pseudo","password");
})
//then click on a link + fill the form which appears
.thenClick('div.colMiddle > a.button', function(){
this.fillSelectors('form#frmqa', {
'select[name="cat"]' : "2",
'input[name="titre"]' : title,
'textarea[name="message"]' : message
}, false);
this.click('input#submitqa');
})
//wait for the redirection after a click at the end of a step
.waitForText(topic, function() {
this.test.assertSelectorHasText('.boxTitle', 'Mes discussions suivies', "New topic in 'Mes dicussions suivies'");
this.test.assertExists('a[actid="shqafrm"].button','Button answer topic present');
})
//click on a new link
.thenClick('a[actid="shqafrm"].button', function(){
//wait for the textarea to appear
this.waitForSelector('textarea[name="message"]',function(){
//send message and submit
this.sendKeys('textarea[name="message"]', newPost);
this.click('input#submitqa');
});
})
//check redirection or validation after a click on button/form/link
.waitForSelector('.article',function(){
test.assertTextExists(newPost, 'Answer in topic ' + title + ' done');
})
.run(function() {
this.test.comment('----------------------- Stack title over ------------------------\n');
test.done();
});
});
So i just call my functions in a new step.
I want to test the "addGroup" function using Jasmine. I get the following error:
Error: Expected spy modifyMyHtml to have been called.at null.
I don't know what is the best way to test the addGroup function. Please HELP.....
var myRecord = {
addGroup: function(groupNumber) {
$.when(myRecord.getHtml())
.done(function(returnedHtml){
myRecord.modifyMyHtml(returnedHtml);
});
},
getHtml: function() {
return $.ajax({url: "myHtmlFile.html", dataType: "html" });
},
// adds options and events to my returned HTML
modifyMyHtml: function(returnedHtml) {
$('#outerDiv').html(returnedHtml);
var myOptions = myRecord.getOptions();
$('#optionsField').append(myOptions);
myRecord.bindEventsToDiv();
},
}
====JASMINE TEST
describe("Configure Record page", function() {
var fixture;
jasmine.getFixtures().fixturesPath = "/test/" ;
jasmine.getFixtures().load("myHtmlFile.html");
fixture = $("#jasmine-fixtures").html();
describe("addGroup", function(){
beforeEach(function() {
var groupNumber = 0;
spyOn(myRecord, "getHtml").andCallFake(function(){
return $.Deferred().promise();
});
spyOn(myRecord, "modifyMyHtml");
myRecord.addGroup(groupNumber);
});
it("Should call getHtml", function() {
expect(myRecord.getHtml).toHaveBeenCalled();
});
it("Should call modifyMyHtml", function() {
expect(myRecord.modifyMyHtml).toHaveBeenCalled(); ==>FAILS
});
});
});
You have to resolve the promise before you return em in your andCallFake.
spyOn(myRecord, "getHtml").andCallFake(function(){
return $.Deferred().resolve ().promise();
});
Btw. you should not test that the function on the object you wanna test are called, but that the html in the DOM are set with the right html
it("Should call modifyMyHtml", function() {
spyOn(myRecord, "getHtml").andCallFake(function(){
return $.Deferred().resolveWith(null, 'returnedHtml').promise();
});
expect($('#outerDiv').html).toEqual('returnedHtml')
});
I used ui jquery auto-complete in my MVC3 web project and kept jquery in external js file and included it in the web page but it is not working.
I used following code in js file for ui jquery auto-complete :
$(function () {
$("#ReportsTo_FullName").autocomplete({
source: function (request, response) {
var linkPath = "#Html.Raw(Url.Action("AutocompleteSuggestions", "Employee", new { #term = "Term", #moduleName="ModuleName"}))";
linkPath = linkPath.replace("Term", request.term);
linkPath = linkPath.replace("ModuleName", "Employee");
$.post(linkPath, function (data) {
response($.map(data, function (item) {
return { label: item.FullName, value: item.Id }
}
));
})
$.error(function (xhr, ajaxOptions, thrownError) { alert(thrownError); })
},
minLength: 1,
focus: function (event, ui) {
$("#ReportsTo_FullName").val(ui.item.label);
return false;
},
select: function (event, ui) {
if (ui.item) {
$("#ReportsTo_FullName").css('border', '');
$("#ReportsTo_FullName").val(ui.item.label);
$("#ReportsToId").val(ui.item.value);
return false;
}
},
change: function (event, ui) {
if (ui.item == null) {
$("#ReportsTo_FullName").css({ 'border': '1px solid #ff0000' });
$("#ReportsToId").val(null);
}
}
});
});
But it is failed to execute and its not showing autocomplete.
Whats wrong in above jquery ?
How to resolve this problem ?
You can't use this:
#Html.Raw(Url.Action("AutocompleteSuggestions", "Employee", new { #term = "Term", #moduleName="ModuleName"}))
In js file, this is server code. Create hidden field on the page and only then you can get this data.