Trying to address a challenge using casperjs and mocha, I am attempting to verify if an element's text value on a page updates within a timeframe of 5-10 seconds. The approach involves extracting the value, storing it in an array, waiting for 500ms, and repeating this process until the array contains 20 items (which equates to roughly 10 seconds). Subsequently, applying underscore/lodash's _.uniq function to the array to confirm that its length is > 1.
The issue arises as mocha does not wait for this process to complete before determining the success/failure of the test. While adjusting mocha's timeout setting was attempted, it did not yield any change in behavior. Please refer to the commented code snippet below for clarity.
it('validates elements with dynamic values', function () {
// Setting a longer timeout to account for potential delays
this.timeout(20000);
casper.then(function() {
// Initializing the test array
var values = [],
// For stopping the intervals
intervalId;
function getValue () {
// Capturing the text value of the element
var value = casper.evaluate(function () { return $('#element').text(); });
// Adding to the test array
values.push(value);
// Executing further checks only when there are 20 items in the array
if (values.length === 20) {
// Halting further value checks
clearInterval(intervalId);
// Verifying if more than one unique value was obtained within the designated period
expect(_.uniq(values).length).to.be.gt(1);
}
}
// Waiting for the page element to populate with value
// Initially set to '-'
casper.waitFor(function () {
return this.evaluate(function () {
return $('#element').text() !== '-';
});
// Initiating the check with a 500ms delay between each iteration
}, function then() {
intervalId = setInterval(getValue, 500);
});
});
});
With the 500ms interval, just 2-3 element values are retrieved in the values array before mocha proceeds to the next test. Surprisingly, the console log statements containing the values appear on screen after mocha has assessed the test as successful. This discrepancy stems from values.length never reaching 10, causing the expect assertion to be bypassed, leading to an erroneous pass status. Below are the test results observed at a 500ms interval:
Dashboard
✓ validates elements with dynamic values (202ms)
Values: ["20,832,022"]
Values: ["20,832,022","20,832,372"]
Values: ["20,832,022","20,832,372","20,832,722"]
✓ confirms the page title of leads (41ms)
2 passing (11s)
Despite not reaching the expected 20 items, the test passes prematurely due to a timeout constraint. The following output depicts the outcome with a 50ms interval:
Dashboard
✓ validates elements with dynamic values (341ms)
Values: ["20,400,667"]
Values: ["20,400,667","20,400,718"]
Values: ["20,400,667","20,400,718","20,400,718"]
Values: ["20,400,667","20,400,718","20,400,718","20,400,769"]
Values: ["20,400,667","20,400,718","20,400,718","20,400,769","20,400,769"]
Values: ["20,400,667","20,400,718","20,400,718","20,400,769","20,400,769","20,400,820"]
Values: ["20,400,667","20,400,718","20,400,718","20,400,769","20,400,769","20,400,820","20,400,820"]
Values: ["20,400,667","20,400,718","20,400,718","20,400,769","20,400,769","20,400,820","20,400,820","20,400,871"]
Values: ["20,400,667","20,400,718","20,400,718","20,400,769","20,400,769","20,400,820","20,400,820","20,400,871","20,400,871"]
Values: ["20,400,667","20,400,718","20,400,718","20,400,769","20,400,769","20,400,820","20,400,820","20,400,871","20,400,871","20,400,922"]
Final Values: ["20,400,667","20,400,718","20,400,718","20,400,769","20,400,769","20,400,820","20,400,820","20,400,871","20,400,871","20,400,922"]
✓ confirms the page title of leads (41ms)
2 passing (8s)
Although more values were captured at a 50ms interval, this duration is insufficient for capturing all necessary updates on the page. Various attempts were made including employing the done callback within the it statement, however, mocha fails to acknowledge it or wait for its invocation.
Testing conditions with a forced asynchronous declaration exhibit similar behaviors, either prematurely passing at a 500ms interval without reaching the validation stage or producing a 'done() called multiple times' error under a 50ms interval. Consideration of the framework used (mocha-casperjs) as a factor influencing these outcomes may be warranted.