fix: fixes wrong placement of navigation promise

closes #26

package.json

@@ -1,6 +1,6 @@
 {
   "name": "puppeteer-recorder",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A Chrome extension for recording browser interaction and generating Puppeteer scripts",
   "main": "index.js",
   "scripts": {

src/code-generator/CodeGenerator.js

@@ -31,6 +31,7 @@ export default class CodeGenerator {
     this._frame = 'page'
     this._frameId = 0
     this._allFrames = {}
+    this._navigationPromiseSet = false
   }
 
   generate (events) {
@@ -52,8 +53,8 @@ export default class CodeGenerator {
     console.debug(`generating code for ${events ? events.length : 0} events`)
     let result = ''
 
-    for (let event of events) {
-      const { action, selector, value, href, keyCode, tagName, frameId, frameUrl } = event
+    for (let i = 0; i < events.length; i++) {
+      const { action, selector, value, href, keyCode, tagName, frameId, frameUrl } = events[i]
 
       // we need to keep a handle on what frames events originate from
       this._setFrames(frameId, frameUrl)
@@ -65,7 +66,15 @@ export default class CodeGenerator {
           }
           break
         case 'click':
-          this._blocks.push(this._handleClick(selector))
+          const next = i + 1
+          if (events[next] && events[next].action === 'navigation*' && this._options.waitForNavigation && !this._navigationPromiseSet) {
+            const block = new Block(this._frameId)
+            block.addLine({type: pptrActions.NAVIGATION_PROMISE, value: `const navigationPromise = page.waitForNavigation()`})
+            this._blocks.push(block)
+            this._navigationPromiseSet = true
+          }
+
+          this._blocks.push(this._handleClick(selector, events))
           break
         case 'change':
           if (tagName === 'SELECT') {
@@ -112,7 +121,7 @@ export default class CodeGenerator {
 
   _postProcess () {
     // we want to create only one navigationPromise
-    if (this._options.waitForNavigation) {
+    if (this._options.waitForNavigation && !this._navigationPromiseSet) {
       this._postProcessWaitForNavigation()
     }
 

src/code-generator/__tests__/code-generator.spec.js

@@ -14,10 +14,13 @@ describe('code-generator', () => {
   })
 
   test('it generates the correct waitForNavigation code', () => {
-    const events = [{ action: 'navigation*' }, { action: 'click', selector: 'a.link' }]
+    const events = [{ action: 'click', selector: 'a.link' }, { action: 'navigation*' }]
     const codeGenerator = new CodeGenerator()
-    expect(codeGenerator._parseEvents(events)).toContain('const navigationPromise = page.waitForNavigation()\n')
-    expect(codeGenerator._parseEvents(events)).toContain('await navigationPromise\n')
+    const code = codeGenerator._parseEvents(events)
+    const lines = code.split('\n')
+    expect(lines[1].trim()).toEqual('const navigationPromise = page.waitForNavigation()')
+    expect(lines[4].trim()).toEqual("await page.click('a.link')")
+    expect(lines[6].trim()).toEqual('await navigationPromise')
   })
 
   test('it does not generate waitForNavigation code when turned off', () => {

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Puppeteer Recorder",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "manifest_version": 2,
   "description": "A Chrome extension for recording browser interaction and generating Puppeteer scripts",
   "permissions": [

src/popup/components/__tests__/__snapshots__/App.spec.js.snap

@@ -17,7 +17,7 @@ exports[`App.vue it has the correct pristine / empty state 1`] = `
         class="text-muted"
       >
         <small>
-          0.4.0
+          0.4.1
         </small>
       </span>
     </a>