resolve PR comments

Author: olivierwilkinson

package.json

@@ -32,12 +32,14 @@
   "license": "ISC",
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@testing-library/dom": "^8.17.1"
+    "@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.12.1",

src/index.ts

@@ -39,12 +39,17 @@ const DOM_TESTING_LIBRARY_UMD = fs
   .toString()
   .replace('define.amd', 'false') // Never inject DTL using AMD define function
 
+const SIMMERJS = fs
+  .readFileSync(require.resolve('simmerjs/dist/simmer.js'))
+  .toString()
+
 let _config: Partial<Config>
 
 async function injectDOMTestingLibrary(container: ElementBase) {
   const shouldInject = await container.parent.execute(function () {
     return {
-      domTestingLibrary: !window.TestingLibraryDom
+      domTestingLibrary: !window.TestingLibraryDom,
+      simmer: !window.Simmer,
     }
   })
 
@@ -62,6 +67,10 @@ async function injectDOMTestingLibrary(container: ElementBase) {
     }, DOM_TESTING_LIBRARY_UMD)
   }
 
+  if (shouldInject.simmer) {
+    await container.parent.execute(SIMMERJS)
+  }
+
   await container.parent.execute(function (config: Config) {
     window.TestingLibraryDom.configure(config)
   }, _config)
@@ -145,17 +154,24 @@ function executeQuery(
       return done(null)
     }
 
-    const elementIdAttributeName = 'data-wdio-testing-lib-element-id';
-    const makeSelectorResult = (element: HTMLElement) => {
-      let elementId = element.getAttribute(elementIdAttributeName);
-      if (elementId == null) {
-        const idSequence = window.TestingLibraryDom.idSequence ?? 10000;
-        window.TestingLibraryDom.idSequence = idSequence + 1;
-        elementId = `${idSequence}`;
+    function makeSelectorResult(element: HTMLElement) {
+      // use simmer if possible to allow element refetching by position, otherwise
+      // situations such as a React key change causes refetching to fail.
+      const selector = window.Simmer(element)
+      if (selector) return {selector}
+
+      // use generated element id as selector if Simmer fails
+      const elementIdAttributeName = 'data-wdio-testing-lib-element-id'
+      let elementId = element.getAttribute(elementIdAttributeName)
+
+      // if id doesn't already exist create one and add it to element
+      if (!elementId) {
+        elementId = (Math.abs(Math.random()) * 1000000000000).toFixed(0)
         element.setAttribute(elementIdAttributeName, elementId)
       }
-      return ({selector: `[${elementIdAttributeName}="${elementId}"]`})
-    };
+
+      return {selector:`[${elementIdAttributeName}="${elementId}"]`}
+    }
 
     if (Array.isArray(result)) {
       return done(result.map(makeSelectorResult));
@@ -165,13 +181,6 @@ function executeQuery(
   })()
 }
 
-async function findElement(
-    container: ElementBase,
-    result: { selector: string },
-): Promise<WebdriverIO.Element> {
-  return container.$(result.selector)
-}
-
 function createQuery(container: ElementBase, queryName: QueryName) {
   return async (...args: QueryArg[]) => {
     await injectDOMTestingLibrary(container)
@@ -193,10 +202,10 @@ function createQuery(container: ElementBase, queryName: QueryName) {
     }
 
     if (Array.isArray(result)) {
-      return Promise.all(result.map(findElement.bind(null, container)))
+      return Promise.all(result.map(({ selector }) => container.$(selector)))
     }
 
-    return findElement(container, result)
+    return container.$(result.selector)
   }
 }