Waiting for an element to be created

In my trials and tribulations to detect when a field has been autofilled, I need to create a shim for monitorEvents so that I can see the event lifecycle of that element and ultimately try to debug it.

One thing that I found is that monitorEvents requires an element but for what I am doing I know that there will be an element with an id at somepoint but I don’t know when it will be created.

I quickly knocked out a small function called waitForElement that uses the MutationObserver to look for when an element with a given id is added to the DOM. When that element has been detected it will resolve the promise and return the element.

The code is as follows:

function waitForElement(id) {
  return new Promise(function(resolve, reject) {
    var elementId = id.substr(1);
    var element = document.getElementById(elementId);

    if(element) {
      resolve(element);
      return;
    }

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        var nodes = Array.from(mutation.addedNodes);
        nodes.forEach(function(node) {
          if(node.id == elementId) {
            observer.disconnect();
            resolve(node);
            return;
          }
        });
      });
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });
  });
}

Here is the gist if that is your bag.

It is pretty simple to use this simple API.

waitForElement("#test").then(function(element) {
    console.log("Element Added", element);
});

Now combining in the monitorEvents function from my previous post, I can now set a breakpoint early in the lifecycle of a page (because scripts in the head block) and set up a waitForElement call that can now start logging all the events that are firing on that element.

waitForElement("#test").then(function(element) {
    monitorEvents(element);
});

Technically I still haven’t solved the issue of “how can you tell when Firefox has autocompleted fields” but I have the tools at my disposal.

Pretty chuffed.

Originally published on Tales of a Developer Advocate