Fix frame.waitFor to work with complex selectors (#90)

The frame.waitFor didn't account for multi-level selectors.
This patch fixes this, executing document.querySelector on every DOM mutation.

lib/FrameManager.js

@@ -178,26 +178,25 @@ class FrameManager extends EventEmitter {
    * @return {!Promise<undefined>}
    */
   async _waitForInFrame(selector, frame) {
-    let code = selector => new Promise((fulfill, reject) => {
+    let code = selector => {
+      let promise = new Promise(fulfill => {
         if (document.querySelector(selector)) {
           fulfill();
           return;
         }
         new MutationObserver((mutations, observer) => {
-        for (let mutation of mutations) {
-          for (let node of mutation.addedNodes) {
-            if (node.matches(selector)) {
+          if (document.querySelector(selector)) {
             observer.disconnect();
             fulfill();
             return;
           }
-          }
-        }
         }).observe(document.documentElement, {
           childList: true,
           subtree: true
         });
       });
+      return promise;
+    };
     let contextId = undefined;
     if (!frame.isMainFrame()) {
       contextId = this._frameIdToExecutionContextId.get(frame._id);

test/test.js

@@ -190,6 +190,17 @@ describe('Puppeteer', function() {
       expect(added).toBe(true);
     }));
 
+    it('should work when node is added through innerHTML', SX(async function() {
+      await page.navigate(EMPTY_PAGE);
+      let frame = page.mainFrame();
+      let added = false;
+      frame.waitFor('h3 div').then(() => added = true);
+      expect(added).toBe(false);
+      await frame.evaluate(addElement, 'span');
+      await page.$('span', span => span.innerHTML = '<h3><div></div></h3>');
+      expect(added).toBe(true);
+    }));
+
     it('Page.waitFor is shortcut for main frame', SX(async function() {
       await page.navigate(EMPTY_PAGE);
       await FrameUtils.attachFrame(page, 'frame1', EMPTY_PAGE);