Fix/default value for locator editing options

.eslintrc.json

@@ -7,14 +7,14 @@
     "node": true,
     "jest": true
   },
-  "extends": [        
-  "plugin:react/recommended",
-  "airbnb-typescript",
-  "plugin:@typescript-eslint/recommended",
-  "plugin:@typescript-eslint/recommended-requiring-type-checking",
-  "plugin:jest/recommended",
-  "plugin:prettier/recommended",
-  "plugin:import/recommended"
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb-typescript",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:jest/recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended"
   ],
   "globals": {
     "Atomics": "readonly",
@@ -30,14 +30,26 @@
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
-  "plugins": ["react", "@typescript-eslint", "prettier", "jest", "react-hooks",  "import"],
-  "ignorePatterns": ["webpack.config.js"],
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "prettier",
+    "jest",
+    "react-hooks",
+    "import"
+  ],
+  "ignorePatterns": [
+    "webpack.config.js"
+  ],
   "rules": {
-    "prettier/prettier": ["error", {
-      "bracket-same-line": true,
-      "printWidth": 120,
-      "endOfLine": "auto"
-    }],
+    "prettier/prettier": [
+      "error",
+      {
+        "bracket-same-line": true,
+        "printWidth": 120,
+        "endOfLine": "auto"
+      }
+    ],
     "ban-ts-comment": 0,
     "quotes": 0,
     "require-jsdoc": 0,
@@ -49,20 +61,41 @@
     ],
     "space-before-function-paren": "off",
     "endOfLine": "off",
-    "max-len": ["error", {"code": 120, "ignoreUrls": true, "ignoreStrings": true, "ignoreTemplateLiterals": true}],
+    "max-len": [
+      "error",
+      {
+        "code": 120,
+        "ignoreUrls": true,
+        "ignoreStrings": true,
+        "ignoreTemplateLiterals": true
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unsafe-assignment": "off",
     "@typescript-eslint/no-unsafe-argument": "off",
     "@typescript-eslint/no-unsafe-member-access": "off",
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-unsafe-call": "off",
     "@typescript-eslint/no-non-null-assertion": "warn",
-    "@typescript-eslint/no-unused-vars": ["error", { "args": "after-used", "argsIgnorePattern": "_", "varsIgnorePattern": "_" }],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "args": "after-used",
+        "argsIgnorePattern": "_",
+        "varsIgnorePattern": "_"
+      }
+    ],
     "@typescript-eslint/ban-ts-comment": "warn"
   },
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
     }
   }
-}
+}

manifest.json

@@ -3,7 +3,7 @@
   "name": "JDN",
   "description": "JDN – helps Test Automation Engineer to create Page Objects in the test automation framework and speed up test development",
   "devtools_page": "index.html",
-  "version": "3.14.27",
+  "version": "3.14.28",
   "icons": {
     "128": "icon128.png"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jdn-ai-chrome-extension",
-  "version": "3.14.27",
+  "version": "3.14.28",
   "description": "jdn-ai chrome extension",
   "scripts": {
     "start": "webpack --watch --env devenv",

src/common/types/common.ts

@@ -42,8 +42,8 @@ export interface ElementAttributes {
 }
 
 export interface ExtendedElementAttributes extends ElementAttributes {
-  cssSelector: string;
-  xPath: string;
+  cssSelector: string | null;
+  xPath: string | null;
 }
 
 export const locatorAttributesInitialState: ElementAttributes = {

src/features/locators/reducers/addCustomLocator.thunk.ts

@@ -38,20 +38,22 @@ export const addCustomLocator = createAsyncThunk(
 
     if (getLocatorValidationStatus(message) === ValidationStatus.SUCCESS) {
       try {
-        if (isCSSLocator) {
+        if (isCSSLocator && locator.cssSelector) {
           ({ foundHash, foundElementText } = JSON.parse(
             await evaluateStandardLocator(locator.cssSelector, LocatorType.cssSelector, element_id),
           ));
         } else {
-          ({ foundHash, foundElementText } = JSON.parse(await evaluateXpath(locator.xPath, element_id)));
+          if (locator.xPath) {
+            ({ foundHash, foundElementText } = JSON.parse(await evaluateXpath(locator.xPath, element_id)));
+          }
         }
 
         if (!foundHash) {
           foundHash = element_id.split('_')[0];
           await sendMessage
             .assignJdnHash({
               jdnHash: foundHash,
-              ...{ locator: isCSSLocator ? locator.cssSelector : locator.xPath },
+              ...{ locator: isCSSLocator ? locator.cssSelector ?? '' : locator.xPath ?? '' },
               isCSSLocator,
             })
             .then((res) => {

src/features/locators/reducers/rerunGeneration.thunk.ts

@@ -15,7 +15,7 @@ export const rerunGeneration = createAsyncThunk('locators/rerunGeneration', asyn
     locator: { xPath, taskStatus },
   } = meta.generationData[0];
   if (meta.generationData.length === 1 && taskStatus === LocatorTaskStatus.FAILURE) {
-    await sendMessage.assignJdnHash({ jdnHash, locator: xPath });
+    await sendMessage.assignJdnHash({ jdnHash, locator: xPath ?? '' });
   }
   return thunkAPI.dispatch(
     runLocatorsGeneration({ locators: meta.generationData, maxGenerationTime: meta.maxGenerationTime }),

src/features/locators/types/locator.types.ts

@@ -56,9 +56,9 @@ export type ElementId = string;
 
 export interface LocatorValue {
   fullXpath?: string;
-  xPath: string;
+  xPath: string | null;
   attributes: ElementAttributes;
-  cssSelector: string;
+  cssSelector: string | null;
   cssSelectorStatus?: LocatorTaskStatus; // status of cssSelector calculation
   xPathStatus?: LocatorTaskStatus; // status of xPath calculation
   taskStatus?: LocatorTaskStatus; // status of both calculations

src/features/locators/utils/constants.ts

@@ -26,8 +26,8 @@ export const newLocatorStub: ILocator = {
   jdnHash: '',
   parent_id: '',
   locator: {
-    xPath: '',
-    cssSelector: '',
+    xPath: null,
+    cssSelector: null,
     attributes: {},
     taskStatus: LocatorTaskStatus.SUCCESS,
   },

src/features/locators/utils/createLocatorTypeOptions.tsx

@@ -22,7 +22,7 @@ interface ILocatorTypeOptions {
 
 const generateOptionsWithLabel = (attributes: ElementAttributes): IOptionsWithLabel[] => {
   const generateLabel = (locatorType: string, attribute: string | null) => {
-    if (attribute === null) {
+    if (attribute === null || attribute === '') {
       return <Tooltip title="Disabled because no data">{locatorType}</Tooltip>;
     }
 
@@ -51,8 +51,8 @@ const generateOptionsWithLabel = (attributes: ElementAttributes): IOptionsWithLa
 
 const addRestAttributes = (
   attributes: ElementAttributes[],
-  cssSelector: string,
-  xPath: string,
+  cssSelector: string | null,
+  xPath: string | null,
   allLocatorAttributes: ElementAttributes | undefined = locatorAttributesInitialState,
 ): [ExtendedElementAttributes, ElementAttributes] => {
   const uniqueAttributes = attributes[0];
@@ -72,8 +72,8 @@ const addRestAttributes = (
 
 const getLocatorTypeOptions = (
   attributes: ElementAttributes[],
-  cssSelector: string,
-  xPath: string,
+  cssSelector: string | null,
+  xPath: string | null,
 ): ILocatorTypeOptions[] => {
   const [updatedUniqueAttributes, updatedNonUniqueAttributes] = addRestAttributes(attributes, cssSelector, xPath);
 

src/features/locators/utils/locatorOutput.tsx

@@ -27,7 +27,7 @@ export const getLocatorValueByType = (locatorValue: LocatorValue, type: LocatorT
 
   const value = {
     'CSS Selector': locatorValue.cssSelector || CALCULATING,
-    xPath: locatorValue.xPath,
+    xPath: locatorValue.xPath ?? '',
     id: locatorValue.attributes.id ?? '',
     name: locatorValue.attributes.name ?? '',
     tagName: locatorValue.attributes.tagName ?? '',

src/features/locators/utils/utils.ts

@@ -93,19 +93,19 @@ export const copyLocator =
         value = locatorsForCopy.map(({ locator }) => `"${locator.xPath}"`);
         break;
       case LocatorOption.XpathAndSelenium:
-        value = locatorsForCopy.map(({ locator }) => getLocatorWithSelenium(locator.xPath, 'xpath'));
+        value = locatorsForCopy.map(({ locator }) => getLocatorWithSelenium(locator.xPath ?? '', 'xpath'));
         break;
       case LocatorOption.XpathAndJDI:
-        value = locatorsForCopy.map(({ locator }) => getLocatorWithJDIAnnotation(locator.xPath));
+        value = locatorsForCopy.map(({ locator }) => getLocatorWithJDIAnnotation(locator.xPath ?? ''));
         break;
       case LocatorOption.CSSSelector:
         value = locatorsForCopy.map(({ locator }) => `"${locator.cssSelector}"`);
         break;
       case LocatorOption.CSSAndSelenium:
-        value = locatorsForCopy.map(({ locator }) => getLocatorWithSelenium(locator.cssSelector, 'css'));
+        value = locatorsForCopy.map(({ locator }) => getLocatorWithSelenium(locator.cssSelector ?? '', 'css'));
         break;
       case LocatorOption.CSSAndJDI:
-        value = locatorsForCopy.map(({ locator }) => getLocatorWithJDIAnnotation(locator.cssSelector));
+        value = locatorsForCopy.map(({ locator }) => getLocatorWithJDIAnnotation(locator.cssSelector ?? ''));
         break;
       default:
         value = locatorsForCopy.map((element) => {

src/services/webSocketMessageHandler.ts

@@ -37,7 +37,7 @@ export const updateSocketMessageHandler = (dispatch: any, state: any) => {
           } else {
             reScheduledTasks.add(jdnHash);
             const rescheduleTask = async () => {
-              await sendMessage.assignJdnHash({ jdnHash: element.jdnHash, locator: element.locator.xPath });
+              await sendMessage.assignJdnHash({ jdnHash: element.jdnHash, locator: element.locator.xPath ?? '' });
               locatorGenerationController.scheduleMultipleXpathGeneration([element]);
             };
             rescheduleTask();