correct data attribute locators

Author: toddtarsi

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/selenium-ide",
-  "version": "4.0.0-alpha.35",
+  "version": "4.0.0-alpha.36",
   "private": true,
   "description": "Selenium IDE electron app",
   "author": "Todd <[email protected]>",

packages/selenium-ide/src/browser/windows/PlaybackWindow/preload/locator-builders.ts

@@ -286,14 +286,14 @@ export default class LocatorBuilders {
 // e.g., 1st listed is top priority
 
 LocatorBuilders.add(
-  'css:data-attr',
+  'css:data-test-id',
   function (this: LocatorBuilders, e: HTMLElement) {
-    const dataAttributes = ['data-test', 'data-test-id']
+    const dataAttributes = ['data-test-id', 'data-test']
     for (let i = 0; i < dataAttributes.length; i++) {
       const attr = dataAttributes[i]
       const value = e.getAttribute(attr)
-      if (attr) {
-        return `css=*[${attr}="${value}"]`
+      if (value) {
+        return `css=[${attr}="${value}"]`
       }
     }
     return null
@@ -331,6 +331,29 @@ LocatorBuilders.add('name', function (this: LocatorBuilders, _e: HTMLElement) {
   return null
 })
 
+const dataAttributeFromDatasetProperty = (attr: string) =>
+  `data-${attr.replace(
+    /[A-Z]/g,
+    (letter: string) => `-${letter.toLowerCase()}`
+  )}`
+
+LocatorBuilders.add(
+  'css:data-attr',
+  function (this: LocatorBuilders, e: HTMLElement) {
+    const dataKeys = Object.keys(e.dataset || {})
+    if (dataKeys.length) {
+      const attr = dataKeys[0]
+      const value = e.dataset[attr]
+      const htmlAttr = dataAttributeFromDatasetProperty(attr)
+      if (!value || value === 'true') {
+        return `css=[${htmlAttr}]`
+      }
+      return `css=[${htmlAttr}="${value}"]`
+    }
+    return null
+  }
+)
+
 LocatorBuilders.add(
   'css:finder',
   function (this: LocatorBuilders, e: HTMLElement) {

packages/side-code-export/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/side-code-export",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.3",
   "description": "Utils for code export from Selenium IDE",
   "repository": "https://github.com/SeleniumHQ/selenium-ide",
   "keywords": [
@@ -10,8 +10,9 @@
   ],
   "license": "Apache-2.0",
   "scripts": {
-    "build": "babel -d dist src --ignore=__test__",
-    "watch": "pnpm run build"
+    "build": "tsc",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo node_modules",
+    "watch": "tsc --watch"
   },
   "bin": {
     "side-code-export": "dist/bin.js"