Issue 1281: Vividus integration

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

package.json

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

src/__tests__/__mocks__/pageObjectMocks/pageObject.mock.js

@@ -206,6 +206,137 @@ export const locatorsWithFindBy = [
   },
 ];
 
+export const locatorsVividus = [
+  {
+    element_id: "0057770603115098154872149076_0",
+    predicted_label: "label",
+    childs: ["1052464727115098158766915230"],
+    displayed: false,
+    jdnHash: "0057770603115098154872149076",
+    pageObj: 0,
+    elemName: "",
+    elemId: "",
+    elemText: "Simple Table",
+    elemAriaLabel: null,
+    locator: {
+      xPath: "//*[@index='3']//*[@index='4']/a",
+      fullXpath: "/html/body/div/div[1]/div/div[1]/div/div[1]/ul/li[3]/ul/li[4]/a",
+      cssSelector: '[index="\\33 "] [index="\\34 "] > a',
+      cssSelectorStatus: "SUCCESS",
+      xPathStatus: "SUCCESS",
+      output: '[index="\\33 "] [index="\\34 "] > a',
+      taskStatus: "SUCCESS",
+    },
+    name: "simpleTable",
+    type: "Label",
+    parent_id: "",
+    children: [],
+    active: false,
+    generate: true,
+    annotationType: "@FindBy",
+    locatorType: "CSS selector",
+  },
+  {
+    element_id: "0735357117115098156691382591_0",
+    predicted_label: "label",
+    childs: null,
+    displayed: false,
+    jdnHash: "0735357117115098156691382591",
+    pageObj: 0,
+    elemName: "",
+    elemId: "",
+    elemText: "User Table ",
+    elemAriaLabel: null,
+    locator: {
+      xPath: "//*[contains(text(), 'User Table ')]",
+      fullXpath: "/html/body/header/div/nav/ul[1]/li[3]/ul/li[6]/a",
+      cssSelector: '[role="menu"] > li:nth-child(6) > a',
+      cssSelectorStatus: "SUCCESS",
+      xPathStatus: "SUCCESS",
+      output: "//*[contains(text(), 'User Table ')]",
+      taskStatus: "SUCCESS",
+    },
+    name: "userTable",
+    type: "Label",
+    parent_id: "",
+    children: [],
+    active: false,
+    locatorType: "xPath",
+    annotationType: "@FindBy",
+    library: "HTML5",
+    message: "",
+    isCustomName: true,
+    isCustomLocator: true,
+    generate: true,
+  },
+  {
+    element_id: "0790139442115098150038335533_0",
+    predicted_label: "textarea",
+    childs: null,
+    displayed: false,
+    jdnHash: "0790139442115098150038335533",
+    pageObj: 0,
+    elemName: "",
+    elemId: "password",
+    elemText: "",
+    elemAriaLabel: null,
+    locator: {
+      xPath: "//*[@id='password']",
+      fullXpath: "/html/body/header/div/nav/ul[2]/li/div/form/div/div[2]/div/input",
+      cssSelector: "#password",
+      cssSelectorStatus: "SUCCESS",
+      xPathStatus: "SUCCESS",
+      output: "#password",
+      taskStatus: "SUCCESS",
+    },
+    name: "password",
+    type: "TextArea",
+    parent_id: "",
+    children: [],
+    active: false,
+    locatorType: "CSS selector",
+    annotationType: "@UI",
+    library: "HTML5",
+    message: "",
+    isCustomName: true,
+    isCustomLocator: true,
+    generate: true,
+  },
+  {
+    element_id: "0928942213115098152027249027_0",
+    predicted_label: "label",
+    childs: null,
+    displayed: false,
+    jdnHash: "0928942213115098152027249027",
+    pageObj: 0,
+    elemName: "",
+    elemId: "",
+    elemText: "Dates",
+    elemAriaLabel: null,
+    locator: {
+      xPath: "//a[contains(text(), 'Dates')]",
+      fullXpath: "/html/body/header/div/nav/ul[1]/li[3]/ul/li[2]/a",
+      cssSelector: '[role="menu"] > li:nth-child(2) > a',
+      cssSelectorStatus: "SUCCESS",
+      xPathStatus: "SUCCESS",
+      output: "//a[contains(text(), 'Dates')]",
+      taskStatus: "SUCCESS",
+    },
+    name: "dates",
+    type: "Label",
+    parent_id: "",
+    children: [],
+    active: true,
+    locatorType: "xPath",
+    annotationType: "@UI",
+    library: "HTML5",
+    message: "",
+    isCustomName: true,
+    isCustomLocator: true,
+    generate: true,
+  },
+];
+
 export const pageObjectHTML = `package site.pages;
 
 import com.epam.jdi.light.elements.pageobjects.annotations.locators.*;
@@ -321,3 +452,10 @@ public class HomePage extends WebPage {
     public badge badge;
 }
 `;
+
+export const pageObjectVividus = `variables.HomePage.url=(/jdi-light/index.html)
+variables.HomePage.Label.simpleTable=By.cssSelector(xpath = [index="\\33 "] [index="\\34 "] > a)
+variables.HomePage.Label.userTable=By.xPath(xpath = //*[contains(text(), 'User Table ')])
+variables.HomePage.TextArea.password=By.cssSelector(#password)
+variables.HomePage.Label.dates=By.xPath(//a[contains(text(), 'Dates')])
+`;

src/__tests__/pageObject/__mocks__/selectLocatorsByPageObject.mock.ts

@@ -1,11 +1,12 @@
-import { LocatorType } from "../../../common/types/common";
+import { FrameworkType, LocatorType } from "../../../common/types/common";
 import { ElementLibrary } from "../../../features/locators/types/generationClasses.types";
 import { PageObject } from "../../../features/pageObjects/types/pageObjectSlice.types";
 
 export const pageObject0: PageObject = {
   id: 0,
   name: "HomePage",
   url: "https://jdi-testing.github.io/jdi-light/index.html",
+  framework: FrameworkType.JdiLight,
   library: ElementLibrary.MUI,
   pathname: "/jdi-light/index.html",
   search: "",
@@ -168,7 +169,7 @@ export const selectMockedLocators = (pageObject: PageObject) => [
     elemId: "",
     elemText: "Home",
     elemAriaLabel: null,
-    ...(pageObject.locatorType === LocatorType.cssSelector ? { locatorType: LocatorType.cssSelector } : null),
+    locatorType: pageObject.locatorType || LocatorType.xPath,
     locator: {
       taskStatus: "PENDING",
       xPathStatus: "SUCCESS",

src/__tests__/pageObject/pageObject.test.js

@@ -1,9 +1,12 @@
 import {
+  locators,
   pageObjectMUI,
   pageObjectHTML,
   pageObjectVuetify,
   pageObjectHTMLWithFindBy,
   getLocatorsByAnnotationType,
+  locatorsVividus,
+  pageObjectVividus,
 } from "../__mocks__/pageObjectMocks/pageObject.mock";
 import { elementsWithoutNames } from "../__mocks__/pageObjectMocks/elementsWithoutNames";
 import { elementsWithNames } from "../__mocks__/pageObjectMocks/elementsWithNames";
@@ -12,33 +15,59 @@ import { ElementLibrary } from "../../features/locators/types/generationClasses.
 import { pageObjectTemplate } from "../../features/pageObjects/utils/pageObjectTemplate";
 import { createLocatorNames } from "../../features/pageObjects/utils/pageObject";
 import { getClassName } from "../../features/pageObjects/utils/pageObjectTemplate";
-import { AnnotationType } from "../../common/types/common";
+import { AnnotationType, LocatorType } from "../../common/types/common";
 
 const templateTestData = [
   {
-    input: "HTML",
+    pageObject: {
+      framework: "JDI Light",
+      library: "HTML",
+      name: "HomePage",
+    },
     output: pageObjectHTML,
   },
   {
-    input: "MUI",
+    pageObject: {
+      framework: "JDI Light",
+      library: "MUI",
+      name: "HomePage",
+    },
     output: pageObjectMUI,
   },
   {
-    input: "Vuetify",
+    pageObject: {
+      framework: "JDI Light",
+      library: "Vuetify",
+      name: "HomePage",
+    },
     output: pageObjectVuetify,
   },
 ];
 
 const templateTestDataWithFindBy = {
-  input: "HTML",
+  pageObject: {
+    framework: "JDI Light",
+    library: "HTML",
+    name: "HomePage",
+  },
   output: pageObjectHTMLWithFindBy,
 };
 
+const templateTestDataVividus = {
+  pageObject: {
+    framework: "Vividus",
+    library: "HTML",
+    name: "HomePage",
+    pathname: "/jdi-light/index.html",
+    locatorType: LocatorType.cssSelector,
+  },
+  output: pageObjectVividus,
+};
+
 describe("page object code generation", () => {
-  const locators = getLocatorsByAnnotationType(AnnotationType.UI);
-  templateTestData.forEach(({ input, output }) => {
-    test(`page object generated with ${input}`, () => {
-      const page = pageObjectTemplate(locators, "HomePage", input);
+  templateTestData.forEach(({ pageObject, output }) => {
+    test(`page object generated with ${pageObject.library}`, () => {
+      const page = pageObjectTemplate(locators, pageObject);
       expect(page.pageCode).toBe(output);
       expect(page.title).toBe("HomePage");
     });
@@ -50,10 +79,16 @@ describe("page object code generation", () => {
     });
   });
 
+  test("generate page object template for Vividus", () => {
+    const { pageObject, output } = templateTestDataVividus;
+    const page = pageObjectTemplate(locatorsVividus, pageObject);
+    expect(page.pageCode).toBe(output);
+  });
+
   describe("pageObjectTemplate should return pageObjectHTML with FindBy import", () => {
     const locators = getLocatorsByAnnotationType(AnnotationType.FindBy);
-    test(`when page object generated with ${templateTestDataWithFindBy.input} and locators has Annotation Type === 'FindBy'`, () => {
-      const page = pageObjectTemplate(locators, "HomePage", templateTestDataWithFindBy.input);
+    test(`when page object generated with ${templateTestDataWithFindBy.pageObject.library} and locators has Annotation Type === 'FindBy'`, () => {
+      const page = pageObjectTemplate(locators, templateTestDataWithFindBy.pageObject);
       expect(page.pageCode).toBe(templateTestDataWithFindBy.output);
       expect(page.title).toBe("HomePage");
     });

src/__tests__/pageObject/utils/editPomContent.test.ts

@@ -1,3 +1,4 @@
+import { FrameworkType, LocatorType } from "../../../common/types/common";
 import { ElementLibrary } from "../../../features/locators/types/generationClasses.types";
 import { editPomContent } from "../../../features/pageObjects/utils/templateFileContent";
 import { html5Result, muiResult, vuetifyResult } from "../__mocks__/pomTemplates.mock";
@@ -23,15 +24,30 @@ describe("editPomContent function", () => {
   const testData = [
     {
       output: html5Result,
-      po: { ...pageObject0, library: ElementLibrary.HTML5 },
+      po: {
+        ...pageObject0,
+        framework: FrameworkType.JdiLight,
+        locator: LocatorType.xPath,
+        library: ElementLibrary.HTML5,
+      },
     },
     {
       output: muiResult,
-      po: { ...pageObject0, library: ElementLibrary.MUI },
+      po: {
+        ...pageObject0,
+        framework: FrameworkType.JdiLight,
+        locator: LocatorType.xPath,
+        library: ElementLibrary.MUI,
+      },
     },
     {
       output: vuetifyResult,
-      po: { ...pageObject0, library: ElementLibrary.Vuetify },
+      po: {
+        ...pageObject0,
+        framework: FrameworkType.JdiLight,
+        locator: LocatorType.xPath,
+        library: ElementLibrary.Vuetify,
+      },
     },
   ];
 

src/app/App.tsx

@@ -25,7 +25,8 @@ import { OnboardingProvider } from "../features/onboarding/OnboardingProvider";
 import { isPageObjectPage } from "./utils/heplers";
 
 const App = () => {
-  const [template, setTemplate] = useState<Blob | undefined>(undefined);
+  const [jdiTemplate, setJdiTemplate] = useState<Blob | undefined>(undefined);
+  const [vividusTemplate, setVividusTemplate] = useState<Blob | undefined>(undefined);
   const backendAvailable = useSelector((state: RootState) => state.main.backendAvailable);
   const xpathConfig = useSelector((state: RootState) => state.main.xpathConfig);
   const currentPage = useSelector(selectCurrentPage);
@@ -43,19 +44,20 @@ const App = () => {
   }, []);
 
   useEffect(() => {
-    const fetchTemplate = async () => {
-      setTemplate(await request.getBlob(HttpEndpoint.DOWNLOAD_TEMPLATE));
+    const fetchTemplates = async () => {
+      setJdiTemplate(await request.getBlob(HttpEndpoint.DOWNLOAD_TEMPLATE));
+      setVividusTemplate(await request.getBlob(HttpEndpoint.DOWNLOAD_TEMPLATE_VIVIDUS));
     };
 
     if (backendAvailable === BackendStatus.Accessed) {
-      fetchTemplate();
+      fetchTemplates();
       initLocatorSocketController(xpathConfig);
     }
   }, [backendAvailable]);
 
   const renderPage = () => {
     const { page } = currentPage;
-    return isPageObjectPage(page) ? <PageObjectPage {...{ template }} /> : <LocatorsPage />;
+    return isPageObjectPage(page) ? <PageObjectPage {...{ jdiTemplate, vividusTemplate }} /> : <LocatorsPage />;
   };
 
   return (

src/common/utils/localStorage.ts

@@ -4,6 +4,7 @@ export enum LocalStorageKey {
   AnnotationType = "JDN_ANNOTATION_TYPE",
   LocatorType = "JDN_LOCATOR_TYPE",
   Library = "JDN_LIBRARY",
+  Framework = "JDN_FRAMEWORK",
   Filter = "JDN_FILTER",
 }
 

src/features/locators/selectors/locatorsByPO.selectors.ts

@@ -36,12 +36,13 @@ export const selectPresentLocatorsByPO = createSelector(
       .filter((loc) => locByPageObj.includes(loc.element_id))
       .map((loc) => {
         const annotationType = loc.annotationType || pageObject?.annotationType;
+        const locatorType = loc.locatorType || pageObject?.locatorType || LocatorType.xPath;
         const isDefaultLocatorType = () => !loc.locatorType && pageObject?.locatorType === LocatorType.cssSelector;
 
         return {
           ...loc,
           ...(annotationType && { annotationType }),
-          ...(isDefaultLocatorType() && { locatorType: pageObject?.locatorType }),
+          ...(locatorType && { locatorType }),
           ...(isDefaultLocatorType() && {
             locator: { ...loc.locator, output: getLocator(loc.locator, pageObject?.locatorType) },
           }),

src/features/pageObjects/PageObjectPage.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import { PageObjList } from "./components/PageObjList";
 
 interface Props {
-  template?: Blob;
+  jdiTemplate?: Blob;
+  vividusTemplate?: Blob;
 }
 
 export const PageObjectPage: React.FC<Props> = (props) => {