feat: retry assertion that follows xpath command (#12)

* chore: refactor get value

* feat: add retries, close #3

Author: bahmutov

README.md

@@ -25,12 +25,14 @@ it('finds list items', () => {
 })
 ```
 
+**note:** you can test XPath expressions from DevTools console using `$x(...)` function, for example `$x('//div')` to find all divs.
+
 See [cypress/integration/spec.js](cypress/integration/spec.js)
 
 ## Roadmap
 
 - [x] wrap returned DOM nodes in jQuery [#2](https://github.com/cypress-io/cypress-xpath/issues/2)
-- [ ] retry the assertion that follows [#3](https://github.com/cypress-io/cypress-xpath/issues/3)
+- [x] retry the assertion that follows [#3](https://github.com/cypress-io/cypress-xpath/issues/3)
 - [ ] add TypeScript definitions [#4](https://github.com/cypress-io/cypress-xpath/issues/4)
 - [ ] search from the previous subject element [#5](https://github.com/cypress-io/cypress-xpath/issues/5)
 

cypress/integration/index.html

@@ -2,4 +2,10 @@
   <main>
     <h1>cypress-xpath</h1>
   </main>
+  <script>
+    setTimeout(() => {
+      document.querySelector('main').insertAdjacentHTML('afterend',
+        '<div id="inserted">inserted text</div>')
+    }, 1000)
+  </script>
 </body>

cypress/integration/spec.js

@@ -24,6 +24,11 @@ describe('cypress-xpath', () => {
       cy.xpath('//h1/text()').its('0.textContent').should('equal', 'cypress-xpath')
     })
 
+    it('retries until element is inserted', () => {
+      // the element will be inserted after 1 second
+      cy.xpath('string(//*[@id="inserted"])').should('equal', 'inserted text')
+    })
+
     describe('primitives', () => {
       it('counts h1 elements', () => {
         cy.xpath('count(//h1)').should('equal', 1)

src/index.js

@@ -13,7 +13,7 @@
   })
  ```
  */
-const xpath = (selector) => {
+const xpath = (selector, options = {}) => {
   /* global XPathResult */
   const isNumber = (xpathResult) => xpathResult.resultType === XPathResult.NUMBER_TYPE
   const numberResult = (xpathResult) => xpathResult.numberValue
@@ -24,87 +24,96 @@ const xpath = (selector) => {
   const isBoolean = (xpathResult) => xpathResult.resultType === XPathResult.BOOLEAN_TYPE
   const booleanResult = (xpathResult) => xpathResult.booleanValue
 
-  let nodes = []
-  const document = cy.state('window').document
-  let iterator = document.evaluate(selector, document)
-
-  if (isNumber(iterator)) {
-    const result = numberResult(iterator)
-    Cypress.log({
-      name: 'xpath',
-      message: selector,
-      $el: nodes,
-      consoleProps () {
+  const isPrimitive = (x) =>
+    Cypress._.isNumber(x) || Cypress._.isString(x) || Cypress._.isBoolean(x)
+
+  // options to log later
+  const log = {
+    name: 'xpath',
+    message: selector,
+  }
+
+  const getValue = () => {
+    let nodes = []
+    const document = cy.state('window').document
+    let iterator = document.evaluate(selector, document)
+
+    if (isNumber(iterator)) {
+      const result = numberResult(iterator)
+      log.consoleProps = () => {
         return {
           'XPath': selector,
           type: 'number',
           result
         }
-      },
-    })
-    return result
-  }
+      }
+      return result
+    }
 
-  if (isString(iterator)) {
-    const result = stringResult(iterator)
-    Cypress.log({
-      name: 'xpath',
-      message: selector,
-      $el: nodes,
-      consoleProps () {
+    if (isString(iterator)) {
+      const result = stringResult(iterator)
+      log.consoleProps = () => {
         return {
           'XPath': selector,
           type: 'string',
           result
         }
-      },
-    })
-    return result
-  }
+      }
+      return result
+    }
 
-  if (isBoolean(iterator)) {
-    const result = booleanResult(iterator)
-    Cypress.log({
-      name: 'xpath',
-      message: selector,
-      $el: nodes,
-      consoleProps () {
+    if (isBoolean(iterator)) {
+      const result = booleanResult(iterator)
+      log.consoleProps = () => {
         return {
           'XPath': selector,
           type: 'boolean',
           result
         }
-      },
-    })
-    return result
-  }
+      }
+      return result
+    }
+
+    try {
+      let node = iterator.iterateNext()
+
+      while (node) {
+        nodes.push(node)
+        node = iterator.iterateNext()
+      }
+
+      log.consoleProps = () => {
+        return {
+          'XPath': selector,
+        }
+      }
 
-  try {
-    let node = iterator.iterateNext()
+      return nodes
+    } catch (e) {
+      console.error('Document tree modified during iteration', e)
 
-    while (node) {
-      nodes.push(node)
-      node = iterator.iterateNext()
+      return null
     }
-  } catch (e) {
-    console.error('Document tree modified during iteration', e)
+  }
 
-    return null
+  const resolveValue = () => {
+    return Cypress.Promise.try(getValue).then(value => {
+      return cy.verifyUpcomingAssertions(value, options, {
+        onRetry: resolveValue,
+      })
+    })
   }
 
-  // TODO set found elements on the command log?
-  Cypress.log({
-    name: 'xpath',
-    message: selector,
-    $el: nodes,
-    consoleProps () {
-      return {
-        'XPath': selector,
-      }
-    },
+  return resolveValue().then((value) => {
+    // TODO set found elements on the command log?
+    Cypress.log(log)
+    if (isPrimitive(value)) {
+      return value
+    }
+    return Cypress.$(value)
   })
 
-  return Cypress.$(nodes)
+
 }
 
 Cypress.Commands.add('xpath', xpath)