fix: stale element refetching

When an element is stale WebdriverIO will attempt to refetch it when a
command is run on it, such as a click.

Since WebElement JSONs are used directly to create the WebdriverIO
elements they do not have a selector which is used to attempt to refetch
them.

Custom locator strategies are able to add a selector to the resulting
element but still fail to refetch and cause problems with within for
unknown reasons. In future this may be a viable solution but not
currently.

Use SimmerJS to generate a unique selector for the element and send that
back from the browser, then use the selector as a string selector for $.

Using SimmerJS has the negative that much more text is being sent
between the browser and WebdriverIO.

Author: olivierwilkinson

package.json

@@ -28,12 +28,14 @@
   "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",

src/index.ts

@@ -29,17 +29,28 @@ 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) {
+  if (shouldInject.domTestingLibrary) {
     await container.execute(DOM_TESTING_LIBRARY_UMD)
   }
 
+  if (shouldInject.simmer) {
+    await container.execute(SIMMERJS)
+  }
+
   if (_config) {
     await container.execute(function (config: Config) {
       window.TestingLibraryDom.configure(config)
@@ -71,7 +82,7 @@ function executeQuery(
   container: HTMLElement,
   ...args: any[]
 ) {
-  const done = args.pop() as (result: any) => void;
+  const done = args.pop() as (result: any) => void
 
   // @ts-ignore
   function deserializeObject(object) {
@@ -104,25 +115,20 @@ function executeQuery(
       waitForOptions,
     ),
   )
-    .then(done)
+    .then((result) => {
+      if (!result) {
+        return done(null)
+      }
+      if (Array.isArray(result)) {
+        return done(
+          result.map((element) => ({selector: window.Simmer(element)})),
+        )
+      }
+      return done({selector: window.Simmer(result)})
+    })
     .catch((e) => done(e.message))
 }
 
-/*
-Always include element key "element-6066-11e4-a52e-4f735466cecf": WebdriverIO
-checks whether this key is a string to determine if the selector is actually a
-WebElement JSON. If the selector is a WebElement JSON it uses it to create a new
-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) {
-  return container.$({
-    'element-6066-11e4-a52e-4f735466cecf': '',
-    ...elementValue,
-  })
-}
-
 function createQuery(element: ElementBase, queryName: string) {
   return async (...args: any[]) => {
     await injectDOMTestingLibrary(element)
@@ -143,10 +149,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(({selector}) => element.$(selector)))
     }
 
-    return createElement(element, result)
+    return element.$(result.selector)
   }
 }
 

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/async/queries.e2e.ts

@@ -1,3 +1,5 @@
+import refetchElement from 'webdriverio/build/utils/refetchElement'
+
 import {setupBrowser} from '../../src'
 
 describe('queries', () => {
@@ -157,4 +159,14 @@ 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')),
+    )
+  })
 })