Merge branch 'master' into patch-1

Author: MichaelDeBoey

.github/workflows/webdriverio-testing-library.yml

@@ -15,12 +15,6 @@ jobs:
         os: [ubuntu-latest]
         node: [12, 14]
     steps:
-      - uses: nanasess/setup-chromedriver@master
-        with:
-          chromedriver-version: '79.0.3945.36'
-      - run: |
-          export DISPLAY=:99
-          sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional
       - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}

package.json

@@ -28,27 +28,28 @@
   "license": "ISC",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@testing-library/dom": "^7.0.4"
+    "@testing-library/dom": "^7.0.4",
+    "simmerjs": "^0.5.6"
   },
   "peerDependencies": {
     "webdriverio": "*"
   },
   "devDependencies": {
+    "@types/simmerjs": "^0.5.1",
     "@typescript-eslint/eslint-plugin": "^4.14.0",
     "@typescript-eslint/parser": "^4.14.0",
     "@wdio/cli": "^7.3.1",
     "@wdio/local-runner": "^7.3.1",
     "@wdio/mocha-framework": "^7.3.1",
+    "@wdio/selenium-standalone-service": "^7.7.3",
     "@wdio/spec-reporter": "^7.3.1",
     "@wdio/sync": "^7.3.1",
-    "chromedriver": "^89.0.0",
     "eslint": "^7.6.0",
     "kcd-scripts": "^5.0.0",
     "npm-run-all": "^4.1.5",
     "semantic-release": "^17.0.2",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.3",
-    "wdio-chromedriver-service": "^7.0.0"
+    "typescript": "^4.1.3"
   },
   "repository": {
     "type": "git",

src/index.ts

@@ -3,6 +3,7 @@
 import path from 'path'
 import fs from 'fs'
 import {queries as baseQueries} from '@testing-library/dom'
+import 'simmerjs'
 
 import {
   BrowserBase,
@@ -29,15 +30,36 @@ const DOM_TESTING_LIBRARY_UMD = fs
   .readFileSync(DOM_TESTING_LIBRARY_UMD_PATH)
   .toString()
 
+const SIMMERJS = fs
+  .readFileSync(require.resolve('simmerjs/dist/simmer.js'))
+  .toString()
+
 let _config: Partial<Config>
 
 async function injectDOMTestingLibrary(container: ElementBase) {
   const shouldInject = await container.execute(function () {
-    return !window.TestingLibraryDom
+    return {
+      domTestingLibrary: !window.TestingLibraryDom,
+      simmer: !window.Simmer,
+    }
   })
 
-  if (shouldInject) {
-    await container.execute(DOM_TESTING_LIBRARY_UMD)
+  if (shouldInject.domTestingLibrary) {
+    await container.execute(function (library) {
+      // add DOM Testing Library to page as a script tag to support Firefox
+      if (navigator.userAgent.indexOf('Firefox') !== -1) {
+        const script = document.createElement('script')
+        script.innerHTML = library
+        return document.head.append(script)
+      }
+
+      // eval library on other browsers
+      return eval(library)
+    }, DOM_TESTING_LIBRARY_UMD)
+  }
+
+  if (shouldInject.simmer) {
+    await container.execute(SIMMERJS)
   }
 
   if (_config) {
@@ -67,18 +89,19 @@ function serializeArg(arg: any) {
 }
 
 function executeQuery(
-  [query, container, ...args]: [QueryName, HTMLElement, ...any[]],
-  done: (result: any) => void,
+  query: QueryName,
+  container: HTMLElement,
+  ...args: any[]
 ) {
-  // @ts-ignore
-  function deserializeObject(object) {
+  const done = args.pop() as (result: any) => void
+
+  function deserializeObject(object: object): object {
     return Object.entries(object)
       .map(([key, value]) => [key, deserializeArg(value)])
       .reduce((acc, [key, value]) => ({...acc, [key]: value}), {})
   }
 
-  // @ts-ignore
-  function deserializeArg(arg) {
+  function deserializeArg(arg: any) {
     if (arg && arg.RegExp) {
       return eval(arg.RegExp)
     }
@@ -93,16 +116,40 @@ function executeQuery(
 
   const [matcher, options, waitForOptions] = args.map(deserializeArg)
 
-  Promise.resolve(
-    window.TestingLibraryDom[query](
-      container,
-      matcher,
-      options,
-      waitForOptions,
-    ),
-  )
-    .then(done)
-    .catch((e) => done(e.message))
+  ;(async () => {
+    let result: undefined | null | HTMLElement | HTMLElement[]
+    try {
+      // Override RegExp to fix 'matcher instanceof RegExp' check on Firefox
+      window.RegExp = RegExp
+
+      result = await window.TestingLibraryDom[query](
+        container,
+        matcher,
+        options,
+        waitForOptions,
+      )
+    } catch (e) {
+      done(e.message)
+    }
+
+    if (!result) {
+      return done(null)
+    }
+
+    if (Array.isArray(result)) {
+      return done(
+        result.map((element) => ({
+          selector: window.Simmer(element),
+          element,
+        })),
+      )
+    }
+
+    return done({
+      selector: window.Simmer(result),
+      element: result,
+    })
+  })()
 }
 
 /*
@@ -113,22 +160,32 @@ Element. There are valid WebElement JSONs that exclude the key but can be turned
 into Elements, such as { ELEMENT: elementId }; this can happen in setups that
 aren't generated by @wdio/cli.
 */
-function createElement(container: ElementBase, elementValue: any) {
+function createElement(
+  container: ElementBase,
+  result: {selector: string | false; element: any},
+) {
+  // use selector if possible so that element can be refetched
+  if (result.selector) {
+    return container.$(result.selector)
+  }
+
+  // fallback to using WebElement JSON if selector could not be created
   return container.$({
     'element-6066-11e4-a52e-4f735466cecf': '',
-    ...elementValue,
+    ...result.element,
   })
 }
 
-function createQuery(element: ElementBase, queryName: string) {
+function createQuery(container: ElementBase, queryName: string) {
   return async (...args: any[]) => {
-    await injectDOMTestingLibrary(element)
+    await injectDOMTestingLibrary(container)
 
-    const result = await element.executeAsync(executeQuery, [
+    const result = await container.executeAsync(
+      executeQuery,
       queryName,
-      element,
+      container,
       ...args.map(serializeArg),
-    ])
+    )
 
     if (typeof result === 'string') {
       throw new Error(result)
@@ -139,10 +196,10 @@ function createQuery(element: ElementBase, queryName: string) {
     }
 
     if (Array.isArray(result)) {
-      return Promise.all(result.map(createElement.bind(null, element)))
+      return Promise.all(result.map(createElement.bind(null, container)))
     }
 
-    return createElement(element, result)
+    return createElement(container, result)
   }
 }
 

src/types.ts

@@ -20,10 +20,7 @@ export type ElementBase = {
     ...args: any[]
   ): Promise<T>
 
-  execute<T>(
-    script: string | ((...args: any[]) => T),
-    ...args: any[]
-  ): T
+  execute<T>(script: string | ((...args: any[]) => T), ...args: any[]): T
 
   executeAsync(script: string | ((...args: any[]) => void), ...args: any[]): any
 }

test-app/index.html

@@ -114,6 +114,27 @@ <h2>getAllByText</h2>
       <h2>navigate</h2>
       <a href="page2.html">Go to Page 2</a>
     </section>
+    <section>
+      <h2>Simmer</h2>
+      <div>
+        <div>
+          <div>
+            <div>
+              High depth non-specific div one
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div>
+          <div>
+            <div>
+              High depth non-specific div two
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
     <!-- Prettier unindents the script tag below -->
     <script>
       document

test/async/configure.e2e.ts

@@ -47,7 +47,7 @@ describe('configure', () => {
     await expect(() =>
       getByTestId('button-that-should-not-use-testid'),
     ).rejects.toThrowError(
-      'TestingLibraryElementError: A better query is available',
+      'A better query is available',
     )
   })
 

test/async/queries.e2e.ts

@@ -1,3 +1,5 @@
+import refetchElement from 'webdriverio/build/utils/refetchElement'
+
 import {setupBrowser} from '../../src'
 
 describe('queries', () => {
@@ -157,4 +159,26 @@ describe('queries', () => {
       /Unable to find an element with the text/,
     )
   })
+
+  it('can refetch an element', async () => {
+    const {getByText} = setupBrowser(browser)
+
+    const button = await getByText('Unique Button Text')
+
+    expect(JSON.stringify(button)).toBe(
+      JSON.stringify(await refetchElement(button, 'click')),
+    )
+  })
+
+  it('getAllBy works when Simmer cannot create a unique selector', async () => {
+    const {getAllByText} = setupBrowser(browser)
+
+    expect(await getAllByText(/High depth non-specific div/)).toHaveLength(2)
+  })
+
+  it('getBy works when Simmer cannot create a unique selector', async () => {
+    const {getByText} = setupBrowser(browser)
+
+    expect(await getByText('High depth non-specific div one')).not.toBeNull()
+  })
 })

wdio.conf.js

@@ -54,21 +54,21 @@ exports.config = {
   //
   capabilities: [
     {
-      // maxInstances can get overwritten per capability. So if you have an in-house Selenium
-      // grid with only 5 firefox instances available you can make sure that not more than
-      // 5 instances get started at a time.
       maxInstances: 5,
-      //
       browserName: 'chrome',
       acceptInsecureCerts: true,
-      // If outputDir is provided WebdriverIO can capture driver session logs
-      // it is possible to configure which logTypes to include/exclude.
-      // excludeDriverLogs: ['*'], // pass '*' to exclude all driver session logs
-      // excludeDriverLogs: ['bugreport', 'server'],
       'goog:chromeOptions': {
         args: process.env.CI ? ['--headless'] : [],
       },
     },
+    {
+      maxInstances: 5,
+      browserName: 'firefox',
+      acceptInsecureCerts: true,
+      'moz:firefoxOptions': {
+        args: process.env.CI ? ['--headless'] : [],
+      },
+    },
   ],
   //
   // ===================
@@ -77,7 +77,7 @@ exports.config = {
   // Define all options that are relevant for the WebdriverIO instance here
   //
   // Level of logging verbosity: trace | debug | info | warn | error | silent
-  logLevel: 'silent',
+  logLevel: 'warn',
   //
   // Set specific log levels per logger
   // loggers:
@@ -117,7 +117,7 @@ exports.config = {
   // Services take over a specific job you don't want to take care of. They enhance
   // your test setup with almost no effort. Unlike plugins, they don't add new
   // commands. Instead, they hook themselves up into the test process.
-  services: ['chromedriver'],
+  services: [['selenium-standalone', {drivers: {firefox: true, chrome: true}}]],
 
   // Framework you want to run your specs with.
   // The following are supported: Mocha, Jasmine, and Cucumber