Merge pull request #5 from dilpreetj/dilpreetj/4/prefer-aria-over-xpath

4 | Prefer aria selector over xpath when both are available

Author: christian-bromann

src/stringifyExtension.ts

@@ -270,16 +270,7 @@ export class StringifyExtension extends PuppeteerStringifyExtension {
         if (idSelector) return idSelector
 
         /**
-         * use xPath selector if available
-         */
-        const xPathSelector = findByCondition(
-            selectors,
-            (s) => s.startsWith(XPATH_PREFIX)
-        )
-        if (xPathSelector) return `"${xPathSelector.slice(XPATH_PREFIX.length + 1)}`
-
-        /**
-         * use WebdriverIOs aria selector
+         * Use WebdriverIOs aria selector as second option
          * https://webdriver.io/docs/selectors#accessibility-name-selector
          */
         const ariaSelector = findByCondition(
@@ -291,6 +282,15 @@ export class StringifyExtension extends PuppeteerStringifyExtension {
         // Remove Aria selectors
         const nonAriaSelectors = this.filterArrayByString(selectors, ARIA_PREFIX)
 
+        /**
+         * use xPath selector if aria selector is not available
+         */
+        const xPathSelector = findByCondition(
+            selectors,
+            (s) => s.startsWith(XPATH_PREFIX)
+        )
+        if (xPathSelector) return `"${xPathSelector.slice(XPATH_PREFIX.length + 1)}`
+
         let preferredSelector
 
         // Give preference to user selector

test/stringifyExtension.test.ts

@@ -87,7 +87,7 @@ describe('StringifyExtension', () => {
         expect(writer.toString()).toBe('await browser.$("#heading").setValue("webdriverio")\n')
     })
 
-    it('should prefer xPath selector', async () => {
+    it('should prefer aria selector over xpath', async () => {
         const ext = new StringifyExtension()
         const step = {
             type: StepType.Change as const,
@@ -98,7 +98,7 @@ describe('StringifyExtension', () => {
         const flow = { title: 'change step', steps: [step] }
         const writer = new InMemoryLineWriter('  ')
         await ext.stringifyStep(writer, step, flow)
-        expect(writer.toString()).toBe('await browser.$("//*[@data-test=\\"heading\\"]").setValue("webdriverio")\n')
+        expect(writer.toString()).toBe('await browser.$("aria/Search").setValue("webdriverio")\n')
     })
 
     it('should prefer link text selectors', async () => {