@zeesoft/i18n-verify 1.0.0 → 2.0.0

package/dist/driver/adapters/nightwatch.js

@@ -40,14 +40,20 @@ class NightWatchDriver extends _baseDriver.default {
   async getValue(element) {
     return await element.getAttribute('value');
   }
+  async getElementID(element) {
+    return await element.getAttribute('id');
+  }
   async getElementDimension(element) {
     const eleSize = await element.getRect();
     if (![null, '', undefined].includes(eleSize)) {
       return [eleSize.x, eleSize.y, eleSize.height, eleSize.width];
     }
   }
-  isElementDisplayed(element) {
-    return this.$driver.isVisible(element);
+  async isElementDisplayed(element) {
+    return await this.$driver.isVisible(element);
+  }
+  async isElementPresent(element) {
+    return await this.$driver.isPresent(element);
   }
   async getElementStrings(element) {
     const elementStrings = [];
@@ -91,5 +97,38 @@ class NightWatchDriver extends _baseDriver.default {
   async getElementsCount(elements) {
     return elements.length;
   }
+  async switchFrame(frameID) {
+    if (frameID && frameID !== '') {
+      await this.$driver.frame(frameID, () => {
+        console.log(`Switching to iframe '${frameID}'`);
+      });
+    } else {
+      await this.$driver.frame(() => {
+        console.log('Switching to parentFrame');
+      });
+    }
+  }
+  pause(time) {
+    this.$driver.pause(time * 1000);
+  }
+  async onScreenStringHighlight(el, color) {
+    await this.$driver.execute((el, color) => {
+      el.style.border = `3px solid ${color}`;
+      setTimeout(() => {
+        el.style.border = 'none';
+      }, 50);
+    }, [el, color]);
+  }
+  async checkIfIframeIsPresent() {
+    return new Promise(res => {
+      this.$driver.isPresent({
+        selector: '//iframe',
+        locateStrategy: 'xpath',
+        suppressNotFoundErrors: true
+      }, result => {
+        res(result.value);
+      });
+    });
+  }
 }
 exports.default = NightWatchDriver;

package/dist/driver/baseDriver.js

@@ -47,9 +47,15 @@ class BaseDriver {
   getElementDimension() {
     throw new Error('implementation is missing');
   }
+  getElementID() {
+    throw new Error('implementation is missing');
+  }
   isElementDisplayed() {
     throw new Error('implementation is missing');
   }
+  isElementPresent() {
+    throw new Error('implementation is missing');
+  }
   getElementString() {
     throw new Error('implementation is missing');
   }
@@ -62,6 +68,18 @@ class BaseDriver {
   getElementsCount() {
     throw new Error('implementation is missing');
   }
+  switchFrame() {
+    throw new Error('implementation is missing');
+  }
+  pause() {
+    throw new Error('implementation is missing');
+  }
+  onScreenStringHighlight() {
+    throw new Error('implementation is missing');
+  }
+  checkIfIframeIsPresent() {
+    throw new Error('implementation is missing');
+  }
   printOnConsole(str) {
     console.log(str);
   }

package/dist/lib/config.js

@@ -40,6 +40,9 @@ class Config {
   static getGarbledChars() {
     return [...(this.#options.garbledChars || []), ..._constants.GARBLED_CHARACTERS];
   }
+  static getL10nReportsPath() {
+    return this.#options.l10nReportsPath;
+  }
   static setDriver(driver) {
     this.#driver = driver;
   }

package/dist/lib/i18n.js

@@ -68,12 +68,18 @@ class I18nVerify {
   }
   async #getElement(verificationArea, locator, img_name, desc) {
     const ele = await this.#driver.getElement(locator);
-    if (ele && (await this.#driver.isElementDisplayed(ele))) {
+    if (ele && (await this.#driver.isElementPresent(ele))) {
       let str;
       try {
         str = await this.#driver.getElementString(ele);
         try {
-          await this.#generateReports(verificationArea, ele, img_name, str, desc);
+          await this.#generateReports({
+            verificationArea,
+            ele,
+            img_name,
+            str,
+            desc
+          });
         } catch (reportError) {
           console.error('Error generating report of element:', reportError);
         }
@@ -88,13 +94,19 @@ class I18nVerify {
     const eles = await this.#driver.getElements(xpaths);
     if (eles.length > 0) {
       for (const el of eles) {
-        if (await this.#driver.isElementDisplayed(el)) {
+        if (await this.#driver.isElementPresent(el)) {
           let uiStrings;
           try {
             uiStrings = await this.#driver.getElementStrings(el);
             try {
               for (const str of uiStrings) {
-                await this.#generateReports(verificationArea, el, img_name, str, desc);
+                await this.#generateReports({
+                  verificationArea,
+                  el,
+                  img_name,
+                  str,
+                  desc
+                });
               }
             } catch (reportError) {
               console.error('Error generating report of element:', reportError);
@@ -104,11 +116,25 @@ class I18nVerify {
           }
         }
       }
-    } else {
-      console.error('No elements found:', xpaths);
+    }
+    if (await this.#driver.checkIfIframeIsPresent()) {
+      await this.#driver.switchFrame(null);
+      const iframes = await this.#driver.getElements('//iframe');
+      await this.#verifyIframeElements({
+        iframes,
+        img_name,
+        desc
+      });
     }
   }
-  async #generateReports(verificationArea, el, image_name, str, desc) {
+  async #generateReports({
+    verificationArea,
+    el,
+    img_name,
+    str,
+    desc,
+    iframePresent = false
+  }) {
     //TODO: in some cases, the str is having 0
     //needs more inspection
     if (typeof str !== 'string' || !str || Number(str) === 0) {
@@ -116,45 +142,60 @@ class I18nVerify {
     }
     _reports.default.incrementCount(_constants.I18N_STATUS.REVIEWED);
     const i18nStatus = _index.default.getIssueType(str),
-      src_img = (0, _file.joinPaths)(_reports.default.reviewedReports(str, image_name), image_name);
+      src_img = (0, _file.joinPaths)(_reports.default.reviewedReports(str, img_name), img_name);
     if (i18nStatus && src_img && typeof _reports.default[i18nStatus] === 'function') {
       const color = this.#defineColor(i18nStatus, str),
-        dest_img = (0, _file.joinPaths)(_reports.default[i18nStatus](str, image_name), image_name);
-      const eles = [];
-      eles.push(el);
-      browser.perform(async function () {
-        for (const el of eles) {
-          if (true) {
-            // Highlight the element using custom JavaScript
-            browser.execute(function (el, color) {
-              el.style.border = `3px solid ${color}`;
-              setTimeout(function () {
-                el.style.border = 'none'; // Remove border
-              }, 50);
-            }, [el, color]);
-          }
-        }
+        dest_img = (0, _file.joinPaths)(_reports.default[i18nStatus](str, img_name), img_name);
+      this.#driver.onScreenStringHighlight(el, color);
+      await this.#highlightReports({
+        verificationArea,
+        el,
+        color,
+        src_img,
+        dest_img,
+        str,
+        iframePresent,
+        desc
       });
-      await this.#highlightReports(verificationArea, el, color, src_img, dest_img, str);
     }
   }
-  async #highlightReports(verificationArea, el, color, src_img, rep_img, str) {
+  async #highlightReports({
+    verificationArea,
+    el,
+    color,
+    src_img,
+    dest_img,
+    str,
+    iframePresent,
+    desc
+  }) {
     try {
-      if (_fs.default.existsSync(src_img) && !_fs.default.existsSync(rep_img)) {
-        _fs.default.copyFileSync(src_img, rep_img);
-      } else if (!_fs.default.existsSync(rep_img) && !_fs.default.existsSync(src_img)) {
+      if (_fs.default.existsSync(src_img) && !_fs.default.existsSync(dest_img)) {
+        _fs.default.copyFileSync(src_img, dest_img);
+      } else if (!_fs.default.existsSync(dest_img) && !_fs.default.existsSync(src_img)) {
         await this.#captureCurrentScreen(src_img);
-        _fs.default.copyFileSync(src_img, rep_img);
+        _fs.default.copyFileSync(src_img, dest_img);
       }
     } catch (error) {
       _logs.default.error(`zee-error#2 - ${src_img} is not exists and unable to capture screenshot`);
     }
-    const area = await this.#driver.getElement(verificationArea);
+    let areaRec;
+    let eleRec = await this.#getRect(el);
     const areaColor = _constants.COLOR.GRB_BLUE;
-    const areaRec = await this.#getRect(area);
-    const eleRec = await this.#getRect(el);
-    await _dGraphic.default.drawRectangle(areaRec, areaColor, rep_img);
-    await _dGraphic.default.drawRectangle(eleRec, color, rep_img);
+    if (iframePresent) {
+      areaRec = verificationArea;
+      const keysToUpdate = ['x', 'y'];
+      for (const key of keysToUpdate) {
+        if (key in eleRec && key in areaRec) {
+          eleRec[key] = areaRec[key] + eleRec[key];
+        }
+      }
+    } else {
+      const area = await this.#driver.getElement(verificationArea);
+      areaRec = await this.#getRect(area);
+    }
+    await _dGraphic.default.drawRectangle(areaRec, areaColor, dest_img);
+    await _dGraphic.default.drawRectangle(eleRec, color, dest_img);
   }
   async #captureCurrentScreen(imagePath) {
     await this.#driver.captureScreenshot(imagePath);
@@ -173,5 +214,42 @@ class I18nVerify {
     _logs.default.debug(`[${str}] ${_constants.STATUS_COLOR[i18nStatus][1]} ${_constants.STATUS_INFO[i18nStatus]}${'\x1b[0m'}`);
     return _constants.STATUS_COLOR[i18nStatus][0];
   }
+  async #verifyIframeElements({
+    iframes,
+    img_name,
+    desc
+  }) {
+    for (const iframe of iframes) {
+      const frameID = await this.#driver.getElementID(iframe);
+      const verificationArea = await this.#getRect(iframe);
+      await this.#driver.switchFrame(frameID);
+      this.#driver.pause(10);
+      const iframeBody = await this.#driver.getElement('//body');
+      await this.#driver.isElementPresent(iframeBody);
+      const iframeElements = await this.#driver.getElements('//*[normalize-space(text())]');
+      if (iframeElements.length > 0) {
+        for (const el of iframeElements) {
+          if (await this.#driver.isElementPresent(el)) {
+            let uiStrings = await this.#driver.getElementStrings(el);
+            try {
+              for (const str of uiStrings) {
+                await this.#generateReports({
+                  verificationArea,
+                  el,
+                  img_name,
+                  str,
+                  desc,
+                  iframePresent: true
+                });
+              }
+            } catch (reportError) {
+              console.error('Error generating report of iframe elements:', reportError);
+            }
+          }
+        }
+      }
+      await this.#driver.switchFrame(null);
+    }
+  }
 }
 exports.default = I18nVerify;

package/dist/utils/configFile.js

@@ -12,6 +12,7 @@ const getConfigTemplate = (type = '') => `{
     "type": "${type}", // set automation framework type ${(0, _common.arr2Txt)(Object.values(_constants.SYSTEM_TYPES))}
     "qaLocale": "", // set the qa locale used in your project
     "l10nResourcePath": "./l10nResources", // set the dir path of l10n resources
+    "l10nReportsPath": "./l10nReports/", // set the dir path of l10n reports
     "supportedLocales": ["en_US", "fr_FR", "ja_JP"], // set the list of supported locales
     "defaultLocale": "en_US", // set default locale of the application
     "qaMock": { // set the prefix and suffix characters of qa locale
@@ -48,7 +49,7 @@ const validateConfig = config => {
 
   // add required property validations
   const missingKeys = [];
-  if (!(0, _common.allPropertyExists)(['l10nResourcePath', 'supportedLocales', 'defaultLocale', 'type'], config, missingKeys)) {
+  if (!(0, _common.allPropertyExists)(['l10nResourcePath', 'l10nReportsPath', 'supportedLocales', 'defaultLocale', 'type'], config, missingKeys)) {
     throw new Error(`following properties are missing in ${_constants.CONFIG_FILE_NAME} file: ${(0, _common.arr2Txt)(missingKeys)}`);
   }
   if (!Object.values(_constants.SYSTEM_TYPES).includes(config?.type || '')) {

package/dist/utils/reportFactory/html/index.js

@@ -10,7 +10,7 @@ var _logs = _interopRequireDefault(require("../../logs.js"));
 var _base = _interopRequireDefault(require("../base.js"));
 var _css = require("./template/css.js");
 var _html = require("./template/html.js");
-var _javascript = require("./template/javascript.js");
+var _index = _interopRequireDefault(require("./template/javascript/index.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class HtmlReport extends _base.default {
   constructor() {
@@ -18,9 +18,9 @@ class HtmlReport extends _base.default {
   }
   buildContent() {
     const metaInfo = this.getMetaInfo();
-    const script = (0, _javascript.getJsData)(metaInfo);
+    const script = (0, _index.default)(metaInfo);
     const style = (0, _css.getCssData)();
-    const body = (0, _html.getBodyData)(metaInfo);
+    const body = (0, _html.getBodyData)();
     return (0, _html.renderHtml)({
       appName: metaInfo.appName,
       reportTime: metaInfo.reportTime,

package/dist/utils/reportFactory/html/template/css.js

@@ -6,14 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.getCssData = void 0;
 const getCssData = () => `
   * {
-    user-select: none;
-  }
+      user-select: none;
+    }
 
   body {
     margin: 0;
     display: flex;
     flex-direction: column;
     font-family: Arial, sans-serif;
+    font-family: "Helvetica Neue", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased; /* Webkit-based browsers */
+    -moz-osx-font-smoothing: grayscale; /* Firefox on OS X */
+    font-smooth: always; /* Non-standard, some browsers */
   }
 
   header {
@@ -29,7 +33,7 @@ const getCssData = () => `
   }
 
   .sidebar {
-    width: 250px;
+    width: 16rem;
     height: 100%;
     background-color: #333;
     color: #fff;
@@ -77,7 +81,13 @@ const getCssData = () => `
   }
 
   .menu-item.has-submenu > a::after {
-    content: '▼';
+    content: "⯆";
+    float: right;
+    margin-left: 5px;
+  }
+
+  .menu-item.has-submenu.selected > a::after {
+    content: "⯅";
     float: right;
     margin-left: 5px;
   }
@@ -86,6 +96,10 @@ const getCssData = () => `
     background-color: #555;
   }
 
+  .submenu .sub-menu-item {
+    margin: 3px auto;
+  }
+
   .submenu .sub-menu-item a:hover {
     background-color: #777;
   }
@@ -99,10 +113,11 @@ const getCssData = () => `
   }
 
   .content-wrapper {
-    padding: 20px;
+    padding: 1rem;
     float: left;
-    width: calc(100% - 250px);
+    width: calc(100% - 16rem);
     background-color: #f4f4f4;
+    overflow: hidden;
   }
 
   .content {
@@ -112,21 +127,287 @@ const getCssData = () => `
   .content .title {
     font-size: 1rem;
     color: #080404e2;
+    font-weight: 600;
   }
 
   .content .title::after {
-    content: ':';
+    content: ":";
   }
 
   .content.active {
     display: flex !important;
     flex-direction: column;
+    gap: 0.9rem;
+    flex-wrap: wrap;
+    transition: all 2s ease-in-out;
+  }
+
+  .sidebar .footer {
+    bottom: 5px;
+    position: absolute;
+    font-size: 12.4px;
+    color: #14cf96;
+    font-family: system-ui;
+  }
+
+  #overview {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  #overview .card {
+    display: flex;
+    flex-direction: column;
+    width: 25rem;
+    height: 12.5rem;
+    border: 1px solid #ddd;
+    box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    background: white;
+    padding: 1rem;
+  }
+
+  #overview .overall-quality {
+    height: 20rem;
+    flex-basis: 100%;
+    line-height: 14px;
+  }
+
+  #overview .overall-quality .section {
+    display: flex;
+    flex-direction: row;
+  }
+
+  #overview .overall-quality .section .block {
+    width: 50%;
+  }
+
+  #overview .overall-quality .section .block article {
+    padding: 5px;
+  }
+
+  #overview .overall-quality .section .block article p.desc {
+    font-size: 0.9em;
+  }
+
+  #overview .overall-quality .section .block article .items li {
+    font-size: 0.87em;
+  }
+
+  #overview .overall-quality .section .block article .items li .detail {
+    margin-top: -10px;
+  }
+
+  #overview .overall-quality .section .block .graph {
+    margin-top: 1.5em;
+  }
+
+  #overview .string-quality,
+  #overview .number-quality,
+  #overview .datetime-quality,
+  #overview .skipped-items {
+    flex-basis: 45%;
+  }
+
+  #overview .string-quality .graph,
+  #overview .number-quality .graph,
+  #overview .datetime-quality .graph,
+  #overview .skipped-items .graph {
+    align-self: center;
+  }
+
+  #overview .string-quality .graph {
+    margin-left: 4rem;
+  }
+
+  #overview .number-quality.card,
+  #overview .datetime-quality.card {
+    height: 13rem;
+  }
+
+  #overview .number-quality .graph,
+  #overview .datetime-quality .graph {
+    margin-top: -0.9rem;
+    margin-left: 4.5rem;
+  }
+
+  #insights .cards {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  #insights .cards .holder {
+    display: flex;
+    flex-direction: row;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  #insights .cards .card {
+    display: flex;
+    flex-direction: column;
+    width: 20rem;
+    min-height: 10rem;
+    border: 1px solid #ddd;
+    box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    background: white;
+  }
+
+  #insights .cards .card:hover {
+    transform: scale(1.015);
+    box-shadow: 0 22px 35px -16px #07ff7d33;
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+  }
+
+  #insights .cards .card .title {
+    height: 2.5rem;
+    font-size: 1rem;
+    padding-top: 1rem;
+    font-weight: 500;
+    width: calc(100% - 1rem);
+    background: #0c5ad9d6;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    padding-left: 1rem;
+    color: white;
+  }
+
+  #insights .cards .card .title::after {
+    content: "";
+  }
+
+  #insights .cards .card .card-content {
+    display: flex;
+    flex-direction: column;
     gap: 1rem;
+    padding: 1rem;
+  }
+
+  #insights .cards .card .status-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  #insights .cards .card .status-bar .bar-container .name {
+    font-size: 0.78rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  #insights .cards .card .status-bar .bar-container .name::after {
+    content: ":";
+  }
+
+  #insights .cards .card .status-bar .bar-container .bar-holder {
+    width: 100%;
+    height: 10px;
+    border: 1px solid #00000038;
+    border-radius: 2px;
+  }
+
+  #insights .cards .card .status-bar .bar-container .bar-holder .bar {
+    background-color: #14cf96;
+    height: 100%;
+    font-size: 0.63rem;
+    text-align: right;
+    color: white;
+  }
+
+  #insights .cards .card .stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    border: 0.5px solid #00000012;
+    border-radius: 6px;
+  }
+
+  #insights .cards .card .stat table td {
+    font-size: 0.78rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  #insights .cards .card .stat table td.name {
+    width: 70%;
+  }
+
+  #insights .cards .card .stat table td.value::before {
+    content: ":  ";
+  }
+
+  #locale {
+    background: white;
+    padding: 12px;
+    border-radius: 5px;
+    padding-top: 20px;
+  }
+
+  #locale .title {
+    content: ":";
+  }
+
+  #locale .coverage-info {
+    margin-top: 1rem;
+    width: 100%;
+    height: 80vh;
+    padding-right: 1rem;
+    padding-left: 0.1rem;
+  }
+
+  #locale table thead th select.filter {
+    margin-left: 1rem;
+    max-width: 8rem;
+    text-overflow: ellipsis;
+  }
+
+  #locale .image-viewer {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    text-align: center;
+  }
+
+  #locale .image-container {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-block;
+  }
+
+  #locale .image-viewer img {
+    max-width: 90%;
+    max-height: 90%;
+  }
+
+  #locale .close-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+    color: #ffffffbf;
+    font-size: 3.1rem;
+    cursor: pointer;
+  }
+
+  #locale .close-button:hover {
+    color: white;
+  }
+
+  #locale table td .view-screenshot-btn {
+    color: blue;
   }
 
   @media (max-width: 768px) {
     .sidebar {
-      width: 100%;
+      width: 16rem;
       padding: 10px;
     }
   }`;