From 4100b1b75ac5a63da42d15995b963ffe01b6670e 2014-11-15 16:49:44
From: Jonathan Frederic <jon.freder@gmail.com>
Date: 2014-11-15 16:49:44
Subject: [PATCH] Make all tests async display safe

---

diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index 771dc35..b7730fe 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -80,7 +80,7 @@ define(["widgets/js/manager",
                     this.trigger('msg:custom', msg.content.data.content);
                     break;
                 case 'display':
-                    return that.widget_manager.display_view(msg, that);
+                    this.widget_manager.display_view(msg, that);
                     break;
             }
         },
diff --git a/IPython/html/tests/util.js b/IPython/html/tests/util.js
index 6cd9981..61f0a23 100644
--- a/IPython/html/tests/util.js
+++ b/IPython/html/tests/util.js
@@ -180,10 +180,31 @@ casper.wait_for_widget = function (widget_info) {
     // widget_info : object
     //      Object which contains info related to the widget.  The model_id property
     //      is used to identify the widget.
+
+    // Clear the results of a previous query, if they exist.  Make sure a
+    // dictionary exists to store the async results in.
+    this.thenEvaluate(function(model_id) {
+        if (window.pending_msgs === undefined) { 
+            window.pending_msgs = {}; 
+        } else {
+            window.pending_msgs[model_id] = -1;
+        } 
+    }, {model_id: widget_info.model_id});
+
+    // Wait for the pending messages to be 0.
     this.waitFor(function () {
-        var pending = this.evaluate(function (m) {
-            return IPython.notebook.kernel.widget_manager.get_model(m).pending_msgs;
-        }, {m: widget_info.model_id});
+        var pending = this.evaluate(function (model_id) {
+
+            // Get the model.  Once the model is had, store it's pending_msgs
+            // count in the window's dictionary.
+            IPython.notebook.kernel.widget_manager.get_model(model_id)
+            .then(function(model) {     
+                window.pending_msgs[model_id] = model.pending_msgs; 
+            });
+
+            // Return the pending_msgs result.
+            return window.pending_msgs[model_id];
+        }, {model_id: widget_info.model_id});
 
         if (pending === 0) {
             return true;
@@ -314,13 +335,13 @@ casper.execute_cell_then = function(index, then_callback, expect_failure) {
     return return_val;
 };
 
-casper.waitfor_cell_element = function(index, selector){
+casper.wait_for_element = function(index, selector){
     // Utility function that allows us to easily wait for an element 
     // within a cell.  Uses JQuery selector to look for the element.
     var that = this;
     this.waitFor(function() {
         return that.cell_element_exists(index, selector);
-    }, function() { console.log('FOUND!'); });
+    });
 };
 
 casper.cell_element_exists = function(index, selector){
diff --git a/IPython/html/tests/widgets/widget.js b/IPython/html/tests/widgets/widget.js
index d3c6b6d..3f0c35d 100644
--- a/IPython/html/tests/widgets/widget.js
+++ b/IPython/html/tests/widgets/widget.js
@@ -131,7 +131,7 @@ casper.notebook_test(function () {
         multiset.model_id = this.get_output_cell(index).text.trim();
     });
 
-    this.wait_for_widget(multiset);
+    this.wait_for_widget(multiset); 
 
     index = this.append_cell(
         'print("%d%d%d" % (multiset.a, multiset.b, multiset.c))');
diff --git a/IPython/html/tests/widgets/widget_bool.js b/IPython/html/tests/widgets/widget_bool.js
index fa818d7..3586271 100644
--- a/IPython/html/tests/widgets/widget_bool.js
+++ b/IPython/html/tests/widgets/widget_bool.js
@@ -1,9 +1,7 @@
 // Test widget bool class
 casper.notebook_test(function () {
-    // index = this.append_cell(
-    //     'print("Success")');
-    // this.execute_cell_then(index);
 
+    // Create a checkbox and togglebutton.
     var bool_index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
@@ -17,20 +15,24 @@ casper.notebook_test(function () {
             'Create bool widget cell executed with correct output.');
     });
 
-    this.waitfor_cell_element(bool_index, '.widget-area .widget-subarea .widget-hbox input');
-    this.waitfor_cell_element(bool_index, '.widget-area .widget-subarea button');
+    // Wait for the widgets to actually display.
+    var widget_checkbox_selector = '.widget-area .widget-subarea .widget-hbox input';
+    var widget_togglebutton_selector = '.widget-area .widget-subarea button';
+    this.wait_for_element(bool_index, widget_checkbox_selector);
+    this.wait_for_element(bool_index, widget_togglebutton_selector);
 
+    // Continue the tests.
     this.then(function() {
         this.test.assert(this.cell_element_exists(bool_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(bool_index, 
-            '.widget-area .widget-subarea .widget-hbox input'),
+            widget_checkbox_selector),
             'Checkbox exists.');
 
         this.test.assert(this.cell_element_function(bool_index, 
-            '.widget-area .widget-subarea .widget-hbox input', 'prop', ['checked']),
+            widget_checkbox_selector, 'prop', ['checked']),
             'Checkbox is checked.');
 
         this.test.assert(this.cell_element_exists(bool_index, 
@@ -42,18 +44,19 @@ casper.notebook_test(function () {
             'Checkbox labeled correctly.');
 
         this.test.assert(this.cell_element_exists(bool_index, 
-            '.widget-area .widget-subarea button'),
+            widget_togglebutton_selector),
             'Toggle button exists.');
 
         this.test.assert(this.cell_element_function(bool_index, 
-            '.widget-area .widget-subarea button', 'html')=="Title",
+            widget_togglebutton_selector, 'html')=="Title",
             'Toggle button labeled correctly.');
 
         this.test.assert(this.cell_element_function(bool_index, 
-            '.widget-area .widget-subarea button', 'hasClass', ['active']),
+            widget_togglebutton_selector, 'hasClass', ['active']),
             'Toggle button is toggled.');
     });
 
+    // Try changing the state of the widgets programatically.
     index = this.append_cell(
         'bool_widgets[0].value = False\n' +
         'bool_widgets[1].value = False\n' +
@@ -63,25 +66,25 @@ casper.notebook_test(function () {
             'Change bool widget value cell executed with correct output.');
 
         this.test.assert(! this.cell_element_function(bool_index, 
-            '.widget-area .widget-subarea .widget-hbox input', 'prop', ['checked']),
+            widget_checkbox_selector, 'prop', ['checked']),
             'Checkbox is not checked. (1)');
 
         this.test.assert(! this.cell_element_function(bool_index, 
-            '.widget-area .widget-subarea button', 'hasClass', ['active']),
+            widget_togglebutton_selector, 'hasClass', ['active']),
             'Toggle button is not toggled. (1)');
  
         // Try toggling the bool by clicking on the checkbox.
-        this.cell_element_function(bool_index, '.widget-area .widget-subarea .widget-hbox input', 'click');
+        this.cell_element_function(bool_index, widget_checkbox_selector, 'click');
 
         this.test.assert(this.cell_element_function(bool_index, 
-            '.widget-area .widget-subarea .widget-hbox input', 'prop', ['checked']),
+            widget_checkbox_selector, 'prop', ['checked']),
             'Checkbox is checked. (2)');
 
         // Try toggling the bool by clicking on the toggle button.
-        this.cell_element_function(bool_index, '.widget-area .widget-subarea button', 'click');
+        this.cell_element_function(bool_index, widget_togglebutton_selector, 'click');
 
         this.test.assert(this.cell_element_function(bool_index, 
-            '.widget-area .widget-subarea button', 'hasClass', ['active']),
+            widget_togglebutton_selector, 'hasClass', ['active']),
             'Toggle button is toggled. (3)');
 
     });
diff --git a/IPython/html/tests/widgets/widget_box.js b/IPython/html/tests/widgets/widget_box.js
index 6e1f242..617423d 100644
--- a/IPython/html/tests/widgets/widget_box.js
+++ b/IPython/html/tests/widgets/widget_box.js
@@ -1,12 +1,10 @@
 // Test container class
 casper.notebook_test(function () {
-    index = this.append_cell(
-        'from IPython.html import widgets\n' + 
-        'from IPython.display import display, clear_output\n' +
-        'print("Success")');
-    this.execute_cell_then(index);
 
+    // Create a box widget.
     var container_index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
         'container = widgets.Box()\n' +
         'button = widgets.Button()\n'+
         'container.children = [button]\n'+
@@ -14,24 +12,32 @@ casper.notebook_test(function () {
         'container._dom_classes = ["my-test-class"]\n'+
         'print("Success")\n');
     this.execute_cell_then(container_index, function(index){
-
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create container cell executed with correct output.');
+    });
 
-        this.test.assert(this.cell_element_exists(index, 
+    // Wait for the widgets to actually display.
+    var widget_box_selector = '.widget-area .widget-subarea .widget-box';
+    var widget_box_button_selector = '.widget-area .widget-subarea .widget-box button';
+    this.wait_for_element(container_index, widget_box_selector);
+    this.wait_for_element(container_index, widget_box_button_selector);
+
+    // Continue with the tests.
+    this.then(function() {
+        this.test.assert(this.cell_element_exists(container_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, 
-            '.widget-area .widget-subarea .widget-box'),
+        this.test.assert(this.cell_element_exists(container_index, 
+            widget_box_selector),
             'Widget container exists.');
 
-        this.test.assert(this.cell_element_exists(index, 
+        this.test.assert(this.cell_element_exists(container_index, 
             '.widget-area .widget-subarea .my-test-class'),
             '_dom_classes works.');
 
-        this.test.assert(this.cell_element_exists(index, 
-            '.widget-area .widget-subarea .my-test-class button'),
+        this.test.assert(this.cell_element_exists(container_index, 
+            widget_box_button_selector),
             'Container parent/child relationship works.');
     });
 
@@ -61,20 +67,26 @@ casper.notebook_test(function () {
             '_dom_classes can be used to remove a class.');
     });
 
-    index = this.append_cell(
+    var boxalone_index = this.append_cell(
         'display(button)\n'+
         'print("Success")\n');
-    this.execute_cell_then(index, function(index){
-
+    this.execute_cell_then(boxalone_index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Display container child executed with correct output.');
+    });
+
+    // Wait for the widget to actually display.
+    var widget_button_selector = '.widget-area .widget-subarea button';
+    this.wait_for_element(boxalone_index, widget_button_selector);
 
-        this.test.assert(! this.cell_element_exists(index, 
-            '.widget-area .widget-subarea .widget-box'),
+    // Continue with the tests.
+    this.then(function() {
+        this.test.assert(! this.cell_element_exists(boxalone_index, 
+            widget_box_selector),
             'Parent container not displayed.');
 
-        this.test.assert(this.cell_element_exists(index, 
-            '.widget-area .widget-subarea button'),
+        this.test.assert(this.cell_element_exists(boxalone_index, 
+            widget_button_selector),
             'Child displayed.');
     });
 });
\ No newline at end of file
diff --git a/IPython/html/tests/widgets/widget_button.js b/IPython/html/tests/widgets/widget_button.js
index 3329a89..80f8673 100644
--- a/IPython/html/tests/widgets/widget_button.js
+++ b/IPython/html/tests/widgets/widget_button.js
@@ -1,12 +1,8 @@
 // Test widget button class
 casper.notebook_test(function () {
-    index = this.append_cell(
+    var button_index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
-        'print("Success")');
-    this.execute_cell_then(index);
-
-    var button_index = this.append_cell(
         'button = widgets.Button(description="Title")\n' +
         'display(button)\n' +
         'print("Success")\n' +
@@ -14,24 +10,30 @@ casper.notebook_test(function () {
         '    display("Clicked")\n' +
         'button.on_click(handle_click)');
     this.execute_cell_then(button_index, function(index){
-
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n',
             'Create button cell executed with correct output.');
+    });
+
+    // Wait for the widgets to actually display.
+    var widget_button_selector = '.widget-area .widget-subarea button';
+    this.wait_for_element(button_index, widget_button_selector);
 
-        this.test.assert(this.cell_element_exists(index, 
+    // Continue with the tests.
+    this.then(function() {
+        this.test.assert(this.cell_element_exists(button_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, 
-            '.widget-area .widget-subarea button'),
+        this.test.assert(this.cell_element_exists(button_index, 
+            widget_button_selector),
             'Widget button exists.');
 
-        this.test.assert(this.cell_element_function(index, 
-            '.widget-area .widget-subarea button', 'html')=='Title',
+        this.test.assert(this.cell_element_function(button_index, 
+            widget_button_selector, 'html')=='Title',
             'Set button description.');
 
-        this.cell_element_function(index, 
-            '.widget-area .widget-subarea button', 'click');
+        this.cell_element_function(button_index, 
+            widget_button_selector, 'click');
     });
 
     this.wait_for_output(button_index, 1);
diff --git a/IPython/html/tests/widgets/widget_float.js b/IPython/html/tests/widgets/widget_float.js
index 291efb3..6b18dad 100644
--- a/IPython/html/tests/widgets/widget_float.js
+++ b/IPython/html/tests/widgets/widget_float.js
@@ -1,30 +1,34 @@
 // Test widget float class
 casper.notebook_test(function () {
-    index = this.append_cell(
-        'from IPython.html import widgets\n' + 
-        'from IPython.display import display, clear_output\n' +
-        'print("Success")');
-    this.execute_cell_then(index);
-
     var float_text = {};
     float_text.query = '.widget-area .widget-subarea .my-second-float-text input';
     float_text.index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
         'float_widget = widgets.FloatText()\n' +
         'display(float_widget)\n' + 
         'float_widget._dom_classes = ["my-second-float-text"]\n' + 
         'print(float_widget.model_id)\n');
     this.execute_cell_then(float_text.index, function(index){
         float_text.model_id = this.get_output_cell(index).text.trim();
-        
-        this.test.assert(this.cell_element_exists(index, 
+    });
+
+    // Wait for the widget to actually display.
+    this.wait_for_element(float_text.index, float_text.query);
+
+    // Continue with the tests
+    this.then(function(){        
+        this.test.assert(this.cell_element_exists(float_text.index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, float_text.query),
+        this.test.assert(this.cell_element_exists(float_text.index, float_text.query),
             'Widget float textbox exists.');
 
         this.cell_element_function(float_text.index, float_text.query, 'val', ['']);
+        console.log('send keys');
         this.sendKeys(float_text.query, '1.05');
+        console.log('send keys done');
     });
 
     this.wait_for_widget(float_text);
@@ -64,18 +68,23 @@ casper.notebook_test(function () {
         '[display(floatrange[i]) for i in range(2)]\n' + 
         'print("Success")\n');
     this.execute_cell_then(slider.index, function(index){
-
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create float range cell executed with correct output.');
+    });
+
+    // Wait for the widgets to actually display.
+    this.wait_for_element(slider.index, slider.query);
+    this.wait_for_element(slider.index, float_text_query);
 
-        this.test.assert(this.cell_element_exists(index, 
+    this.then(function(){
+        this.test.assert(this.cell_element_exists(slider.index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, slider.query),
+        this.test.assert(this.cell_element_exists(slider.index, slider.query),
             'Widget slider exists.');
 
-        this.test.assert(this.cell_element_exists(index, float_text_query),
+        this.test.assert(this.cell_element_exists(slider.index, float_text_query),
             'Widget float textbox exists.');
     });
 
diff --git a/IPython/html/tests/widgets/widget_image.js b/IPython/html/tests/widgets/widget_image.js
index ba10d35..5072155 100644
--- a/IPython/html/tests/widgets/widget_image.js
+++ b/IPython/html/tests/widgets/widget_image.js
@@ -26,19 +26,23 @@ casper.notebook_test(function () {
         'display(image)\n' + 
         'print("Success")\n');
     this.execute_cell_then(image_index, function(index){
-
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create image executed with correct output.');
+    });
+
+    // Wait for the widget to actually display.
+    var img_selector = '.widget-area .widget-subarea img';
+    this.wait_for_element(image_index, img_selector);
 
-        this.test.assert(this.cell_element_exists(index, 
+    this.then(function(){
+        this.test.assert(this.cell_element_exists(image_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        var img_sel = '.widget-area .widget-subarea img';
-        this.test.assert(this.cell_element_exists(index, img_sel), 'Image exists.');
+        this.test.assert(this.cell_element_exists(image_index, img_selector), 'Image exists.');
 
         // Verify that the image's base64 data has made it into the DOM.
-        var img_src = this.cell_element_function(image_index, img_sel, 'attr', ['src']);
+        var img_src = this.cell_element_function(image_index, img_selector, 'attr', ['src']);
         this.test.assert(img_src.indexOf(test_jpg) > -1, 'Image src data exists.');
     });    
 });
\ No newline at end of file
diff --git a/IPython/html/tests/widgets/widget_int.js b/IPython/html/tests/widgets/widget_int.js
index 0862351..8ca6ca8 100644
--- a/IPython/html/tests/widgets/widget_int.js
+++ b/IPython/html/tests/widgets/widget_int.js
@@ -1,26 +1,28 @@
 // Test widget int class
 casper.notebook_test(function () {
-    index = this.append_cell(
-        'from IPython.html import widgets\n' + 
-        'from IPython.display import display, clear_output\n' +
-        'print("Success")');
-    this.execute_cell_then(index);
-
     var int_text = {};
     int_text.query = '.widget-area .widget-subarea .my-second-int-text input';
     int_text.index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
         'int_widget = widgets.IntText()\n' +
         'display(int_widget)\n' + 
         'int_widget._dom_classes = ["my-second-int-text"]\n' + 
         'print(int_widget.model_id)\n');
     this.execute_cell_then(int_text.index, function(index){
         int_text.model_id = this.get_output_cell(index).text.trim();
-        
-        this.test.assert(this.cell_element_exists(index, 
+    });
+
+    // Wait for the widget to actually display.
+    this.wait_for_element(int_text.index, int_text.query);
+
+    // Continue with the tests.
+    this.then(function() {
+        this.test.assert(this.cell_element_exists(int_text.index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, int_text.query),
+        this.test.assert(this.cell_element_exists(int_text.index, int_text.query),
             'Widget int textbox exists.');
 
         this.cell_element_function(int_text.index, int_text.query, 'val', ['']);
@@ -54,13 +56,6 @@ casper.notebook_test(function () {
         this.test.assertEquals(this.get_output_cell(index).text, '12\n', 
             'Invald int textbox value caught and filtered.');
     });
-    
-    index = this.append_cell(
-        'from IPython.html import widgets\n' + 
-        'from IPython.display import display, clear_output\n' +
-        'print("Success")');
-    this.execute_cell_then(index);
-
 
     var slider_query = '.widget-area .widget-subarea .slider';
     var int_text2 = {};
@@ -73,15 +68,22 @@ casper.notebook_test(function () {
         'print(intrange[0].model_id)\n');
     this.execute_cell_then(int_text2.index, function(index){
         int_text2.model_id = this.get_output_cell(index).text.trim();
+    });
+
+    // Wait for the widgets to actually display.
+    this.wait_for_element(int_text2.index, int_text2.query);
+    this.wait_for_element(int_text2.index, slider_query);
 
-        this.test.assert(this.cell_element_exists(index, 
+    // Continue with the tests.
+    this.then(function(){
+        this.test.assert(this.cell_element_exists(int_text2.index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, slider_query),
+        this.test.assert(this.cell_element_exists(int_text2.index, slider_query),
             'Widget slider exists.');
 
-        this.test.assert(this.cell_element_exists(index, int_text2.query),
+        this.test.assert(this.cell_element_exists(int_text2.index, int_text2.query),
             'Widget int textbox exists.');
     });
 
diff --git a/IPython/html/tests/widgets/widget_selection.js b/IPython/html/tests/widgets/widget_selection.js
index e4e4524..ea87a38 100644
--- a/IPython/html/tests/widgets/widget_selection.js
+++ b/IPython/html/tests/widgets/widget_selection.js
@@ -58,21 +58,30 @@ casper.notebook_test(function () {
     this.execute_cell_then(selection_index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create selection cell executed with correct output.');
+    });
+
+    // Wait for the widgets to actually display.
+    this.wait_for_element(selection_index, combo_selector);
+    this.wait_for_element(selection_index, multibtn_selector);
+    this.wait_for_element(selection_index, radio_selector);
+    this.wait_for_element(selection_index, list_selector);
 
-        this.test.assert(this.cell_element_exists(index, 
+    // Continue with the tests.
+    this.then(function() {
+        this.test.assert(this.cell_element_exists(selection_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, combo_selector),
+        this.test.assert(this.cell_element_exists(selection_index, combo_selector),
              'Widget combobox exists.');
 
-        this.test.assert(this.cell_element_exists(index, multibtn_selector),
+        this.test.assert(this.cell_element_exists(selection_index, multibtn_selector),
             'Widget multibutton exists.');
 
-        this.test.assert(this.cell_element_exists(index, radio_selector),
+        this.test.assert(this.cell_element_exists(selection_index, radio_selector),
             'Widget radio buttons exists.');
 
-        this.test.assert(this.cell_element_exists(index, list_selector),
+        this.test.assert(this.cell_element_exists(selection_index, list_selector),
             'Widget list exists.');
 
         // Verify that no items are selected.
diff --git a/IPython/html/tests/widgets/widget_selectioncontainer.js b/IPython/html/tests/widgets/widget_selectioncontainer.js
index 57e9bd1..d8680ad 100644
--- a/IPython/html/tests/widgets/widget_selectioncontainer.js
+++ b/IPython/html/tests/widgets/widget_selectioncontainer.js
@@ -18,20 +18,22 @@ casper.notebook_test(function () {
         'multicontainer.selected_index = 0\n' +
         'print("Success")\n');
     this.execute_cell_then(multicontainer1_index, function(index){
-        
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create multicontainer cell executed with correct output. (1)');
+    });
+
+    // Wait for the widget to actually display.
+    this.wait_for_element(multicontainer1_index, multicontainer1_query);
 
-        this.test.assert(this.cell_element_exists(index, 
+    // Continue with the tests.
+    this.then(function() {
+        this.test.assert(this.cell_element_exists(multicontainer1_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, multicontainer1_query),
+        this.test.assert(this.cell_element_exists(multicontainer1_index, multicontainer1_query),
             'Widget tab list exists.');
 
-        this.test.assert(this.cell_element_exists(index, multicontainer1_query),
-            'First widget tab list exists.');
-
         // JQuery selector is 1 based
         this.click(multicontainer1_query + ' li:nth-child(2) a');
     });
@@ -74,23 +76,28 @@ casper.notebook_test(function () {
         'multicontainer.selected_index = 0\n' +
         'print("Success")\n');
     this.execute_cell_then(multicontainer2_index, function(index){
-
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create multicontainer cell executed with correct output. (2)');
+    });
+
+    // Wait for the widget to actually display.
+    this.wait_for_element(multicontainer2_index, multicontainer2_query);
 
-        this.test.assert(this.cell_element_exists(index, 
+    // Continue with the tests.
+    this.then(function() {
+        this.test.assert(this.cell_element_exists(multicontainer2_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, multicontainer2_query),
+        this.test.assert(this.cell_element_exists(multicontainer2_index, multicontainer2_query),
             'Widget accordion exists.');
 
-        this.test.assert(this.cell_element_exists(index, multicontainer2_query + 
+        this.test.assert(this.cell_element_exists(multicontainer2_index, multicontainer2_query + 
             ' .panel:nth-child(1) .panel-collapse'),
             'First accordion page exists.');
 
         // JQuery selector is 1 based
-        this.test.assert(this.cell_element_function(index, multicontainer2_query + 
+        this.test.assert(this.cell_element_function(multicontainer2_index, multicontainer2_query + 
             ' .panel.panel-default:nth-child(3) .panel-heading .accordion-toggle', 
             'html')=='good', 'Accordion page title set (before display).');
 
diff --git a/IPython/html/tests/widgets/widget_string.js b/IPython/html/tests/widgets/widget_string.js
index 54e669d..c01afb7 100644
--- a/IPython/html/tests/widgets/widget_string.js
+++ b/IPython/html/tests/widgets/widget_string.js
@@ -1,12 +1,8 @@
 // Test widget string class
 casper.notebook_test(function () {
-    index = this.append_cell(
+    var string_index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
-        'print("Success")');
-    this.execute_cell_then(index);
-
-    var string_index = this.append_cell(
         'string_widget = [widgets.Text(value = "xyz", placeholder = "abc"),\n' +
         '    widgets.Textarea(value = "xyz", placeholder = "def"),\n' +
         '    widgets.HTML(value = "xyz"),\n' +
@@ -14,40 +10,50 @@ casper.notebook_test(function () {
         '[display(widget) for widget in string_widget]\n'+
         'print("Success")');
     this.execute_cell_then(string_index, function(index){
-
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create string widget cell executed with correct output.');
+    });
+
+    // Wait for the widget to actually display.
+    var textbox_selector = '.widget-area .widget-subarea .widget-hbox input[type=text]';
+    var textarea_selector = '.widget-area .widget-subarea .widget-hbox textarea';
+    var latex_selector = '.widget-area .widget-subarea div span.MathJax_Preview';
+    this.wait_for_element(string_index, textbox_selector);
+    this.wait_for_element(string_index, textarea_selector);
+    this.wait_for_element(string_index, latex_selector);
 
-        this.test.assert(this.cell_element_exists(index, 
+    // Continue with the tests.
+    this.then(function(){
+        this.test.assert(this.cell_element_exists(string_index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, 
-            '.widget-area .widget-subarea .widget-hbox input[type=text]'),
+        this.test.assert(this.cell_element_exists(string_index, 
+            textbox_selector),
             'Textbox exists.');
 
-        this.test.assert(this.cell_element_exists(index, 
-            '.widget-area .widget-subarea .widget-hbox textarea'),
+        this.test.assert(this.cell_element_exists(string_index, 
+            textarea_selector),
             'Textarea exists.');
 
-        this.test.assert(this.cell_element_function(index, 
-            '.widget-area .widget-subarea .widget-hbox textarea', 'val')=='xyz',
+        this.test.assert(this.cell_element_function(string_index, 
+            textarea_selector, 'val')=='xyz',
             'Python set textarea value.');
 
-        this.test.assert(this.cell_element_function(index, 
-            '.widget-area .widget-subarea .widget-hbox input[type=text]', 'val')=='xyz',
+        this.test.assert(this.cell_element_function(string_index, 
+            textbox_selector, 'val')=='xyz',
             'Python set textbox value.');
 
         this.test.assert(this.cell_element_exists(string_index, 
-            '.widget-area .widget-subarea div span.MathJax_Preview'),
+            latex_selector),
             'MathJax parsed the LaTeX successfully.');
 
-        this.test.assert(this.cell_element_function(index, 
-            '.widget-area .widget-subarea .widget-hbox textarea', 'attr', ['placeholder'])=='def',
+        this.test.assert(this.cell_element_function(string_index, 
+            textarea_selector, 'attr', ['placeholder'])=='def',
             'Python set textarea placeholder.');
 
-        this.test.assert(this.cell_element_function(index, 
-            '.widget-area .widget-subarea .widget-hbox input[type=text]', 'attr', ['placeholder'])=='abc',
+        this.test.assert(this.cell_element_function(string_index, 
+            textbox_selector, 'attr', ['placeholder'])=='abc',
             'Python set textbox placehoder.');
     });
 });