--- a/devtools/client/shared/test/helper_inplace_editor.js
+++ b/devtools/client/shared/test/helper_inplace_editor.js
@@ -1,44 +1,52 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 /* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
+/* import-globals-from head.js */
 
 "use strict";
 
 /**
  * Helper methods for the HTMLTooltip integration tests.
  */
 
 const { editableField } = require("devtools/client/shared/inplace-editor");
 
 /**
  * Create an inplace editor linked to a span element and click on the span to
- * to turn to edit mode.
+ * to turn to edit mode. Returns a promise that will resolve once the span has been
+ * rendered and received a click.
  *
  * @param {Object} options
  *        Options passed to the InplaceEditor/editableField constructor.
  * @param {Document} doc
  *        Document where the span element will be created.
  * @param {String} textContent
  *        (optional) String that will be used as the text content of the span.
+ * @return {Promise} promise that resolves when the span is painted and clicked.
  */
-function createInplaceEditorAndClick(options, doc, textContent) {
+const createInplaceEditorAndClick = Task.async(function* (options, doc, textContent) {
   doc.body.innerHTML = "";
+
+  let onSpanReady = once(doc.defaultView, "MozAfterPaint");
   let span = options.element = createSpan(doc);
   if (textContent) {
     span.textContent = textContent;
   }
 
+  // Wait for the span to be painted before interacting.
+  yield onSpanReady;
+
   info("Creating an inplace-editor field");
   editableField(options);
 
   info("Clicking on the inplace-editor field to turn to edit mode");
   span.click();
-}
+});
 
 /**
  * Helper to create a span in the provided document.
  *
  * @param {Document} doc
  *        Document where the span element will be created.
  * @return {Element} the created span element.
  */