feat: support loading page functions from files using webpack (#19)

* feat: support loading page functions directly from files (using webpack)

refactor: improve folder structure

* chore: remove unused dependency

* dont automatically set babel presets

if no presets are provided, fallback to using babelrc config

* print warning when a page function already exists

* if sourceFiles is a string, assume its a glob path

* use limit chunk count webpack plugin

* prefer finding node_modules relative from dist dir

* refactor BrowserError to be a named export

* use array index to access first char

* use createCacheKey also for parseFunction

* increase test coverage

* ignore coverage of deprecated method

* fix/improve page function tests

* determine valid cache correctly

* try enabling puppeteer on ci again

* always use tib for cache path

improve warning msg

* fix test

Author: pimlie

.circleci/config.yml

@@ -65,6 +65,19 @@ jobs:
           name: Unit Tests
           command: yarn test:unit --coverage && yarn coverage
 
+  test-e2e-chrome:
+    docker:
+        - image: circleci/node:latest-browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: E2E Tests
+          command: yarn test:e2e --coverage && yarn coverage
+          environment:
+            BROWSER_STRING: chrome
+
   test-e2e-firefox:
     docker:
         - image: circleci/node:latest-browsers
@@ -78,7 +91,7 @@ jobs:
           environment:
             BROWSER_STRING: firefox
 
-  test-e2e-chrome:
+  test-e2e-puppeteer:
     docker:
         - image: circleci/node:latest-browsers
     steps:
@@ -89,7 +102,7 @@ jobs:
           name: E2E Tests
           command: yarn test:e2e --coverage && yarn coverage
           environment:
-            BROWSER_STRING: chrome/selenium
+            BROWSER_STRING: puppeteer
 
   test-e2e-browserstack:
     docker:
@@ -126,7 +139,8 @@ workflows:
       - lint:                   { requires: [setup] }
       - audit:                  { requires: [setup] }
       - test-unit:              { requires: [lint] }
-      - test-e2e-firefox:       { requires: [lint] }
-      - test-e2e-chrome:        { requires: [lint] }
       - test-e2e-browserstack:  { requires: [lint] }
-      - test-e2e-jsdom:  { requires: [lint] }
+      - test-e2e-chrome:        { requires: [lint] }
+      - test-e2e-firefox:       { requires: [lint] }
+      - test-e2e-jsdom:         { requires: [lint] }
+      - test-e2e-puppeteer:     { requires: [lint] }

.eslintignore

@@ -1,4 +1,4 @@
 node_modules
 coverage
 test/fixtures/**
-src/browsers.js
+src/browsers/index.js

README.md

@@ -36,10 +36,12 @@
   "dependencies": {
     "@babel/core": "^7.5.5",
     "@babel/parser": "^7.5.5",
+    "babel-loader": "^8.0.6",
     "hable": "^1.0.1",
     "signal-exit": "^3.0.2",
     "tree-kill": "^1.2.1",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.39.1"
   },
   "devDependencies": {
     "@babel/node": "^7.5.5",

package.json

@@ -8,7 +8,7 @@ const Glob = require('glob')
 const glob = promisify(Glob)
 
 async function main() {
-  const srcPath = path.resolve(__dirname, '../src/') + '/'
+  const srcPath = path.resolve(__dirname, '../src/browsers') + '/'
   let files = await glob(`${srcPath}/!(utils)/**/*.js`)
   files = files
     .filter(f => !f.includes('webpage') && !f.includes('logging'))
@@ -25,7 +25,7 @@ async function main() {
 `
   }, '')
 
-  fs.writeFileSync(path.join(__dirname, '../src/browsers.js'), `/**
+  fs.writeFileSync(path.join(__dirname, '../src/browsers/index.js'), `/**
  * THIS FILE IS AUTOMATICALLY GENERATED
  * DONT CHANGE ANYTHING MANUALLY
  */

scripts/create-browsers.js

@@ -1,18 +1,18 @@
 import path from 'path'
 import Hookable from 'hable'
 import onExit from 'signal-exit'
-import BrowserError from './utils/error'
-import { Xvfb, StaticServer } from './utils/commands'
-import { browsers } from './browsers'
+import { Xvfb, StaticServer } from '../commands'
 import {
   abstractGuard,
   loadDependency,
   isMockedFunction,
   disableTimers,
   enableTimers,
   getBrowserConfigFromString,
-  getBrowserImportFromConfig
-} from './utils'
+  getBrowserImportFromConfig,
+  BrowserError
+} from '../utils'
+import { browsers } from '.'
 
 export default class Browser extends Hookable {
   constructor(config = {}) {

src/browser.js renamed to src/browsers/browser.js

@@ -1,4 +1,4 @@
-import BrowserStackLocal from '../utils/commands/browserstack-local'
+import BrowserStackLocal from '../../commands/browserstack-local'
 import BrowserStackBrowser from './'
 
 export default class BrowserStackLocalBrowser extends BrowserStackBrowser {

src/browserstack/index.js renamed to src/browsers/browserstack/index.js

@@ -1,7 +1,7 @@
-import ChromeDetector from '../utils/detectors/chrome'
+import ChromeDetector from '../../utils/detectors/chrome'
 import SeleniumBrowser from '../selenium'
 import SeleniumLogging from '../selenium/logging'
-import BrowserError from '../utils/error'
+import { BrowserError } from '../../utils'
 
 export default class ChromeSeleniumBrowser extends SeleniumLogging(SeleniumBrowser) {
   constructor(config) {

src/browserstack/local.js renamed to src/browsers/browserstack/local.js

@@ -1,19 +1,7 @@
-import BrowserError from '../utils/error'
+import { BrowserError } from '../../utils'
 import Webpage from '../webpage'
 
 export default class JsdomWebpage extends Webpage {
-  async wrapWithGlobals(fn) {
-    global.window = this.window
-    global.document = this.document
-
-    const ret = await fn()
-
-    delete global.window
-    delete global.document
-
-    return ret
-  }
-
   async open(url, readyCondition = 'body') {
     const jsdomOpts = this.browser.config.jsdom || {}
 
@@ -37,7 +25,7 @@ export default class JsdomWebpage extends Webpage {
       throw new BrowserError(this, err)
     }
 
-    if (options.virtualConsole === 'trues') {
+    if (options.virtualConsole === true) {
       const logLevels = this.browser.logLevels
 
       const pageConsole = new Proxy({}, {
@@ -113,11 +101,34 @@ export default class JsdomWebpage extends Webpage {
     return this.returnProxy()
   }
 
-  runScript(fn, ...args) {
-    return this.wrapWithGlobals(() => fn(...args))
+  async wrapWithGlobals(fn) {
+    global.window = this.window
+    global.document = this.document
+
+    const ret = await fn()
+
+    delete global.window
+    delete global.document
+
+    return ret
+  }
+
+  getBabelPresetOptions(...args) {
+    const presetOptions = super.getBabelPresetOptions(...args)
+
+    presetOptions.targets = {
+      node: 'current'
+    }
+
+    return presetOptions
   }
 
-  runAsyncScript(fn, ...args) {
+  runScript(fn, ...args) {
+    if (typeof fn === 'object') {
+      // eslint-disable-next-line no-new-func
+      fn = new Function(...fn.args, fn.body)
+    }
+
     return this.wrapWithGlobals(() => fn(...args))
   }
 
@@ -135,11 +146,22 @@ export default class JsdomWebpage extends Webpage {
       return Promise.resolve(null)
     }
 
-    return Promise.resolve(pageFunction(el, ...args))
+    return this.wrapWithGlobals(() => pageFunction(el, ...args))
   }
 
   getElementsFromPage(pageFunction, selector, ...args) {
     const els = Array.from(this.document.querySelectorAll(selector))
-    return Promise.resolve(pageFunction(els, ...args))
+    return this.wrapWithGlobals(() => pageFunction(els, ...args))
+  }
+
+  clickElement(selector) {
+    /* istanbul ignore next */
+    const pageFn = (el) => {
+      const event = new window.Event('click')
+      el.dispatchEvent(event)
+
+      return new Promise(resolve => setTimeout(resolve, 500))
+    }
+    return this.getElementFromPage(pageFn, selector)
   }
 }

src/chrome/browserstack/index.js renamed to src/browsers/chrome/browserstack/index.js

@@ -1,6 +1,6 @@
-import ChromeDetector from '../utils/detectors/chrome'
+import ChromeDetector from '../../utils/detectors/chrome'
 import Browser from '../browser'
-import BrowserError from '../utils/error'
+import { BrowserError } from '../../utils'
 import Webpage from './webpage'
 
 export default class PuppeteerCoreBrowser extends Browser {

src/chrome/browserstack/local.js renamed to src/browsers/chrome/browserstack/local.js

@@ -0,0 +1,49 @@
+import Webpage from '../webpage'
+import { parseFunction } from '../../utils'
+
+export default class PuppeteerWebpage extends Webpage {
+  async open(url, readyCondition = 'body') {
+    this.page = await this.driver.newPage()
+
+    await this.browser.callHook('page:created', this.page)
+
+    await this.page.goto(url)
+
+    if (readyCondition) {
+      await this.page.waitFor(readyCondition)
+    }
+
+    return this.returnProxy()
+  }
+
+  runScript(pageFunction, ...args) {
+    let parsedFn
+    if (typeof pageFunction === 'function') {
+      parsedFn = parseFunction(pageFunction, args, this.getBabelPresetOptions())
+    } else {
+      parsedFn = pageFunction
+    }
+
+    // It would be bettter to return undefined when no el exists,
+    // but selenium always returns null for undefined so better to keep
+    // the return value consistent
+    return this.page.evaluate(
+      /* istanbul ignore next */
+      function (fn, ...args) {
+        return (new (Function.bind.apply(Function, fn))()).apply(null, [].concat(args))
+      },
+      [null, ...parsedFn.args, parsedFn.body],
+      ...args
+    )
+  }
+
+  getHtml() {
+    /* istanbul ignore next */
+    const pageFn = () => window.document.documentElement.outerHTML
+    return this.page.evaluate(pageFn)
+  }
+
+  getTitle() {
+    return this.page.title()
+  }
+}

src/chrome/index.js renamed to src/browsers/chrome/index.js

@@ -1,6 +1,6 @@
 import SeleniumBrowser from '../selenium'
 import SeleniumLogging from '../selenium/logging'
-import BrowserError from '../utils/error'
+import { BrowserError } from '../../utils'
 
 export default class SauceLabsBrowser extends SeleniumLogging(SeleniumBrowser) {
   /* istanbul ignore next */

src/chrome/puppeteer.js renamed to src/browsers/chrome/puppeteer.js

@@ -1,5 +1,5 @@
 import Webpage from '../webpage'
-import { parseFunction } from '../utils'
+import { parseFunction } from '../../utils'
 
 export default class SeleniumWebpage extends Webpage {
   async open(url, readyCondition = 'body') {
@@ -26,7 +26,12 @@ export default class SeleniumWebpage extends Webpage {
   }
 
   runScript(fn, ...args) {
-    const parsedFn = parseFunction(fn, this.getBabelPresetOptions())
+    let parsedFn
+    if (typeof fn === 'function') {
+      parsedFn = parseFunction(fn, this.getBabelPresetOptions())
+    } else {
+      parsedFn = fn
+    }
 
     const argStr = parsedFn.args.reduce((acc, v, i) => `${acc}var ${v} = arguments[${i}]; `, '')
     const script = `${argStr}
@@ -36,12 +41,18 @@ export default class SeleniumWebpage extends Webpage {
   }
 
   runAsyncScript(fn, ...args) {
-    const parsedFn = parseFunction(fn, this.getBabelPresetOptions())
+    let parsedFn
+    if (typeof fn === 'function') {
+      parsedFn = parseFunction(fn, this.getBabelPresetOptions())
+    } else {
+      parsedFn = fn
+    }
 
     const argStr = parsedFn.args.reduce((acc, v, i) => `${acc}var ${v} = arguments[${i}]; `, '')
     const script = `${argStr}
-    var callback = arguments[arguments.length - 1];
-    var retVal = (function() { ${parsedFn.body} })()
+    var args = [].slice.call(arguments)
+    var callback = args.pop()
+    var retVal = (function() { ${parsedFn.body} }).apply(null, args)
     if (retVal && retVal.then) {
       retVal.then(callback)
     } else {

src/chrome/selenium.js renamed to src/browsers/chrome/selenium.js

@@ -1,5 +1,4 @@
-import BrowserError from './utils/error'
-import { abstractGuard, parseFunction, getDefaultHtmlCompiler } from './utils'
+import { BrowserError, abstractGuard, parseFunction, getDefaultHtmlCompiler } from '../utils'
 
 export default class Webpage {
   constructor(browser) {
@@ -58,7 +57,7 @@ export default class Webpage {
     return this._htmlCompiler
   }
 
-  getBabelPresetOptions() {
+  getBabelPresetOptions({ polyfills = false } = {}) {
     const presetOptions = {}
 
     const browser = this.browser.getBrowser()
@@ -70,6 +69,10 @@ export default class Webpage {
       }
     }
 
+    if (polyfills) {
+      presetOptions.useBuiltIns = polyfills === true ? 'usage' : polyfills
+    }
+
     return presetOptions
   }
 

src/edge/browserstack/index.js renamed to src/browsers/edge/browserstack/index.js

@@ -1,7 +1,7 @@
 import path from 'path'
 import kill from 'tree-kill'
 import onExit from 'signal-exit'
-import { loadDependency } from '..'
+import { loadDependency } from '../utils'
 
 const consola = console // eslint-disable-line no-console
 
@@ -55,6 +55,7 @@ export default class BrowserStackLocal {
       // practically the same
       kill(pid, 'SIGTERM', (error) => {
         if (error) {
+          /* istanbul ignore next */
           reject(error)
         }
 

src/edge/browserstack/local.js renamed to src/browsers/edge/browserstack/local.js

@@ -1,5 +1,5 @@
 import http from 'http'
-import { loadDependency } from '..'
+import { loadDependency } from '../utils'
 
 export default class StaticServer {
   static async loadDependencies() {