fix: load event not fired when page load very fast (fix #277, #297) (#400)

Closes #277 
Closes #297

Author: zaaack

README.md

@@ -148,7 +148,7 @@ const chromeless = new Chromeless({
 - [`end()`](docs/api.md#api-end)
 
 **Chrome methods**
-- [`goto(url: string)`](docs/api.md#api-goto)
+- [`goto(url: string, timeout?: number)`](docs/api.md#api-goto)
 - [`setUserAgent(useragent: string)`](docs/api.md#api-setUserAgent)
 - [`click(selector: string)`](docs/api.md#api-click)
 - [`wait(timeout: number)`](docs/api.md#api-wait-timeout)

docs/api.md

@@ -19,7 +19,7 @@ Chromeless provides TypeScript typings.
 - [`end()`](#api-end)
 
 ### Chrome methods
-- [`goto(url: string)`](#api-goto)
+- [`goto(url: string, timeout?: number)`](#api-goto)
 - [`setUserAgent(useragent: string)`](#api-setuseragent)
 - [`click(selector: string)`](#api-click)
 - [`wait(timeout: number)`](#api-wait-timeout)
@@ -73,12 +73,13 @@ await chromeless.end()
 
 <a name="api-goto" />
 
-### goto(url: string): Chromeless<T>
+### goto(url: string, timeout?: number): Chromeless<T>
 
 Navigate to a URL.
 
 __Arguments__
 - `url` - URL to navigate to
+- `timeout` -How long to wait for page to load (default is value of waitTimeout option)
 
 __Example__
 
@@ -173,7 +174,7 @@ __Arguments__
 __Example__
 
 ```js
-await chromeless.wait(() => { 
+await chromeless.wait(() => {
   return new Promise((resolve, reject) => {
     // do something async, setTimeout...
     resolve();

package-lock.json

@@ -73,8 +73,8 @@ export default class Chromeless<T extends any> implements Promise<T> {
     return this.lastReturnPromise.catch(onrejected) as Promise<U>
   }
 
-  goto(url: string): Chromeless<T> {
-    this.queue.enqueue({ type: 'goto', url })
+  goto(url: string, timeout?: number): Chromeless<T> {
+    this.queue.enqueue({ type: 'goto', url, timeout })
 
     return this
   }

src/api.ts

@@ -40,6 +40,8 @@ import {
   writeToFile,
   isS3Configured,
   uploadToS3,
+  eventToPromise,
+  waitForPromise,
 } from '../util'
 
 export default class LocalRuntime {
@@ -55,7 +57,7 @@ export default class LocalRuntime {
   async run(command: Command): Promise<any> {
     switch (command.type) {
       case 'goto':
-        return this.goto(command.url)
+        return this.goto(command.url, command.timeout)
       case 'setViewport':
         return setViewport(this.client, command.options)
       case 'wait': {
@@ -126,13 +128,18 @@ export default class LocalRuntime {
     }
   }
 
-  private async goto(url: string): Promise<void> {
+  private async goto(
+    url: string,
+    waitTimeout: number = this.chromelessOptions.waitTimeout,
+  ): Promise<void> {
     const { Network, Page } = this.client
     await Promise.all([Network.enable(), Page.enable()])
     if (!this.userAgentValue) this.userAgentValue = `Chromeless ${version}`
     await Network.setUserAgentOverride({ userAgent: this.userAgentValue })
+    const e2p = eventToPromise()
+    Page.loadEventFired(e2p.onEvent)
     await Page.navigate({ url })
-    await Page.loadEventFired()
+    await waitForPromise(e2p.fired(), waitTimeout, 'page load event')
     this.log(`Navigated to ${url}`)
   }
 

src/chrome/local-runtime.ts

@@ -64,6 +64,7 @@ export type Command =
   | {
       type: 'goto'
       url: string
+      timeout?: number
     }
   | {
       type: 'clearCache'

src/types.ts

@@ -106,6 +106,42 @@ export async function wait(timeout: number): Promise<void> {
   return new Promise<void>((resolve, reject) => setTimeout(resolve, timeout))
 }
 
+export async function waitForPromise<T>(
+  promise: Promise<T>,
+  waitTimeout: number,
+  label?: string,
+): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    let fullfilled = false
+    setTimeout(() => {
+      fullfilled = true
+      reject(
+        new Error(
+          `wait(${label || 'Promise'}) timed out after ${waitTimeout}ms`,
+        ),
+      )
+    }, waitTimeout)
+    return promise
+      .then(res => (fullfilled ? void 0 : resolve(res)))
+      .catch(err => (fullfilled ? void 0 : reject(err)))
+  })
+}
+
+export function eventToPromise() {
+  let resolve
+  const promise = new Promise(res => {
+    resolve = res
+  })
+  return {
+    onEvent(...args) {
+      resolve(args.length > 1 ? args : args[0])
+    },
+    fired() {
+      return promise
+    },
+  }
+}
+
 export async function nodeExists(
   client: Client,
   selector: string,