I am trying to write functional tests using Intern framework which uses Leadfoot library to implement WebDriver API as I am using Selenium Grid setup to test my webapp on remote browsers. The app is already up and running. The functional test I use is the following one:
define(function (require) {
var tdd = require('intern!tdd');
var assert = require('intern/chai!assert');
var url = '...';
var server = '...';
tdd.suite("Init suite",function(){
tdd.before(function () {
// executes before suite starts
});
tdd.after(function () {
// executes after suite ends
});
tdd.beforeEach(function () {
// executes before each test
});
tdd.afterEach(function () {
// executes after each test
});
tdd.test('Checking servers', function () {
var that = this.remote;
return that
.setFindTimeout(15000)
.get(url)
.findById('linkservers')
.click()
.then(function(){
console.log("Click resolved");
})
.end()
.findDisplayedByClassName('server-name-span-text')
.getVisibleText()
.then(function(texts){
var t=0;
var tlen = 0;
if (Array.isArray(texts))
{
tlen = texts.length
for (t=0;t<tlen;t++)
console.log("server["+t+"]: "+texts[t]);
assert.strictEqual(texts[0],server,"server is: "+texts[0]);
} else {
assert.strictEqual(texts,server,"server is: "+texts[0]);
}
})
.end();
});
});
});
To start my test I use the intern-runner: ./node_modules/.bin/intern-runner config=tests/intern.cfg -reporters=Runner
The nature of my issue is that findDisplayedByClassName('server-name-span-text') fails to find the class name, even though I am using findDisplayed call which waits for the element to show. The element doesn't show because for some reason the click() call doesn't trigger the event properly (guess). What I mean is that the click handler in the webapp code doesn't execute thus the element with class name server-name-span-text is not created. What I get in the end is failing findDisplayedByClassName due to timeout.
As I am running this locally I can actually observe and confirm that the click events doesn't happen. So the expected changes in my webapp do not occur.
The log from intern is the following:
Listening on 0.0.0.0:9000
Tunnel started
‣ Created session firefox on LINUX (2d94ea44-dea8-411a-8ee5-a3d7b749cc7b)
Click resolved
× firefox on LINUX - Init suite - Checking servers (15.588s)
NoSuchElement: An element could not be located on the page using the given search parameters.
at <node_modules/intern/node_modules/leadfoot/lib/findDisplayed.js:37:21>
at <node_modules/intern/node_modules/dojo/Promise.ts:393:15>
at run <node_modules/intern/node_modules/dojo/Promise.ts:237:7>
at <node_modules/intern/node_modules/dojo/nextTick.ts:44:3>
at doNTCallback0 <node.js:417:9>
at process._tickCallback <node.js:346:13>
at Command.findDisplayed <node_modules/intern/node_modules/leadfoot/Command.js:23:10>
at Command.prototype.(anonymous function) [as findDisplayedByClassName] <node_modules/intern/node_modules/leadfoot/lib/strategies.js:28:16>
at Test.test <tests/functional/loadgui.js:36:6>
at <node_modules/intern/lib/Test.js:211:24>
at <node_modules/intern/node_modules/dojo/Promise.ts:393:15>
at runCallbacks <node_modules/intern/node_modules/dojo/Promise.ts:11:11>
at <node_modules/intern/node_modules/dojo/Promise.ts:317:4>
at run <node_modules/intern/node_modules/dojo/Promise.ts:237:7>
at <node_modules/intern/node_modules/dojo/nextTick.ts:44:3>
at doNTCallback0 <node.js:417:9>
No unit test coverage for firefox on LINUX
firefox on LINUX: 1/1 tests failed
TOTAL: tested 1 platforms, 1/1 tests failed
The log of the selenium node doesn't show problems, at least on INFO level:
15:33:59.735 INFO [13] org.openqa.selenium.remote.server.DriverServlet - Executing: [find element: By.id: linkservers])
15:33:59.742 INFO [13] org.openqa.selenium.remote.server.DriverServlet - Done: [find element: By.id: linkservers]
15:33:59.750 INFO [13] org.openqa.selenium.remote.server.DriverServlet - Executing: [click: 9 [[FirefoxDriver: firefox on LINUX (84846fb0-1467-45a9-bbfe-a6333ddef515)] -> id: linkservers]])
15:33:59.811 INFO [13] org.openqa.selenium.remote.server.DriverServlet - Done: [click: 9 [[FirefoxDriver: firefox on LINUX (84846fb0-1467-45a9-bbfe-a6333ddef515)] -> id: linkservers]]
15:33:59.824 INFO [13] org.openqa.selenium.remote.server.DriverServlet - Executing: [find elements: By.className: server-name-span-text])
15:34:14.844 INFO [13] org.openqa.selenium.remote.server.DriverServlet - Done: [find elements: By.className: server-name-span-text]
15:34:14.957 INFO [192] org.openqa.selenium.remote.server.DriverServlet - Executing: [execute script: return (function getCoverageData(coverageVariable) {
var coverageData = (function () { return this; })()[coverageVariable];
return coverageData && JSON.stringify(coverageData);
}).apply(this, arguments);, [__internCoverage]])
15:34:14.970 INFO [192] org.openqa.selenium.remote.server.DriverServlet - Done: [execute script: return (function getCoverageData(coverageVariable) {
var coverageData = (function () { return this; })()[coverageVariable];
return coverageData && JSON.stringify(coverageData);
}).apply(this, arguments);, [__internCoverage]]
15:34:14.980 INFO [192] org.openqa.selenium.remote.server.DriverServlet - Executing: [delete session: 2d94ea44-dea8-411a-8ee5-a3d7b749cc7b])
15:34:15.047 INFO [192] org.openqa.selenium.remote.server.DriverServlet - Done: [delete session: 2d94ea44-dea8-411a-8ee5-a3d7b749cc7b]
How do I solve this issue?
Note: Intern version is '3.0.6' and leadfoot is '1.6.4'. I tried running same functional test using Selenium IDE and it runs successfully.
Because the click() event was fired by the browser before the handler was attached.
The problem is between get() call and click() call:
...
.get(url)
.findById('linkservers')
.click()
...
What happened is that the browser fired the click event before the handler was attached. The handler is implemented in the app under test. This meant that at the time of firing click event there was no handler therefore the server-name-span-text element was not created hence the timeout of the findDisplayedByClassName operation. Note that I also tried findByClassName operation and in this cause I got exception NoSuchElement. The quick workaround, although very nasty, was to add a sleep() after the get() call.
Solution 1:
define(function (require) {
var tdd = require('intern!tdd');
var assert = require('intern/chai!assert');
var url = '...';
var server = '...';
tdd.suite("Init suite",function(){
tdd.before(function () {
// executes before suite starts
});
tdd.after(function () {
// executes after suite ends
});
tdd.beforeEach(function () {
// executes before each test
});
tdd.afterEach(function () {
// executes after each test
});
tdd.test('Checking servers', function () {
var that = this.remote;
return that
.setFindTimeout(15000)
.get(url)
.sleep(1000) //#Fix-1
.findById('linkservers')
.click()
.then(function(){
console.log("Click resolved");
})
.end()
.findDisplayedByClassName('server-name-span-text')
.getVisibleText()
.then(function(texts){
var t=0;
var tlen = 0;
if (Array.isArray(texts))
{
tlen = texts.length
for (t=0;t<tlen;t++)
console.log("server["+t+"]: "+texts[t]);
assert.strictEqual(texts[0],server,"server is: "+texts[0]);
} else {
assert.strictEqual(texts,server,"server is: "+texts[0]);
}
})
.end();
});
});
Update:
As explained earlier the explicit wait is a nasty solution for this kind of problem. The next solution is based on the execution of an asynchronous script at application side, executeAsync() call. This script returns a promise which has to be resolved by the application in order to end the wait on the asynchronous call. Of course the application has to cooperate with this a implemented deferred object so that it determined at which point the application has loaded. Otherwise such an approach won't work. The elegant way is presented as follows.
Solution 2:
define(function (require) {
var tdd = require('intern!tdd');
var assert = require('intern/chai!assert');
var url = '...';
var server = '...';
tdd.suite("Init suite",function(){
tdd.before(function () {
// executes before suite starts
});
tdd.after(function () {
// executes after suite ends
});
tdd.beforeEach(function () {
// executes before each test
});
tdd.afterEach(function () {
// executes after each test
});
tdd.test('Checking servers', function () {
var that = this.remote;
return that
.setFindTimeout(15000)
.get(url)
.executeAsync(function(done){
//application side.
application.loaded
.then(function(){
//at this moment the application has loaded
//so we resolve our intern side promise
done();
})
})
.findById('linkservers')
.click()
.then(function(){
console.log("Click resolved");
})
.end()
.findDisplayedByClassName('server-name-span-text')
.getVisibleText()
.then(function(texts){
var t=0;
var tlen = 0;
if (Array.isArray(texts))
{
tlen = texts.length
for (t=0;t<tlen;t++)
console.log("server["+t+"]: "+texts[t]);
assert.strictEqual(texts[0],server,"server is: "+texts[0]);
} else {
assert.strictEqual(texts,server,"server is: "+texts[0]);
}
})
.end();
});
});
If you wish you could also return some parameter to the callback which you resolve on the application side. For further information about this and more you can check out the docs.