Issue 1659: fix view for data attributes

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.15.32",
+  "version": "3.15.33",
   "icons": {
     "128": "icon128.png"
   },

package.json

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

src/__tests__/pageObject/pageObject.test.js

@@ -1,21 +1,21 @@
 import {
+  getLocatorsByAnnotationType,
   locators,
-  pageObjectMUI,
+  locatorsVividus,
   pageObjectHTML,
-  pageObjectVuetify,
   pageObjectHTMLWithFindBy,
-  getLocatorsByAnnotationType,
-  locatorsVividus,
+  pageObjectMUI,
   pageObjectVividus,
+  pageObjectVuetify,
 } from '../__mocks__/pageObjectMocks/pageObject.mock';
 import { elementsWithoutNames } from '../__mocks__/pageObjectMocks/elementsWithoutNames';
 import { elementsWithNames } from '../__mocks__/pageObjectMocks/elementsWithNames';
-import { pageObjectsNames } from '../__mocks__/pageObjectMocks/pageObjectNames';
+import { pageObjectsNames } from '../__mocks__/pageObjectMocks/pageObjectNames.mock.js';
 import { ElementLibrary } from '../../features/locators/types/generationClasses.types';
 import {
+  getClassName,
   getPageObjectTemplateForJdi,
   getPageObjectTemplateForVividus,
-  getClassName,
 } from '../../features/pageObjects/utils/pageObjectTemplate';
 import { createLocatorNames } from '../../features/pageObjects/utils/pageObject';
 

src/features/locators/Locator.tsx

@@ -35,7 +35,7 @@ import { selectCalculatedActiveByPageObj, selectWaitingActiveByPageObj } from '.
 import { isLocatorListPage } from '../../app/utils/helpers';
 import { selectCurrentPageObject } from '../pageObjects/selectors/pageObjects.selectors';
 import { AnnotationType, FrameworkType, LocatorType } from '../../common/types/common';
-import { getLocatorTemplateWithVividus, renderColorizedJdiString } from './utils/locatorOutput';
+import { jdiColorizedString, vividusColorizedString } from './utils/locatorOutput';
 import { ScriptMsg } from '../../pageServices/scriptMsg.constants';
 import { OnboardingStep } from '../onboarding/constants';
 import { useOnboardingContext } from '../onboarding/OnboardingProvider';
@@ -164,22 +164,11 @@ export const Locator: FC<Props> = ({ element, currentPage, searchState, depth, s
       if (event.detail === 2) setIsEditModalOpen(true);
     };
 
-    // ToDo: make clean, fix DRY (check locatorOutput.tsx)
-    const vividusString = () => {
-      return (
-        <>
-          <span>{getLocatorTemplateWithVividus(pageObjectName, locatorType, element)}</span>(
-          <span className="jdn__locator_output-string">{locatorValue.output}</span>)
-          <br />
-        </>
-      );
-    };
-
     return (
       <span onClick={handleClick}>
         {isVividusFramework
-          ? vividusString()
-          : renderColorizedJdiString(annotationType, locatorType, locatorValue.output ?? '', type, name)}
+          ? vividusColorizedString(pageObjectName, locatorType, element, locatorValue.output ?? '')
+          : jdiColorizedString(annotationType, locatorType, locatorValue.output ?? '', type, name)}
       </span>
     );
   };

src/features/locators/components/LocatorEditDialog.tsx

@@ -265,7 +265,7 @@ export const LocatorEditDialog: React.FC<Props> = ({
     if (!isCreatingForm) {
       const fetchLocatorTypeOptions = async () => {
         try {
-          const options = await createLocatorTypeOptions(locatorValue);
+          const options = await createLocatorTypeOptions(locatorValue, isCurrentFrameworkVividus);
           setLocatorTypeOptions(options);
         } catch (error) {
           console.error('Error: can`t get options for locator:', error);

src/features/locators/utils/createLocatorTypeOptions.tsx

@@ -152,7 +152,17 @@ const splitUniqueAndNonUniqueAttributes = async (attributes: ElementAttributes):
   return [uniqueAttributes, nonUniqueAttributes];
 };
 
-export const createLocatorTypeOptions = async (locatorValue: LocatorValue) => {
-  const optionsData = await splitUniqueAndNonUniqueAttributes(locatorValue.attributes);
-  return getLocatorTypeOptions(optionsData, locatorValue.cssSelector, locatorValue.xPath);
+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,
+  );
 };

src/features/locators/utils/locatorOutput.tsx

@@ -101,7 +101,7 @@ export const getLocatorString = (
 };
 
 // the same as getLocatorString only with additional formatting and css classes for colorized styles:
-export const renderColorizedJdiString = (
+export const jdiColorizedString = (
   annotationType: AnnotationType,
   locatorType: LocatorType,
   locatorOutput: string,
@@ -126,19 +126,35 @@ export const renderColorizedJdiString = (
     </>
   );
 };
-// used in the coverage panel in the Copy option of the Context Menu:
-export const getLocatorWithJDIAnnotation = (locator: string, locatorType: LocatorType): string =>
-  `${AnnotationType.UI}("${getLocatorAnnotationStringByType(locator, locatorType, AnnotationType.UI)}")`;
-// used in the coverage panel in the Copy option of the Context Menu:
-export const getLocatorWithSelenium = (locator: string, option: string): string =>
-  `${AnnotationType.FindBy}(${option} = "${locator}")`;
 
 export const getLocatorTemplateWithVividus = (
   pageObjectName: string,
   locatorType: LocatorType,
   locator: ILocator,
 ): string => `variables.${pageObjectName}.${locator.type}.${locator.name}=By.${camelCase(locatorType)}`;
 
+export const vividusColorizedString = (
+  pageObjectName: string,
+  locatorType: LocatorType,
+  element: ILocator,
+  locatorValueOutput: string,
+) => {
+  return (
+    <>
+      <span>{getLocatorTemplateWithVividus(pageObjectName, locatorType, element)}</span>(
+      <span className="jdn__locator_output-string">{locatorValueOutput}</span>)
+      <br />
+    </>
+  );
+};
+
+// used in the coverage panel in the Copy option of the Context Menu:
+export const getLocatorWithJDIAnnotation = (locator: string, locatorType: LocatorType): string =>
+  `${AnnotationType.UI}("${getLocatorAnnotationStringByType(locator, locatorType, AnnotationType.UI)}")`;
+// used in the coverage panel in the Copy option of the Context Menu:
+export const getLocatorWithSelenium = (locator: string, option: string): string =>
+  `${AnnotationType.FindBy}(${option} = "${locator}")`;
+
 export const getFullLocatorVividusString = (
   pageObjectName: string,
   locatorType: LocatorType,

src/pageServices/contentScripts/utils.ts

@@ -51,6 +51,10 @@ 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);
     }