From f39a54b067859e9f5430135ebc9157256a9a34b5 Mon Sep 17 00:00:00 2001
From: Anna Iustus <ajustusa@gmail.com>
Date: Fri, 26 Jul 2024 15:35:19 +0200
Subject: [PATCH 1/7] fix: create dropdown options for locator types

---
 src/common/components/DialogWithForm.tsx      |  5 +-
 src/features/locators/Locator.tsx             |  3 -
 .../reducers/changeLocatorElement.thunk.ts    |  2 +-
 .../utils/createLocatorTypeOptions.tsx        | 58 +++++++++++++------
 .../locators/utils/locatorValidationRules.ts  |  1 +
 5 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/src/common/components/DialogWithForm.tsx b/src/common/components/DialogWithForm.tsx
index 7d37a660..5d55f433 100644
--- a/src/common/components/DialogWithForm.tsx
+++ b/src/common/components/DialogWithForm.tsx
@@ -21,6 +21,7 @@ interface OnboardingRefProps {
   onNextClickHandler: () => void;
   isOkButtonDisabled: boolean;
 }
+
 interface DialogFormProps {
   modalProps: JDNModalProps;
   children?: ReactNode;
@@ -79,11 +80,11 @@ export const DialogWithForm: React.FC<DialogFormProps> = ({ modalProps, formProp
         onOk={onOk}
         open={open}
         okButtonProps={okButtonProps}
-        {...{ ...restModal }}
+        {...restModal}
       >
         {open ? (
           <div className="jdn__dialog-with-form" ref={modalRef as React.LegacyRef<HTMLDivElement>}>
-            <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} {...{ form }} {...{ ...restForm }}>
+            <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} form={form} {...restForm}>
               {children}
             </Form>
           </div>
diff --git a/src/features/locators/Locator.tsx b/src/features/locators/Locator.tsx
index 5d26f270..a1b9cb3f 100644
--- a/src/features/locators/Locator.tsx
+++ b/src/features/locators/Locator.tsx
@@ -1,5 +1,3 @@
-// ToDo fix naming according to naming-convention
-/* eslint-disable @typescript-eslint/naming-convention */
 import React, { FC, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Button, Checkbox } from 'antd';
 import { DotsThree } from '@phosphor-icons/react';
@@ -52,7 +50,6 @@ interface Props {
 
 export const Locator: FC<Props> = ({ element, currentPage, searchState, depth, searchString, index }) => {
   const dispatch = useDispatch();
-
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
   const {
diff --git a/src/features/locators/reducers/changeLocatorElement.thunk.ts b/src/features/locators/reducers/changeLocatorElement.thunk.ts
index eedbfb9b..934d5521 100644
--- a/src/features/locators/reducers/changeLocatorElement.thunk.ts
+++ b/src/features/locators/reducers/changeLocatorElement.thunk.ts
@@ -60,7 +60,7 @@ export const changeLocatorElement = createAsyncThunk(
       elemText: foundElementText || '',
       jdnHash: foundHash,
     };
-    // почему здесь так, почему не отправляется на бэк WS message? для генерации xPath (и cssSelector)
+
     if (isCSSLocator) {
       fullXpath = await getElementFullXpath(foundHash);
       newValue.locatorValue.cssSelector = locatorValue;
diff --git a/src/features/locators/utils/createLocatorTypeOptions.tsx b/src/features/locators/utils/createLocatorTypeOptions.tsx
index fc7b51f8..87283b41 100644
--- a/src/features/locators/utils/createLocatorTypeOptions.tsx
+++ b/src/features/locators/utils/createLocatorTypeOptions.tsx
@@ -24,7 +24,7 @@ export interface ILocatorTypeOptions {
   options?: IOptionsWithLabel[];
 }
 
-const generateOptionsWithLabel = (attributes: ElementAttributes): IOptionsWithLabel[] => {
+const generateOptionsWithLabel = (attributes: ElementAttributes, isVividusFramework: boolean): IOptionsWithLabel[] => {
   const generateLabel = (locatorType: string, attribute: string | null) => {
     if (attribute === null || attribute === '') {
       return (
@@ -37,21 +37,43 @@ const generateOptionsWithLabel = (attributes: ElementAttributes): IOptionsWithLa
     return <>{locatorType}</>;
   };
 
-  return Object.keys(attributes).map((key) => {
-    let locatorType = key;
+  const options: IOptionsWithLabel[] = [];
+
+  for (const dataKey of Object.keys(attributes)) {
+    let locatorType = dataKey;
     if (locatorType === 'cssSelector') locatorType = 'CSS Selector';
-    const option: IOptionsWithLabel = {
-      label: generateLabel(locatorType, attributes[key as keyof ElementAttributes] as string),
-      value: locatorType,
-      desc: attributes[key as keyof ElementAttributes] as string,
-    };
-
-    if (attributes[key as keyof ElementAttributes] === null) {
-      option.disabled = true;
+
+    if (isVividusFramework && dataKey.startsWith('data-') && attributes[dataKey as keyof ElementAttributes]) {
+      const dataValue: string = attributes[dataKey as keyof ElementAttributes] as string;
+
+      if (dataValue !== null && dataValue !== '') {
+        options.push({
+          label: generateLabel('CSS Selector', dataValue),
+          value: `cssSelector-data-${dataKey}`,
+          desc: `*[${dataKey}="${dataValue}"]`,
+        });
+        options.push({
+          label: generateLabel('xPath', dataValue),
+          value: `xPath-data-${dataKey}`,
+          desc: `//*[@${dataKey}='${dataValue}']`,
+        });
+      }
+    } else {
+      const option: IOptionsWithLabel = {
+        label: generateLabel(locatorType, attributes[dataKey as keyof ElementAttributes] as string),
+        value: locatorType,
+        desc: attributes[dataKey as keyof ElementAttributes] as string,
+      };
+
+      if (attributes[dataKey as keyof ElementAttributes] === null) {
+        option.disabled = true;
+      }
+
+      options.push(option);
     }
+  }
 
-    return option;
-  });
+  return options;
 };
 
 const addRestAttributes = (
@@ -65,7 +87,6 @@ const addRestAttributes = (
   const updatedUniqueAttributes: ExtendedElementAttributes = { ...uniqueAttributes, xPath, cssSelector };
   const updatedNonUniqueAttributes: ElementAttributes = nonUniqueAttributes;
 
-  // Add noData fields:
   Object.entries(allLocatorAttributes).forEach(([key, value]) => {
     if (!updatedUniqueAttributes.hasOwnProperty(key) && !updatedNonUniqueAttributes.hasOwnProperty(key)) {
       updatedNonUniqueAttributes[key as keyof ElementAttributes] = value;
@@ -79,13 +100,14 @@ const getLocatorTypeOptions = (
   attributes: ElementAttributes[],
   cssSelector: string | null,
   xPath: string | null,
+  isVividusFramework: boolean,
 ): ILocatorTypeOptions[] => {
   const [updatedUniqueAttributes, updatedNonUniqueAttributes] = addRestAttributes(attributes, cssSelector, xPath);
 
-  const uniqueOptions = generateOptionsWithLabel(updatedUniqueAttributes)
+  const uniqueOptions = generateOptionsWithLabel(updatedUniqueAttributes, isVividusFramework)
     .slice()
     .sort((a, b) => a.value.localeCompare(b.value));
-  const nonUniqueOptions = generateOptionsWithLabel(updatedNonUniqueAttributes)
+  const nonUniqueOptions = generateOptionsWithLabel(updatedNonUniqueAttributes, isVividusFramework)
     .slice()
     .sort((a, b) => a.value.localeCompare(b.value));
 
@@ -155,14 +177,12 @@ const splitUniqueAndNonUniqueAttributes = async (attributes: ElementAttributes):
 export const createLocatorTypeOptions = async (locatorValue: LocatorValue, isVividusFramework: boolean) => {
   const attributes: ElementAttributes = {};
   Object.assign(attributes, locatorValue.attributes);
-  if (isVividusFramework) {
-    delete attributes.dataAttributes;
-  }
 
   const optionsData = await splitUniqueAndNonUniqueAttributes(attributes);
   return getLocatorTypeOptions(
     optionsData,
     locatorValue.cssSelector ?? locatorValue.originalCssSelector ?? null,
     locatorValue.xPath,
+    isVividusFramework,
   );
 };
diff --git a/src/features/locators/utils/locatorValidationRules.ts b/src/features/locators/utils/locatorValidationRules.ts
index 59da7ce0..133295a4 100644
--- a/src/features/locators/utils/locatorValidationRules.ts
+++ b/src/features/locators/utils/locatorValidationRules.ts
@@ -34,6 +34,7 @@ export const createLocatorValidationRules = (
           setValidationMessage(validationMessage as LocatorValidationErrorType);
           return await Promise.resolve();
         } catch (err) {
+          console.error('another validation error');
           setValidationMessage(err.message as LocatorValidationErrorType);
           setValidationErrorOptions(err.options);
           return Promise.reject(err);

From 99f1f166b074b2ca7008f0410dfe1481fafc8366 Mon Sep 17 00:00:00 2001
From: Anna Iustus <ajustusa@gmail.com>
Date: Tue, 30 Jul 2024 22:44:54 +0200
Subject: [PATCH 2/7] fix: evaluation and full flow for xPath (data attributes
 for Vividus); fix validation and textarea writing for CSS

---
 .../locators/components/LocatorEditDialog.tsx | 62 ++++++++++------
 .../locators/components/LocatorsTree.tsx      | 14 +---
 src/features/locators/locators.slice.ts       |  3 +-
 src/features/locators/utils/locatorOutput.tsx | 33 +++++++--
 src/features/locators/utils/utils.ts          | 71 ++++++++++++++++++-
 src/pageServices/contentScripts/utils.ts      |  6 +-
 6 files changed, 144 insertions(+), 45 deletions(-)

diff --git a/src/features/locators/components/LocatorEditDialog.tsx b/src/features/locators/components/LocatorEditDialog.tsx
index 0b8a3860..665ab9be 100644
--- a/src/features/locators/components/LocatorEditDialog.tsx
+++ b/src/features/locators/components/LocatorEditDialog.tsx
@@ -80,6 +80,7 @@ export const LocatorEditDialog: React.FC<Props> = ({
   const [isEditedName, setIsEditedName] = useState<boolean>(isCustomName);
 
   const [form] = Form.useForm<FormValues>();
+
   const isCurrentFrameworkVividus = pageObjectFramework === FrameworkType.Vividus;
   // ToDo rewrite all related logic and tests for defaultLocatorType: string (because it's string)
   const defaultLocatorType: LocatorType = locatorType || pageObjectLocatorType || LocatorType.xPath;
@@ -105,6 +106,25 @@ export const LocatorEditDialog: React.FC<Props> = ({
   };
 
   const notShownElementIds = useSelector(selectNotShownElementIds);
+
+  const [textareaValue, setTextareaValue] = useState('');
+
+  const handleTypeChangeBySelect = (value: string, option: { desc: React.SetStateAction<string> }) => {
+    console.log('handleTypeChangeBySelect ', option.desc);
+    setTextareaValue(option.desc);
+    form.setFieldValue('locator', option.desc);
+
+    if (isEditedName) return;
+
+    const newName = createNewName(
+      { elementId, isCustomName, type, name, elemId, elemName, elemText } as ILocator,
+      value,
+      library,
+      locators,
+    );
+    form.setFieldValue('name', newName);
+  };
+
   const getLocatorValidationRules: () => Rule[] = () =>
     createLocatorValidationRules(
       isCreatingForm,
@@ -116,19 +136,8 @@ export const LocatorEditDialog: React.FC<Props> = ({
       elementId,
       notShownElementIds,
     );
-  const [locatorValidationRules, setLocatorValidationRules] = useState<Rule[]>(getLocatorValidationRules());
 
-  const handleTypeChange = (value: string) => {
-    if (isEditedName) return;
-
-    const newName = createNewName(
-      { elementId, isCustomName, type, name, elemId, elemName, elemText } as ILocator,
-      value,
-      library,
-      locators,
-    );
-    form.setFieldValue('name', newName);
-  };
+  const [locatorValidationRules, setLocatorValidationRules] = useState<Rule[]>(getLocatorValidationRules());
 
   const handleNameChange = () => {
     setIsEditedName(true);
@@ -191,7 +200,7 @@ export const LocatorEditDialog: React.FC<Props> = ({
     if ((!validationMessage.length && !jdnHash) || validationMessage === LocatorValidationWarnings.NewElement) {
       await dispatch(changeLocatorElement(updatedLocator));
     } else {
-      dispatch(changeLocatorAttributes(updatedLocator));
+      dispatch(changeLocatorAttributes({ ...updatedLocator, isCurrentFrameworkVividus }));
     }
 
     closeDialog();
@@ -223,12 +232,12 @@ export const LocatorEditDialog: React.FC<Props> = ({
       </div>
     ) : null;
 
-  const onLocatorTypeChange = async () => {
+  const onLocatorTypeChange = async (newLocatorType: LocatorType) => {
     setLocatorValidationRules(getLocatorValidationRules());
-    const newLocatorType = form.getFieldValue('locatorType');
-    const newLocator = form.getFieldValue('locator');
 
-    if (newLocator !== '') {
+    const previousLocatorValue = form.getFieldValue('locator');
+
+    if (previousLocatorValue !== '') {
       const newLocatorValue = await getLocatorValueOnTypeSwitch(
         newLocatorType,
         validationMessage,
@@ -243,7 +252,10 @@ export const LocatorEditDialog: React.FC<Props> = ({
 
   const onFieldsChange = async (changedValues: FieldData[]) => {
     const isLocatorTypeChanged = changedValues.some((value) => value.name.toString().includes('locatorType'));
-    if (isLocatorTypeChanged) await onLocatorTypeChange();
+    if (isLocatorTypeChanged) {
+      const newLocatorType = changedValues.find((value) => value.name.toString().includes('locatorType'))?.value;
+      await onLocatorTypeChange(newLocatorType);
+    }
     setIsOkButtonDisabled(computeIsOkButtonDisabled());
   };
 
@@ -264,6 +276,7 @@ export const LocatorEditDialog: React.FC<Props> = ({
       value: value,
     }));
   const [locatorTypeOptions, setLocatorTypeOptions] = useState<ILocatorTypeOptions[]>([]);
+
   useEffect(() => {
     if (!isCreatingForm) {
       const fetchLocatorTypeOptions = async () => {
@@ -281,7 +294,8 @@ export const LocatorEditDialog: React.FC<Props> = ({
     }
   }, [locatorValue, locators, elementId]);
 
-  const handleLocatorDropdownOnChange = async () => {
+  const handleLocatorDropdownOnChange = async (_: any, option: { desc: React.SetStateAction<string> }) => {
+    setTextareaValue(option.desc);
     setValidationMessage('');
 
     try {
@@ -344,7 +358,7 @@ export const LocatorEditDialog: React.FC<Props> = ({
         ]}
       >
         <Select
-          onChange={handleTypeChange}
+          onChange={handleTypeChangeBySelect}
           showSearch
           filterOption={(input, option) => isFilteredSelect(input, option)}
           options={getBlockTypeOptions()}
@@ -379,7 +393,13 @@ export const LocatorEditDialog: React.FC<Props> = ({
         help={renderValidationMessage()}
         extra={renderValidationWarning()}
       >
-        <Input.TextArea spellCheck={false} disabled={isLocatorDisabled} autoSize className="input input__textarea" />
+        <Input.TextArea
+          value={textareaValue}
+          spellCheck={false}
+          disabled={isLocatorDisabled}
+          autoSize
+          className="input input__textarea"
+        />
       </Form.Item>
     </DialogWithForm>
   );
diff --git a/src/features/locators/components/LocatorsTree.tsx b/src/features/locators/components/LocatorsTree.tsx
index d95fad14..756fc816 100644
--- a/src/features/locators/components/LocatorsTree.tsx
+++ b/src/features/locators/components/LocatorsTree.tsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { CaretDown } from '@phosphor-icons/react';
 import { selectCurrentPage } from '../../../app/main.selectors';
 import { RootState } from '../../../app/store/store';
-import { ElementId, ILocator } from '../types/locator.types';
+import { ElementId } from '../types/locator.types';
 import { defaultLibrary } from '../types/generationClasses.types';
 import { LocatorsProgress } from './LocatorsProgress';
 import { useSize } from '../utils/useSize';
@@ -19,7 +19,7 @@ import { checkForEscaped, fullEscapeLocatorString } from '../utils/escapeLocator
 import { LocatorType } from '../../../common/types/common';
 import type RcTree from 'rc-tree';
 import cn from 'classnames';
-import { getTaskStatus } from '../utils/utils';
+import { createLocatorsMap, getTaskStatus } from '../utils/utils';
 
 export enum SearchState {
   None = 'none',
@@ -94,15 +94,7 @@ export const LocatorsTree: React.FC<LocatorTreeProps> = ({ locatorIds, viewProps
     setExpandAll(ExpandState.Custom);
   };
 
-  const createLocatorsMap = () => {
-    const map: Record<ElementId, ILocator> = {};
-    for (let index = 0; index < locators.length; index++) {
-      map[locators[index].elementId] = locators[index];
-    }
-    return map;
-  };
-
-  const locatorsMap = createLocatorsMap();
+  const locatorsMap = createLocatorsMap(locators);
 
   const locatorsTree = useMemo(
     () => convertListToTree(locators, searchString),
diff --git a/src/features/locators/locators.slice.ts b/src/features/locators/locators.slice.ts
index af849371..1d3b2622 100644
--- a/src/features/locators/locators.slice.ts
+++ b/src/features/locators/locators.slice.ts
@@ -49,6 +49,7 @@ export interface ChangeLocatorAttributesPayload {
   isCustomName?: boolean;
   isGeneratedName?: boolean;
   locatorType: LocatorType;
+  isCurrentFrameworkVividus?: boolean;
 }
 
 const locatorsSlice = createSlice({
@@ -60,7 +61,7 @@ const locatorsSlice = createSlice({
       state.status = IdentificationStatus.success;
     },
     changeLocatorAttributes(state, { payload }: PayloadAction<ChangeLocatorAttributesPayload>) {
-      const { locatorValue, elementId, locatorType, ...rest } = payload;
+      const { locatorValue, elementId, locatorType, isCurrentFrameworkVividus, ...rest } = payload;
 
       const currentLocator = simpleSelectLocatorById(state, elementId);
 
diff --git a/src/features/locators/utils/locatorOutput.tsx b/src/features/locators/utils/locatorOutput.tsx
index b8278444..986d4c29 100644
--- a/src/features/locators/utils/locatorOutput.tsx
+++ b/src/features/locators/utils/locatorOutput.tsx
@@ -4,6 +4,7 @@ import { ElementClass, ElementLibrary } from '../types/generationClasses.types';
 import { ILocator, LocatorValue } from '../types/locator.types';
 import { CALCULATING } from './constants';
 import { camelCase } from 'lodash';
+import { dataAttrPrefixForVividus, extractPrefixTypeFromLocator, removePrefixFromLocatorType } from './utils';
 
 const getLocatorAnnotationStringByType = (value: string, locatorType: LocatorType, annotationType: AnnotationType) => {
   if (annotationType === AnnotationType.FindBy) return value;
@@ -31,8 +32,28 @@ const getLocatorAnnotationStringByType = (value: string, locatorType: LocatorTyp
   return annotations[locatorType];
 };
 
-export const getLocatorValueByType = (locatorValue: LocatorValue, type: LocatorType): string => {
+export const getLocatorValueByType = (locatorValue: LocatorValue, locatorType: LocatorType): string => {
   let dataAttribute = '';
+  let type = locatorType;
+
+  const isXPathDataAttrForVividus = type.startsWith(dataAttrPrefixForVividus.xPath);
+  const isCssSelectorDataAttrForVividus = type.startsWith(dataAttrPrefixForVividus.cssSelector);
+  const isDataAttrForVividus = isXPathDataAttrForVividus || isCssSelectorDataAttrForVividus;
+
+  if (isDataAttrForVividus) {
+    type = removePrefixFromLocatorType(type);
+    if (locatorValue.attributes.dataAttributes) {
+      const outputValue = locatorValue.attributes.dataAttributes[type] ?? '';
+      let outputValueString = outputValue;
+      if (isXPathDataAttrForVividus) {
+        outputValueString = `//*[@${type}='${outputValue}']`;
+      }
+      if (isCssSelectorDataAttrForVividus) {
+        outputValueString = `*[${type}="${outputValue}"]`;
+      }
+      return outputValueString;
+    }
+  }
 
   const value = {
     'CSS Selector': locatorValue.cssSelector || locatorValue.originalCssSelector || CALCULATING,
@@ -45,7 +66,7 @@ export const getLocatorValueByType = (locatorValue: LocatorValue, type: LocatorT
     dataAttributes: dataAttribute,
   };
 
-  if (locatorValue.attributes.dataAttributes && type.startsWith('data-')) {
+  if (locatorValue.attributes.dataAttributes && type.startsWith('data')) {
     dataAttribute = locatorValue.attributes.dataAttributes[type] ?? '';
 
     value[type] = dataAttribute;
@@ -54,7 +75,6 @@ export const getLocatorValueByType = (locatorValue: LocatorValue, type: LocatorT
   if (value[type]) {
     return value[type];
   } else {
-    console.warn(`can't find this type: ${type}`);
     return ``;
   }
 };
@@ -96,7 +116,6 @@ export const getLocatorString = (
   name: string,
 ): string => {
   const locatorOutput = `"${locatorValue.output}"`;
-
   return `${annotationType}(${getLocatorPrefix(annotationType, locatorType)}${locatorOutput})\npublic ${type} ${name};`;
 };
 
@@ -131,7 +150,11 @@ export const getLocatorTemplateWithVividus = (
   pageObjectName: string,
   locatorType: LocatorType,
   locator: ILocator,
-): string => `variables.${pageObjectName}.${locator.type}.${locator.name}=By.${camelCase(locatorType)}`;
+): string => {
+  return `variables.${pageObjectName}.${locator.type}.${locator.name}=By.${camelCase(
+    extractPrefixTypeFromLocator(locatorType),
+  )}`;
+};
 
 export const vividusColorizedString = (
   pageObjectName: string,
diff --git a/src/features/locators/utils/utils.ts b/src/features/locators/utils/utils.ts
index 998e2f7f..7569786e 100644
--- a/src/features/locators/utils/utils.ts
+++ b/src/features/locators/utils/utils.ts
@@ -44,11 +44,51 @@ export const evaluateStandardLocator = (
   originJdnHash?: string,
 ) => sendMessage.evaluateStandardLocator({ selector, locatorType, elementId, originJdnHash });
 
+export const dataAttrPrefixForVividus = { xPath: 'xPath-data-', cssSelector: 'cssSelector-data-' };
+
+export const removePrefixFromLocatorType = (str: string): LocatorType => {
+  if (str.startsWith(dataAttrPrefixForVividus.cssSelector)) {
+    return str.replace(dataAttrPrefixForVividus.cssSelector, '') as LocatorType;
+  }
+  if (str.startsWith(dataAttrPrefixForVividus.xPath)) {
+    return str.replace(dataAttrPrefixForVividus.xPath, '') as LocatorType;
+  }
+
+  console.warn(`Can't remove prefix: Unknown prefix: ${str}`);
+  return str as LocatorType;
+};
+
+enum VividusDataAttributesPrefixes {
+  CssSelector = 'cssSelector-data-',
+  xPath = 'xPath-data-',
+}
+
+export const extractPrefixTypeFromLocator = (str: string): string => {
+  const cssSelectorPrefix = VividusDataAttributesPrefixes.CssSelector;
+  const xPathPrefix = VividusDataAttributesPrefixes.xPath;
+
+  if (str.startsWith(cssSelectorPrefix)) {
+    return 'cssSelector';
+  }
+  if (str.startsWith(xPathPrefix)) {
+    return 'xPath';
+  }
+
+  console.warn(`Can't extract prefix: Unknown prefix: ${str}`);
+  return str;
+};
+
 const prepareLocatorStringForEvaluation = (type: LocatorType, string: string): string => {
   const escapeString = escapeLocatorString(string);
+  const isCSSSelectorForVividus =
+    type.startsWith(dataAttrPrefixForVividus.cssSelector) || type.startsWith('CSS Selector');
+  if (isCSSSelectorForVividus) {
+    return string;
+  }
   if (type === LocatorType.id) return `#${escapeString}`;
   if (type === LocatorType.className) return `.${escapeString}`;
   if (type === LocatorType.name) return `[name="${escapeString}"]`;
+
   return escapeString;
 };
 
@@ -59,7 +99,9 @@ export const evaluateLocator = async (
   jdnHash?: string,
 ) => {
   if (startsWithDigit(locatorString)) return LocatorValidationWarnings.StartsWithDigit;
-  if (locatorType === LocatorType.xPath) return evaluateXpath(locatorString, elementId, jdnHash);
+  if (locatorType === LocatorType.xPath || locatorType.startsWith('xPath')) {
+    return evaluateXpath(locatorString, elementId, jdnHash);
+  }
 
   const preparedValue = prepareLocatorStringForEvaluation(locatorType, locatorString);
   return evaluateStandardLocator(preparedValue, locatorType, elementId, jdnHash);
@@ -196,6 +238,11 @@ export const getLocatorValueOnTypeSwitch = async (
     newLocatorType === LocatorType.tagName ||
     newLocatorType.startsWith('data-');
 
+  const isCssSelectorDataAttributeForVividus = newLocatorType.startsWith(dataAttrPrefixForVividus.cssSelector);
+  const isXPathDataAttributeForVividus = newLocatorType.startsWith(dataAttrPrefixForVividus.xPath);
+
+  const isDataAttributeForVividus = isCssSelectorDataAttributeForVividus || isXPathDataAttributeForVividus;
+
   const isDataAttributesFalsy =
     !locatorValue.attributes.dataAttributes || Object.keys(locatorValue.attributes.dataAttributes).length === 0;
   const isStandardLocatorValueFalsy =
@@ -213,15 +260,27 @@ export const getLocatorValueOnTypeSwitch = async (
 
       ({ cssSelector: newLocatorValue } = await generateSelectorByHash(elementId, foundHash));
     } else {
-      if (newLocatorType === LocatorType.cssSelector) newLocatorValue = locatorValue.cssSelector;
+      if (newLocatorType === LocatorType.cssSelector) return locatorValue.cssSelector;
       try {
         newLocatorValue = getLocatorValueByType(locatorValue, newLocatorType);
       } catch (error) {
         console.log('error: ', error);
       }
     }
+  } else if (isDataAttributeForVividus) {
+    const newLocatorTypeWithoutPrefix = removePrefixFromLocatorType(newLocatorType);
+    if (isCssSelectorDataAttributeForVividus && locatorValue.attributes.dataAttributes) {
+      const attributeValue = locatorValue.attributes.dataAttributes[newLocatorTypeWithoutPrefix];
+      newLocatorValue = `*[${newLocatorTypeWithoutPrefix}="${attributeValue}"]`;
+    } else if (isXPathDataAttributeForVividus && locatorValue.attributes.dataAttributes) {
+      const attributeValue = locatorValue.attributes.dataAttributes[newLocatorTypeWithoutPrefix];
+      newLocatorValue = `//*[@${newLocatorTypeWithoutPrefix}='${attributeValue}']`;
+    }
+    return newLocatorValue;
   } else {
+    console.log('not a isStandardLocator');
     if (isLocatorLeadsToNewElement || !locatorValue.xPath) {
+      console.log('isLocatorLeadsToNewElement || !locatorValue.xPath');
       const { foundHash } = JSON.parse(
         await evaluateStandardLocator(form.getFieldValue('locator'), newLocatorType, elementId),
       );
@@ -267,3 +326,11 @@ export const hasAllLocators = ({ locatorValue }: ILocator) =>
   locatorValue && locatorValue.xPath !== locatorValue.fullXpath && locatorValue.originalCssSelector;
 
 export const getNoLocatorsElements = (locators: ILocator[]) => locators.filter((locator) => !hasAllLocators(locator));
+
+export const createLocatorsMap = (locators: ILocator[]) => {
+  const map: Record<ElementId, ILocator> = {};
+  for (let index = 0; index < locators.length; index++) {
+    map[locators[index].elementId] = locators[index];
+  }
+  return map;
+};
diff --git a/src/pageServices/contentScripts/utils.ts b/src/pageServices/contentScripts/utils.ts
index 921f0464..c3305292 100644
--- a/src/pageServices/contentScripts/utils.ts
+++ b/src/pageServices/contentScripts/utils.ts
@@ -34,7 +34,7 @@ export const evaluateStandardLocator = ({
       const nodeList = document.querySelectorAll('a');
       const condition = (node: HTMLAnchorElement) => node.textContent && node.textContent.includes(selector);
 
-      // create temporary nodeList
+      // create temporary nodeList:
       const filteredNodes = document.createElement('div');
 
       Array.from(nodeList).forEach((node) => {
@@ -51,10 +51,6 @@ export const evaluateStandardLocator = ({
       foundElements = document.querySelectorAll(preparedClassName);
     } else if (locatorType.startsWith('data-')) {
       foundElements = document.querySelectorAll(`[${locatorType}="${selector}"]`);
-    } else if (selector.startsWith('[data-') && locatorType === LocatorType.cssSelector) {
-      // TODO: find where added escaping for this string and remove it:
-      // At the moment the workaround replaceAll(/\\/g, '') is used
-      foundElements = document.querySelectorAll(`${selector.replaceAll(/\\/g, '')}`);
     } else {
       foundElements = document.querySelectorAll(selector);
     }

From 979ce68eb9feaf32664da5bdd332d4970df51a07 Mon Sep 17 00:00:00 2001
From: Anna Iustus <ajustusa@gmail.com>
Date: Tue, 30 Jul 2024 22:51:48 +0200
Subject: [PATCH 3/7] update version

---
 manifest.json     | 2 +-
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/manifest.json b/manifest.json
index e5d78798..38fa5e03 100644
--- a/manifest.json
+++ b/manifest.json
@@ -3,7 +3,7 @@
   "name": "JDN — Page Object Generator",
   "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.16.1",
+  "version": "3.16.2",
   "icons": {
     "128": "icon128.png"
   },
diff --git a/package-lock.json b/package-lock.json
index cb289b14..81586e08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "jdn-ai-chrome-extension",
-  "version": "3.16.1",
+  "version": "3.16.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -18724,4 +18724,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 04ed51b5..bf87f9ee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdn-ai-chrome-extension",
-  "version": "3.16.1",
+  "version": "3.16.2",
   "description": "jdn-ai chrome extension",
   "scripts": {
     "start": "webpack --watch --env devenv",

From 1c1ed2deffd2671a1d12fef7a2ca354431400324 Mon Sep 17 00:00:00 2001
From: Anna Iustus <ajustusa@gmail.com>
Date: Wed, 31 Jul 2024 12:24:16 +0200
Subject: [PATCH 4/7] fix: update interface for Locator Type Options; code
 cleanup

---
 src/features/locators/locators.slice.ts                  | 2 +-
 src/features/locators/utils/createLocatorTypeOptions.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/features/locators/locators.slice.ts b/src/features/locators/locators.slice.ts
index 1d3b2622..5b6099d9 100644
--- a/src/features/locators/locators.slice.ts
+++ b/src/features/locators/locators.slice.ts
@@ -61,7 +61,7 @@ const locatorsSlice = createSlice({
       state.status = IdentificationStatus.success;
     },
     changeLocatorAttributes(state, { payload }: PayloadAction<ChangeLocatorAttributesPayload>) {
-      const { locatorValue, elementId, locatorType, isCurrentFrameworkVividus, ...rest } = payload;
+      const { locatorValue, elementId, locatorType, ...rest } = payload;
 
       const currentLocator = simpleSelectLocatorById(state, elementId);
 
diff --git a/src/features/locators/utils/createLocatorTypeOptions.tsx b/src/features/locators/utils/createLocatorTypeOptions.tsx
index 87283b41..9141e115 100644
--- a/src/features/locators/utils/createLocatorTypeOptions.tsx
+++ b/src/features/locators/utils/createLocatorTypeOptions.tsx
@@ -19,8 +19,9 @@ interface IOptionsWithLabel {
 }
 
 export interface ILocatorTypeOptions {
-  value?: string;
   label: string;
+  value?: string;
+  desc?: string;
   options?: IOptionsWithLabel[];
 }
 

From 614880e11766c85ec05044689f2bc092153f457f Mon Sep 17 00:00:00 2001
From: Anna Iustus <ajustusa@gmail.com>
Date: Wed, 31 Jul 2024 12:25:21 +0200
Subject: [PATCH 5/7] fix: turn of ts-check for LocatorEditDialog.tsx (need to
 fix - add ToDo)

---
 src/features/locators/components/LocatorEditDialog.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/features/locators/components/LocatorEditDialog.tsx b/src/features/locators/components/LocatorEditDialog.tsx
index 665ab9be..22d90304 100644
--- a/src/features/locators/components/LocatorEditDialog.tsx
+++ b/src/features/locators/components/LocatorEditDialog.tsx
@@ -1,3 +1,6 @@
+// ToDo: fix TS, remove the comment when there is time in the sprint
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import React, { useEffect, useState } from 'react';
 import { Form, Input, Select, Space } from 'antd';
 import Icon from '@ant-design/icons';

From 160a7acae1ba8a3d24736c14d8dd261dec85ae04 Mon Sep 17 00:00:00 2001
From: Anna Iustus <ajustusa@gmail.com>
Date: Wed, 31 Jul 2024 12:29:23 +0200
Subject: [PATCH 6/7] fix: replace console.warn with condole.log in case of
 string without Vividus prefix

---
 src/features/locators/utils/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/locators/utils/utils.ts b/src/features/locators/utils/utils.ts
index 7569786e..e0cff1ae 100644
--- a/src/features/locators/utils/utils.ts
+++ b/src/features/locators/utils/utils.ts
@@ -74,7 +74,7 @@ export const extractPrefixTypeFromLocator = (str: string): string => {
     return 'xPath';
   }
 
-  console.warn(`Can't extract prefix: Unknown prefix: ${str}`);
+  console.log(`Can't extract prefix: Unknown prefix: ${str}`);
   return str;
 };
 

From 7328eb85669a8c34e2e7256ad2ca424437ddf144 Mon Sep 17 00:00:00 2001
From: Anna Iustus <ajustusa@gmail.com>
Date: Thu, 1 Aug 2024 12:53:52 +0200
Subject: [PATCH 7/7] fix: unescape string for locator validation function

---
 src/features/locators/utils/escapeLocatorString.ts |  2 +-
 src/features/locators/utils/utils.ts               |  6 +-----
 src/pageServices/contentScripts/utils.ts           | 12 +++++++++++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/features/locators/utils/escapeLocatorString.ts b/src/features/locators/utils/escapeLocatorString.ts
index a58e156e..3cc73ecf 100644
--- a/src/features/locators/utils/escapeLocatorString.ts
+++ b/src/features/locators/utils/escapeLocatorString.ts
@@ -16,5 +16,5 @@ export const fullEscapeLocatorString = (str: string = ''): string => {
 
 export const checkForEscaped = (str: string = ''): boolean => {
   const found = str.match(/\\/);
-  return found ? true : false;
+  return !!found;
 };
diff --git a/src/features/locators/utils/utils.ts b/src/features/locators/utils/utils.ts
index e0cff1ae..d6ada714 100644
--- a/src/features/locators/utils/utils.ts
+++ b/src/features/locators/utils/utils.ts
@@ -80,11 +80,7 @@ export const extractPrefixTypeFromLocator = (str: string): string => {
 
 const prepareLocatorStringForEvaluation = (type: LocatorType, string: string): string => {
   const escapeString = escapeLocatorString(string);
-  const isCSSSelectorForVividus =
-    type.startsWith(dataAttrPrefixForVividus.cssSelector) || type.startsWith('CSS Selector');
-  if (isCSSSelectorForVividus) {
-    return string;
-  }
+
   if (type === LocatorType.id) return `#${escapeString}`;
   if (type === LocatorType.className) return `.${escapeString}`;
   if (type === LocatorType.name) return `[name="${escapeString}"]`;
diff --git a/src/pageServices/contentScripts/utils.ts b/src/pageServices/contentScripts/utils.ts
index c3305292..7b54d7dc 100644
--- a/src/pageServices/contentScripts/utils.ts
+++ b/src/pageServices/contentScripts/utils.ts
@@ -22,6 +22,11 @@ interface EvaluateStandardLocator {
   originJdnHash: string;
 }
 
+const unescapeLocatorString = (escapedStr: string): string => {
+  return escapedStr.replace(/\\(["'\\])/g, '$1');
+};
+const dataAttrPrefixForVividus = { xPath: 'xPath-data-', cssSelector: 'cssSelector-data-' };
+
 export const evaluateStandardLocator = ({
   selector,
   locatorType,
@@ -30,7 +35,12 @@ export const evaluateStandardLocator = ({
 }: EvaluateStandardLocator) => {
   try {
     let foundElements: NodeListOf<Element>;
-    if (locatorType === LocatorType.linkText) {
+    const isCSSSelectorForVividus =
+      locatorType.startsWith(dataAttrPrefixForVividus.cssSelector) || locatorType.startsWith('CSS Selector');
+
+    if (isCSSSelectorForVividus) {
+      foundElements = document.querySelectorAll(unescapeLocatorString(selector));
+    } else if (locatorType === LocatorType.linkText) {
       const nodeList = document.querySelectorAll('a');
       const condition = (node: HTMLAnchorElement) => node.textContent && node.textContent.includes(selector);