feat: add jsdom browser

Author: pimlie

.circleci/config.yml

@@ -104,6 +104,19 @@ jobs:
           environment:
             BROWSER_STRING: chrome/browserstack/local
 
+  test-e2e-jsdom:
+    docker:
+        - image: circleci/node
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: E2E Tests
+          command: yarn test:e2e --coverage && yarn coverage
+          environment:
+            BROWSER_STRING: jsdom
+
 workflows:
   version: 2
 
@@ -116,3 +129,4 @@ workflows:
       - test-e2e-firefox:       { requires: [lint] }
       - test-e2e-chrome:        { requires: [lint] }
       - test-e2e-browserstack:  { requires: [lint] }
+      - test-e2e-jsdom:  { requires: [lint] }

package.json

@@ -66,6 +66,7 @@
     "geckodriver": "^1.16.2",
     "glob": "^7.1.4",
     "jest": "^24.8.0",
+    "jsdom": "^15.1.1",
     "lodash.defaultsdeep": "^4.6.1",
     "node-env-file": "^0.1.8",
     "puppeteer": "^1.18.1",
@@ -85,6 +86,7 @@
     "chromedriver": "^75.1.0",
     "express": "^4.17.1",
     "geckodriver": "^1.16.2",
+    "jsdom": "^15.1.1",
     "puppeteer": "^1.18.1",
     "puppeteer-core": "^1.18.1",
     "selenium-webdriver": "^4.0.0-alpha.1",

src/browser.js

@@ -223,6 +223,12 @@ The browser probably won't ever start with globally mocked timers. Will try to a
     return this.ready
   }
 
+  _start() {}
+
+  _close() {}
+
+  _page() {}
+
   async start(capabilities, ...args) {
     await this.callHook('start:before')
 

src/browsers.js

@@ -25,6 +25,7 @@ export const browsers = {
   'ie/browserstack': () => _interopDefault(import('./ie/browserstack')),
   'ie/browserstack/local': () => _interopDefault(import('./ie/browserstack/local')),
   'ie/selenium': () => _interopDefault(import('./ie/selenium')),
+  'jsdom': () => _interopDefault(import('./jsdom')),
   'puppeteer': () => _interopDefault(import('./puppeteer')),
   'puppeteer/core': () => _interopDefault(import('./puppeteer/core')),
   'safari': () => _interopDefault(import('./safari')),

src/jsdom/index.js

@@ -0,0 +1,46 @@
+import Browser from '../browser'
+import Webpage from './webpage'
+
+export default class JsdomBrowser extends Browser {
+  constructor(config = {}) {
+    config.xvfb = false
+
+    super(config)
+
+    this.config.jsdom = this.config.jsdom || {}
+
+    this.logLevels = []
+  }
+
+  async _loadDependencies() {
+    if (!JsdomBrowser.jsdom) {
+      JsdomBrowser.jsdom = await this.loadDependency('jsdom')
+    }
+
+    // call super after setting core
+    super._loadDependencies()
+  }
+
+  setHeadless() {
+    this.config.jsdom.pretendToBeVisual = false
+  }
+
+  setLogLevel(types) {
+    this.config.jsdom.virtualConsole = true
+
+    if (types && typeof types === 'string') {
+      types = [types]
+    }
+
+    this.logLevels = types
+  }
+
+  _start() {
+    this.driver = JsdomBrowser.jsdom
+  }
+
+  _page(url, readyCondition) {
+    const page = new Webpage(this)
+    return page.open(url, readyCondition)
+  }
+}

src/jsdom/webpage.js

@@ -0,0 +1,145 @@
+import BrowserError from '../utils/error'
+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 || {}
+
+    const options = {
+      resources: 'usable',
+      runScripts: 'dangerously',
+      virtualConsole: false,
+      pretendToBeVisual: true,
+      beforeParse(window) {
+        // Mock window.scrollTo
+        window.scrollTo = () => {}
+
+        if (typeof jsdomOpts.beforeParse === 'function') {
+          jsdomOpts.beforeParse(window)
+        }
+      },
+      ...jsdomOpts
+    }
+
+    const onJsdomError = (err) => {
+      throw new BrowserError(this, err)
+    }
+
+    if (options.virtualConsole === 'trues') {
+      const logLevels = this.browser.logLevels
+
+      const pageConsole = new Proxy({}, {
+        get(target, type) {
+          if (logLevels.includes(type)) {
+            return console[type] // eslint-disable-line no-console
+          }
+
+          return _ => _
+        }
+      })
+
+      const virtualConsole = new this.driver.VirtualConsole()
+      virtualConsole.on('jsdomError', onJsdomError)
+      virtualConsole.sendTo(pageConsole)
+
+      options.virtualConsole = virtualConsole
+    } else {
+      delete options.virtualConsole
+    }
+
+    if (url.startsWith('file://')) {
+      this.page = await this.driver.JSDOM.fromFile(url.substr(7), options)
+    } else {
+      this.page = await this.driver.JSDOM.fromURL(url, options)
+    }
+
+    await this.browser.callHook('page:created', this.page)
+
+    this.browser.hook('close:before', () => {
+      if (options.virtualConsole) {
+        options.virtualConsole.removeListener('jsdomError', onJsdomError)
+      }
+
+      this.page.window.close()
+    })
+
+    this.window = this.page.window
+    this.document = this.page.window.document
+
+    if (readyCondition) {
+      const t = this
+      await new Promise((resolve, reject) => {
+        let iter = 1
+
+        async function waitForElement() {
+          let isReady
+
+          if (typeof readyCondition === 'function') {
+            isReady = await t.wrapWithGlobals(readyCondition)
+          } else {
+            isReady = !!t.document.querySelector(readyCondition)
+          }
+
+          if (isReady) {
+            resolve()
+            return
+          }
+
+          if (iter > 100) {
+            reject(new BrowserError(t, `Timeout reached on waiting for readyCondition: ${readyCondition}`))
+            return
+          }
+
+          setTimeout(waitForElement, 100)
+          iter++
+        }
+
+        waitForElement()
+      })
+    }
+
+    return this.returnProxy()
+  }
+
+  runScript(fn, ...args) {
+    return this.wrapWithGlobals(() => fn(...args))
+  }
+
+  runAsyncScript(fn, ...args) {
+    return this.wrapWithGlobals(() => fn(...args))
+  }
+
+  getHtml() {
+    return this.document.documentElement.outerHTML
+  }
+
+  getTitle() {
+    return this.document.title
+  }
+
+  getElementFromPage(pageFunction, selector, ...args) {
+    const el = this.document.querySelector(selector)
+    if (!el) {
+      return Promise.resolve(null)
+    }
+
+    return Promise.resolve(pageFunction(el, ...args))
+  }
+
+  getElementsFromPage(pageFunction, selector, ...args) {
+    const els = Array.from(this.document.querySelectorAll(selector))
+    return Promise.resolve(pageFunction(els, ...args))
+  }
+}

src/selenium/webpage.js

@@ -7,12 +7,15 @@ export default class SeleniumWebpage extends Webpage {
 
     await this.browser.callHook('page:created', this.driver)
 
-    SeleniumWebpage.By = this.browser.constructor.webdriver.By
-    SeleniumWebpage.until = this.browser.constructor.webdriver.until
+    if (!SeleniumWebpage.By) {
+      SeleniumWebpage.By = this.browser.constructor.webdriver.By
+      SeleniumWebpage.Condition = this.browser.constructor.webdriver.Condition
+      SeleniumWebpage.until = this.browser.constructor.webdriver.until
+    }
 
     if (readyCondition) {
       if (typeof readyCondition === 'function') {
-        await this.driver.wait(readyCondition)
+        await this.driver.wait(this.runScript(readyCondition))
       } else {
         const el = await SeleniumWebpage.until.elementLocated(SeleniumWebpage.By.css(readyCondition))
         await SeleniumWebpage.until.elementIsVisible(el)

src/utils/constants.js

@@ -6,6 +6,7 @@ export const browsers = [
   'chrome',
   'firefox',
   'ie',
+  'jsdom',
   'edge',
   'safari'
 ]

test/e2e/basic.test.js

@@ -76,49 +76,7 @@ describe(browserString, () => {
         }
       }, false)
 
-      // attempts to get some logging from Firefox (NOTHING WORKS FOR ME ATM)
-      if (browserString.includes('firefox')) {
-        /* browser.hook('selenium:build:before', (builder) => {
-          const service = new browser.constructor.client.ServiceBuilder()
-          service.enableVerboseLogging(true)
-          builder.setFirefoxService(service)
-        })
-
-        browser.hook('selenium:build:options', (options, builder, browserInstance) => {
-          options.setPreference('marionette.logging', 'TRACE')
-          options.setPreference('devtools.console.stdout.content', true)
-        })/**/
-
-        /*
-        browser.hook('start:after', async (driver) => {
-          await driver.installAddon(path.join(__dirname, '../utils/webconsoletap-1.0-fx.xpi'))
-        })
-
-        browser.hook('webpage:property', async (property) => {
-          if (!property.startsWith('get')) {
-            // dont run this on page fn's called in this hook itself
-            return
-          }
-
-          const consoleLogs = await page.runAsyncScript(() => {
-            window.console.requestDump()
-
-            var consoleLogs
-            function dumpTimeout(fn) {
-              setTimeout(() => {
-                consoleLogs = window.console.getDump()
-                if (consoleLogs === null) {
-                  dumpTimeout(fn)
-                } else {
-                  fn(consoleLogs)
-                }
-              }, 50)
-            }
-            return new Promise(resolve => dumpTimeout(resolve))
-          })
-        })
-        */
-      }
+      browser.setLogLevel(['warn', 'error', 'info', 'log'])
 
       await browser.start()
     } catch (e) {
@@ -150,7 +108,7 @@ describe(browserString, () => {
 
     const url = browser.getUrl(webPath)
 
-    page = await browser.page(url)
+    page = await browser.page(url, () => !!window.$vueMeta)
 
     const html = await page.getHtml()
     expect(html).toBeDefined()

test/unit/browser.test.js

@@ -32,6 +32,9 @@ const browsers = {
   'ie/browserstack/local': async (name) => {
     const browser = await standardBrowserTest(name)
   },
+  'jsdom': async (name) => {
+    const browser = await standardBrowserTest(name)
+  },
   'edge': async (name) => {
     await expect(createBrowser(name)).rejects.toThrow()
   },