strengthen up selector parsing - refs webdriverio/recorder-extension#8

Author: christian-bromann

.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 .DS_Store
 .vscode
+/*.js

Readme.md

@@ -2,7 +2,7 @@ WebdriverIO Chrome Recorder [![Build](https://github.com/webdriverio/chrome-reco
 [![npm][npm-badge]][npm]
 ===========================
 
-This repo provide tools to convert JSON user flows from [Google Chrome DevTools Recorder](https://goo.gle/devtools-recorder) to WebdriverIO test scripts programmatically.
+This repo provide tools to convert JSON user flows from [Google Chrome DevTools Recorder](https://goo.gle/devtools-recorder) to WebdriverIO test scripts programmatically (WebdriverIO `v7.24.0` or higher required).
 
 ✅ Converts multiple recordings to WebdriverIO tests in one go (out-of-the-box glob support)  
 🗂 User can pass their custom path to export tests.  

package-lock.json

@@ -38,27 +38,27 @@
   "devDependencies": {
     "@types/chai": "^4.3.3",
     "@types/inquirer": "^9.0.1",
-    "@types/node": "^18.7.6",
+    "@types/node": "^18.7.15",
     "@types/prettier": "^2.7.0",
-    "@typescript-eslint/eslint-plugin": "^5.33.1",
-    "@typescript-eslint/parser": "^5.33.1",
-    "@vitest/coverage-c8": "^0.22.1",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "@vitest/coverage-c8": "^0.23.1",
     "chai": "^4.3.6",
-    "eslint": "^8.22.0",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "npm-run-all": "^4.1.5",
-    "release-it": "^15.3.0",
+    "release-it": "^15.4.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.7.4",
-    "vitest": "^0.22.1"
+    "typescript": "^4.8.2",
+    "vitest": "^0.23.1"
   },
   "dependencies": {
-    "@puppeteer/replay": "^0.6.1",
+    "@puppeteer/replay": "^1.1.2",
     "chalk": "^5.0.1",
     "globby": "^13.1.2",
-    "inquirer": "^9.1.0",
+    "inquirer": "^9.1.1",
     "meow": "^10.1.3",
     "prettier": "^2.7.1"
   },

package.json

@@ -1,11 +1,14 @@
+import url from 'node:url'
+import path from 'node:path'
 import meow from 'meow'
 import inquirer from 'inquirer'
 
 import { expandedFiles } from '../utils.js'
-import { DEFAULT_OUTPUT_FOLDER } from '../constants.js'
 import { runTransformsOnChromeRecording } from '../transform.js'
 import type { InquirerAnswerTypes } from '../types'
 
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+
 const cli = meow(`
 
   Usage
@@ -40,15 +43,15 @@ inquirer.prompt([
         message:
             'Which directory or files should be translated from Recorder JSON to WebdriverIO?',
         when: () => !cli.input.length,
-        default: '.',
+        default: path.join(__dirname, '*.json'),
         filter: (files: string) => files.split(/\s+/).filter((f) => f.trim().length > 0)
     },
     {
         type: 'input',
         name: 'outputPath',
         message: 'Where should be exported files to be output?',
         when: () => !cli.input.length,
-        default: DEFAULT_OUTPUT_FOLDER,
+        default: process.cwd(),
     }
 ]).then((answers: InquirerAnswerTypes) => {
     const { files: recordingFiles, outputPath: outputFolder } = answers
@@ -66,7 +69,7 @@ inquirer.prompt([
 
     return runTransformsOnChromeRecording({
         files: filesExpanded,
-        outputPath: outputPath ?? DEFAULT_OUTPUT_FOLDER,
+        outputPath: outputPath ?? process.cwd(),
         flags: cli.flags,
     })
 }).catch((error) => {

src/cli/index.ts

@@ -64,5 +64,4 @@ export const SUPPORTED_KEYS = {
     meta: '\uE03D'
 } as const
 
-export const DEFAULT_OUTPUT_FOLDER = 'wdio'
 export const KEY_NOT_SUPPORTED_ERROR = `key "%s" not supported (supported are ${Object.keys(SUPPORTED_KEYS).join(', ')}), please file an issue in https://github.com/webdriverio/chrome-recorder to let us know, so we can add support.`

src/constants.ts

@@ -17,7 +17,7 @@ import {
     WaitForElementStep,
     WaitForExpressionStep
 } from '@puppeteer/replay'
-import { formatAsJSLiteral } from './utils.js'
+import { formatAsJSLiteral, findByCondition } from './utils.js'
 import { SUPPORTED_KEYS, KEY_NOT_SUPPORTED_ERROR } from './constants.js'
 
 const ARIA_PREFIX = 'aria/'
@@ -259,51 +259,22 @@ export class StringifyExtension extends PuppeteerStringifyExtension {
 
     getSelector(selectors: Selector[], flow: UserFlow): string | undefined {
         /**
-         * check if selector is a link, e.g.
-         * ```
-         * "selectors": [
-         *   [
-         *     "aria/Timeouts"
-         *   ],
-         *   [
-         *     "#__docusaurus > div.main-wrapper.docs-wrapper.docs-doc-page > div > aside > div > nav > ul > li:nth-child(4) > ul > li:nth-child(2) > a"
-         *   ]
-         * ],
-         * ```
-         * then use link selector
+         * find by id first as it is the safest selector
          */
-        if (
-            Array.isArray(selectors[0]) && Array.isArray(selectors[1]) &&
-            selectors[0][0].startsWith(ARIA_PREFIX) &&
-            selectors[1][0].endsWith('> a')
-        ) {
-            return formatAsJSLiteral(`=${selectors[0][0].slice(ARIA_PREFIX.length)}`)
-        }
-
+        const idSelector = findByCondition(
+            selectors,
+            (s) => s.startsWith('#') && !s.includes(' ') && !s.includes('.') && !s.includes('>') && !s.includes('[') && !s.includes('~') && !s.includes(':')
+        )
+        if (idSelector) return idSelector
         /**
-         * check if selector is an element with text, e.g.
-         * ```
-         * "selectors": [
-         *   [
-         *     "aria/Flat White $18.00"
-         *   ],
-         *   [
-         *     "#app > div:nth-child(4) > ul > li:nth-child(5) > h4"
-         *   ]
-         * ],
-         * ```
-         * then use element with text selector: h4=Flat White $18.00
+         * use WebdriverIOs aria selector
+         * https://webdriver.io/docs/selectors#accessibility-name-selector
          */
-        if (
-            Array.isArray(selectors[0]) && Array.isArray(selectors[1]) &&
-            selectors[0][0].startsWith(ARIA_PREFIX) &&
-            selectors[1][0].includes(' > ')
-        ) {
-            const tagName = selectors[1][0].split('>').pop()!.trim()
-                // replace "button:nth-child(1)" with "button"
-                .split(':')[0]
-            return formatAsJSLiteral(`${tagName}=${selectors[0][0].slice(ARIA_PREFIX.length)}`)
-        }
+        const ariaSelector = findByCondition(
+            selectors,
+            (s) => s.startsWith(ARIA_PREFIX)
+        )
+        if (ariaSelector) return ariaSelector
 
         // Remove Aria selectors
         const nonAriaSelectors = this.filterArrayByString(selectors, ARIA_PREFIX)

src/stringifyExtension.ts

@@ -1,5 +1,6 @@
 import path from 'node:path'
 import fs from 'node:fs/promises'
+import { constants } from 'node:fs'
 import { format } from 'prettier'
 import chalk from 'chalk'
 
@@ -19,7 +20,7 @@ export function formatParsedRecordingContent(
 }
 
 export async function runTransformsOnChromeRecording({ files, outputPath, flags }: TransformOpts) {
-    const outputFolder = path.join(__dirname, outputPath)
+    const outputFolder = path.resolve(__dirname, outputPath)
     const { dry } = flags
 
     return files.map(async (file) => {
@@ -28,9 +29,7 @@ export async function runTransformsOnChromeRecording({ files, outputPath, flags
         )
 
         const recordingContent = await fs.readFile(file, 'utf-8')
-        const stringifiedFile = await stringifyChromeRecording(
-            recordingContent,
-        )
+        const stringifiedFile = await stringifyChromeRecording(recordingContent)
 
         if (!stringifiedFile) {
             return
@@ -57,9 +56,9 @@ export async function runTransformsOnChromeRecording({ files, outputPath, flags
     })
 }
 
-async function exportFileToFolder({ stringifiedFile, testName, outputPath, outputFolder }: ExportToFile): Promise<any> {
+async function exportFileToFolder({ stringifiedFile, testName, outputPath, outputFolder }: ExportToFile): Promise<unknown> {
     const folderPath = path.join('.', outputPath)
-    const folderExists = await fs.access(folderPath, fs.constants.F_OK).then(
+    const folderExists = await fs.access(folderPath, constants.F_OK).then(
         () => true,
         () => false
     )
@@ -81,18 +80,18 @@ async function exportFileToFolder({ stringifiedFile, testName, outputPath, outpu
     }
 
     return fs.writeFile(
-        path.join(outputFolder, `/${testName}.js`),
+        path.join(outputFolder, `${testName}.js`),
         stringifiedFile
     ).then(() => {
         console.log(
             chalk.green(
-                `\n ✅ ${testName}.json exported to ${outputPath}/${testName}.js\n `,
+                `✅ ${testName}.json exported to ${outputPath}/${testName}.js\n `,
             ),
         )
     }, () => {
         console.log(
             chalk.red(
-                `\n 😭 Something went wrong exporting ${outputPath}/${testName}.js \n`,
+                `😭 Something went wrong exporting ${outputPath}/${testName}.js \n`,
             ),
         )
     })

src/transform.ts

@@ -1,4 +1,5 @@
 import { globbySync } from 'globby'
+import type { Selector } from '@puppeteer/replay'
 
 export function expandedFiles(files: string[]): string[] {
     const containsGlob = files.some((file: string) => file.includes('*'))
@@ -8,3 +9,20 @@ export function expandedFiles(files: string[]): string[] {
 export function formatAsJSLiteral(value: string) {
     return JSON.stringify(value)
 }
+
+export function findByCondition(
+    selectors: Selector[],
+    condition: (selector: string) => boolean
+) {
+    const ariaSelector = selectors.find((selector) => Array.isArray(selector)
+        ? selector.find(condition)
+        : condition(selector) ?? selector
+    )
+    if (ariaSelector) {
+        return formatAsJSLiteral(Array.isArray(ariaSelector)
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            ? ariaSelector.find(condition)!
+            : ariaSelector
+        )
+    }
+}

src/utils.ts

@@ -102,7 +102,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.$("=Guides").setValue("webdriverio")\n')
+        expect(writer.toString()).toBe('await browser.$("aria/Guides").setValue("webdriverio")\n')
     })
 
     it('should fetch by text', async () => {
@@ -120,7 +120,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.$("h4=Flat White $18.00").setValue("webdriverio")\n')
+        expect(writer.toString()).toBe('await browser.$("aria/Flat White $18.00").setValue("webdriverio")\n')
     })
 
     it('should fetch by text with pseudo selector', async () => {
@@ -138,7 +138,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.$("button=Yes").setValue("webdriverio")\n')
+        expect(writer.toString()).toBe('await browser.$("aria/Yes").setValue("webdriverio")\n')
     })
 
     it('should correctly exports keyDown step', async () => {