The Dojo DOH examples and tutorials do not seem to cover this case. I have a server url for which I want to write tests. I want the target page to show in the TestPage tab and then have multiple tests run against it. The closest example I could find is an html file that defines some tests and then a widget in the body, but I can't do that with a url over which I do not have control. I have done it with a page that fires the robot.init function, but I would like to use the test runner page.
I finally came up with this:
...
doh.register("login tests", [
{
name: "load",
timeout: 20000,
runTest: function(){
var d = new doh.Deferred();
testPage = dom.byId("testBody");
console.log("in load, testPage: " + testPage);
doh.showTestPage();
testPage.src = path;
robot.sequence(function() {
console.log("in load, sequence: ");
testpageBody = testPage.contentDocument.getElementsByTagName("body")[0];
console.log("in load, testpageBody: " + testpageBody);
var bdy = query(".headerFooterLoaded", testpageBody)[0];
console.log("in load, headerFooterLoaded: " + bdy);
if (!!bdy) {
d.callback(true);
} else {
d.errback(new Error("Node with class 'headerFooterLoaded' not found."));
}
}, 8000);
return d;
}
},
...
I tried to catch an iframe onload event, but had no luck.
Hope this helps someone
Related
I am trying to create a UI automation test with intern js , but i m getting problem on waiting until the page is fully loaded. My code starts searching for element before the page is loaded. Can some one help me on this.
My code:
define([
'intern!object',
'intern/chai!assert',
'Automation/ConfigFiles/dataurl',
'Automation/pages/login/loginpage',
'intern/dojo/node!fs',
'intern/dojo/node!leadfoot/helpers/pollUntil'
], function (registerSuite, assert,dataurl, LoginPage,fs,pollUntil) {
registerSuite(function () {
var loginPage;
var values;
return {
setup: function () {
var data = fs.readFileSync(loginpage, 'utf8');
json=JSON.parse(data);
console.log('###########Setting Up Login Page Test##########')
this.remote
.get(require.toUrl(json.locator.URL))
.then(pollUntil(this.remote.findById('uname').isDisplayed(),6000)// here i want to wait until page is loaded
.waitForDeletedByClassName('loading').end().sleep(600000)// here i want to wait until loading component is disappered
values = json.values;
loginPage = new LoginPage(this.remote,json.locator);
},
'successful login': function () {
console.log('##############Login Success Test############')
return loginPage
.login(values.unamevalue,values.pwdvalue)
},
// …additional tests…
};
});
});
I m trying to use pollUntil . But I m not sure weather I should use it or not.
pollUntil is a good thing to use here, but it doesn't look like you're actually waiting for polling to finish. Your setup method needs to return the command chain that includes pollUntil so that Intern will know it needs to wait, something like:
var setupPromise = this.remote
.get(require.toUrl(json.locator.URL))...
values = json.values;
loginPage = new LoginPage(this.remote, json.locator);
return setupPromise;
Alternatively, you could pass your LoginPage class the chain:
var setupPromise = this.remote
.get(require.toUrl(json.locator.URL))...
values = json.values;
loginPage = new LoginPage(setupPromise, json.locator);
In this case Intern won't wait for setup to complete, but your LoginPage code will implicitly wait for the setupPromise to complete before doing anything else. While this will work, the intent isn't as clear as in the previous example (e.g., that Intern should wait for some setup process to complete before proceeding).
Related questions:
wait for element present without error
Nightwatchjs: how to check if element exists without creating an error/failure/exception
Selenium WebDriver : Wait for complex page with JavaScript(JS) to load
Whenever I load my web-page, I need to wait for ajax calls to complete. I currently do this with:
browser.waitForElementNotPresent(
"cssSelector_For_HTML_afterAJAXComplete",
10000 //timeout
);
This adds an extra assertion to my test though, and makes the test-count for the report artificially larger than necessary.
Any ideas?
Ok, I hacked something together. I'm basically sending javascript to the console in selenium using browser.execute(function, params, callback)
function waitForElement_NoPassFail(selector, timeout){
browser.execute(function(selector, timeout, done){
let intervalId;
var p1 = new Promise(function(resolve, reject){
intervalId = setInterval(function(){
let itemArray = document.querySelectorAll(selector);
if(itemArray.length == 1){
clearInterval(intervalId);
resolve(true); //element found
} else if(itemArray.length>1){
reject(false); //too many elements found, because of ambiguous selector
}
}, 100);
});
var p2 = new Promise(function(resolve, reject){
setTimeout(reject,timeout, false); //timeout reached
});
return Promise.race([p1, p2]).then(function(result){
done(result);
});
},
[selector, timeout],
function(result){
if(!result){
throw "Element: " + selector + " wasn't found after " + timout + " ms.";
} else {
console.log("Element found within timeout limits.") //doesn't trigger assert=ok
}
});
};
waitForElement_NoPassFail(
"cssSelector_that_Is_Valid_after_AjaxIsComplete",
10000 //timeout
);
This can be extended in various ways, for example to support xPath. You could use the nightwatch global variable for element checking frequency when waiting. Write a comment if you need the help.
casper.on("page.initialized", function(casp){
this.echo("Initialized...");
casper.evaluate(function(){ window.sessionStorage.setItem('authorization','xxxxxxx');
window.sessionStorage.setItem('_USER','xxxxx');
window.sessionStorage.setItem('USERNAME','xxxxx');
window.sessionStorage.setItem('INTERNAL','xxxx');
});
};
casper.test.begin('1: Asserting casperjs is working', 2, function suite(test) {
test.assertEquals(true, true);
test.assert(true);
test.done();
});
casper.test.begin('starting at /', 5, function suite(test
var starting = Date.now();
casper.start();
casper.open("xxxxx",function() {
test.assertHttpStatus(200);
var session = this.evaluate(function(){
return JSON.stringify(window.sessionStorage);
});
this.echo("SESSION: ", session);
});
casper.then(function(){
this.wait(10000, function(){this.echo("WAITED!");});
this.echo(this.getHTML('body'));
try{
casper.waitFor(function check() {
return this.evaluate(function() {
var quotes = document.getElementById('quoteBody').children.length > 1;
this.echo("QUOTES", quotes);
return true;
});
}, function then() {
// ending timer
var ending = Date.now();
var totalt = (ending - start) / 3600;
test.assertFalsy(function(){
return totalt >= 10.0;
}, "loading asserting total time passed");
this.echo("total time: ", totalt);
// tests
test.assertEval(function(){
return document.querySelectorAll('#quotesBody tr').length > 1;
});
//this.echo(this.getHTML('body'));
this.assertTitle("xxxxx", "title match");
});
} catch (e){
this.echo(e);
}
});
casper.run(function() {
test.done();
});
});
I've tried wrapping the test.done() in a timeout but I can't get passed the endless Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL... warnings. The document.getElementById('quoteBody').children.length > 1; works in the browser, but is not returning true and triggering the waitTimeout event. It is after this event is emitted that I get the warnings. I tried waiting much longer than 10000 for loading to no avail. I was able to get some good advice from #Artjom B to get my script off the ground, but this seemingly perennial phantom bug is adding noise to my logs and the waitFor if returned falsy should not present any Unsafe errors.
edit
I think I can fix my script if the warnings weren't completely polluting my output. I've tried web-security=no flags -- didn't work. downgrade to phantom 1.9.2 from 1.9.8? I understand 1.9.8 is a little buggy and many people are having this issue. I'm much more concerned about how to get rid of the noise for now.
still looking for solution
"phantomjs": "^1.9.9"
for casperJs
casperjs --ssl-protocol=tlsv1 test run.js
I am using phantomjs for testing one web application. but i am facing problem with page load means sometimes phantom script executed but dom element is not loaded. How to use callbacks for sorting this kind of issues
resourceReceived(request),resourceRequested(resource),resourceError(resource)
If you want to execute code after the page has finished loading, use this:
page.onLoadFinished = function()
{
// function body
var pageTitle = page.evaluate(function() {
console.log('Page Name: ' + document.title);
return document.title;
});
};
I made a custom basic lightbox with Dojo to be used with forms and data. Not really dealing with images or such.
The problem that I seem to be facing is this. When Dojo makes a call via AJAX to ajaxtb.php with specific code for example; ?f=login or ?f=register the page is loaded. When you I close the lightbox and try to view something different say ?f=stuff the lightbox will show what ever was before it be it ?f=login or what ever, it will show it until ?f=stuff is fully loaded.
Here is the code for the lightbox, also can some one tell me how to optimize it since its pretty redundant at the moment and very basic.
dojo.ready(function(){
#loads logout confirmation
dojo.query("#jsLogoutPromp").connect("onclick", function(){
dojo.byId("qpbox-title-text").innerHTML = "Logout Confirmation";
dojo.query("#qpbox-content").style("display", "block");
dojo.query("#qpbox-overlay").style("display", "block");
dojo.xhrGet({
url: "ajaxtb.php?f=logout",
load: function(newContent) {
dojo.byId("utm").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
});
#loads options to upload profile photo
dojo.query("#jsUserPhotoPromp").connect("onclick", function(){
dojo.byId("qpbox-title-text").innerHTML = "Upload Photo";
dojo.query("#qpbox-content").style("display", "block");
dojo.query("#qpbox-overlay").style("display", "block");
dojo.xhrGet({
url: "ajaxtb.php?f=display_pic",
load: function(newContent) {
dojo.byId("utm").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
});
#closes everything when clicked well technically hides everything
dojo.query("#qpbox-close").connect("onclick", function(){
dojo.query("#qpbox-content").style("display", "none");
dojo.query("#qpbox-overlay").style("display", "none");
});
#shows up for logout only, same as above code, but does not work since the original id is included in ajax.php?f=logout
dojo.query("#qpbox-stay").connect("onclick", function(){
dojo.query("#qpbox-content").style("display", "none");
dojo.query("#qpbox-overlay").style("display", "none");
});
});
The functions responsible for closing everything is qpbox-close and qpbox-stay. Technically both only hide the lightbox not close. The other problem is with qpbox-stay. qpbox-stay id is located in ajax.php?f=logout and when clicked it does not close the lightbox so not sure whats the problem with it.
here is the code for ajax.php
if($_GET['f'] == 'logout') {
echo '
<p>Are you sure you want to exit right now?</p>
<br>
<button type="submit">Logout</button> No, I wana Stay
';
}
Thanks
You can use dojo.empty(dojo.byId('utm')) before showing the lightbox to delete all the contents.
Also, you can refactor your code quite a bit. Both click handlers do basically the same thing. So why not refactor them in a function?
dojo.ready(function() {
function showLightBox(title, url) {
var utm = dojo.byId('utm');
dojo.empty(utm);
dojo.byId("qpbox-title-text").innerHTML = title;
dojo.style(dojo.byId("qpbox-content"), "display", "block");
dojo.style(dojo.byId("qpbox-overlay"), "display", "block");
dojo.xhrGet({
url: url,
load: function(newContent) {
utm.innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
}
function hideLightBox() {
dojo.style(dojo.byId("qpbox-content"), "display", "none");
dojo.style(dojo.byId("qpbox-overlay"), "display", "none");
}
dojo.connect(dojo.byId('jsLogoutPromp'), 'onclick', function() {
showLightBox("Logout Confirmation", "ajaxtb.php?f=logout");
});
// ...
dojo.connect(dojo.byId('qpbox-close'), 'onclick', hideLightBox);
});
You can try and connect to #qpbox-stay after you've loaded the content, or if using Dojo 1.6, you can use NodeList.delegate like:
dojo.require('dojox.NodeList.delegate');
dojo.query('#utm').delegate('#qpbox-stay', 'onclick', hideLightBox);
That will connect to #utm which is already loaded, but work for #qpbox-stay only. It works with event bubbling, similar to jquery.live(). See http://davidwalsh.name/delegate-event