@govtechsg/oobee 0.10.20 → 0.10.28

package/src/static/ejs/partials/scripts/reportSearch.ejs

@@ -195,6 +195,7 @@
 
   function resetIssueOccurrence(filteredItems) {
     for (let category in filteredItems) {
+      if (!["mustFix", "goodToFix", "needsReview", "passed"].includes(category)) continue; // skip other props like pagesScanned, etc
       const issueLabel = filteredItems[category].rules.length === 1 ? 'issue' : 'issues';
       const occurrenceLabel =
         filteredItems[category].totalItems === 1 ? 'occurrence' : 'occurrences';

package/src/static/ejs/partials/scripts/ruleOffcanvas.ejs

@@ -12,31 +12,29 @@ category summary is clicked %>
         wcag111: 'https://www.w3.org/TR/WCAG22/#non-text-content',
         wcag122: 'https://www.w3.org/TR/WCAG22/#captions-prerecorded',
         wcag131: 'https://www.w3.org/TR/WCAG22/#info-and-relationships',
-        wcag134: 'https://www.w3.org/TR/WCAG22/#orientation',
+        // wcag134: 'https://www.w3.org/TR/WCAG22/#orientation',
         wcag135: 'https://www.w3.org/TR/WCAG22/#identify-input-purpose',
         wcag141: 'https://www.w3.org/TR/WCAG22/#use-of-color',
         wcag142: 'https://www.w3.org/TR/WCAG22/#audio-control',
         wcag143: 'https://www.w3.org/TR/WCAG22/#contrast-minimum',
         wcag144: 'https://www.w3.org/TR/WCAG22/#resize-text',
-        wcag146: 'https://www.w3.org/TR/WCAG21/#contrast-enhanced',
-        wcag1410: 'https://www.w3.org/TR/WCAG22/#reflow',
+        wcag146: 'https://www.w3.org/TR/WCAG22/#contrast-enhanced', // AAA
+        // wcag1410: 'https://www.w3.org/TR/WCAG22/#reflow',
         wcag1412: 'https://www.w3.org/TR/WCAG22/#text-spacing',
         wcag211: 'https://www.w3.org/TR/WCAG22/#keyboard',
         wcag221: 'https://www.w3.org/TR/WCAG22/#timing-adjustable',
         wcag222: 'https://www.w3.org/TR/WCAG22/#pause-stop-hide',
-        wcag224: 'https://www.w3.org/TR/WCAG21/#interruptions',
+        wcag224: 'https://www.w3.org/TR/WCAG22/#interruptions', // AAA
         wcag241: 'https://www.w3.org/TR/WCAG22/#bypass-blocks',
         wcag242: 'https://www.w3.org/TR/WCAG22/#page-titled',
-        wcag243: 'https://www.w3.org/TR/WCAG22/#focus-order',
         wcag244: 'https://www.w3.org/TR/WCAG22/#link-purpose-in-context',
-        wcag249: 'https://www.w3.org/TR/WCAG21/#link-purpose-link-only',
+        wcag249: 'https://www.w3.org/TR/WCAG22/#link-purpose-link-only', // AAA
         wcag258: 'https://www.w3.org/TR/WCAG22/#target-size-minimum',
         wcag311: 'https://www.w3.org/TR/WCAG22/#language-of-page',
         wcag312: 'https://www.w3.org/TR/WCAG22/#language-of-parts',
-        wcag315: 'https://www.w3.org/TR/WCAG22/#reading-level',
+        wcag315: 'https://www.w3.org/TR/WCAG22/#reading-level', // AAA
+        wcag325: 'https://www.w3.org/TR/WCAG22/#change-on-request', // AAA
         wcag332: 'https://www.w3.org/TR/WCAG22/#labels-or-instructions',
-        wcag325: 'https://www.w3.org/TR/WCAG21/#change-on-request',
-        wcag411: 'https://www.w3.org/TR/WCAG22/#parsing',
         wcag412: 'https://www.w3.org/TR/WCAG22/#name-role-value',
       };
 
@@ -385,20 +383,22 @@ category summary is clicked %>
         var buttonAIId = `${ruleInCategory.rule}-${category}-button-AI-${index}`;
         var errorAIId = `${ruleInCategory.rule}-${category}-error-AI-${index}`;
 
+        const pageItemsCount = page.items.length || page.itemsCount || 0;
+        const normalMode = page.itemsCount === undefined;
         const accordion = createElementFromString(`
-          <li>
+          <li class="${normalMode ? '' : 'no-chevron'}">
             <div class="accordion mt-2 ${category}">
               <div class="accordion-item">
                 <div class="accordion-header" id="${accordionId}-title">
-                  <button
-                    aria-label="Page ${index + 1}: ${page.pageTitle}, ${page.items.length} ${page.items.length === 1 ? 'occurrence' : 'occurrences'}" class="accordion-button collapsed"
-                    type="button"
+                  ${normalMode ? '<button' : '<div'}
+                    aria-label="Page ${index + 1}: ${page.pageTitle}, ${pageItemsCount} ${pageItemsCount === 1 ? 'occurrence' : 'occurrences'}" class="accordion-button collapsed"
+                    ${normalMode ? 'type="button"' : ''}
 
                   >
-                    <span class="sr-only visually-hidden">${page.items.length} ${page.items.length === 1 ? 'occurrence' : 'occurrences'}</span>
+                    <span class="sr-only visually-hidden">${pageItemsCount} ${pageItemsCount === 1 ? 'occurrence' : 'occurrences'}</span>
                     <div class="me-3">${page.metadata ? page.metadata : page.pageTitle}</div>
-                    <div class="ms-auto counter">${page.items.length}</div>
-                  </button>
+                    <div class="ms-auto counter">${pageItemsCount}</div>
+                  ${normalMode ? '</button>' : '</div>'}
                 </div>
                 <div id="${accordionId}-content" class="accordion-collapse collapse" aria-labelledby="${accordionId}-title">
                   <div class="accordion-body p-3">
@@ -414,7 +414,7 @@ category summary is clicked %>
                     }
                     <div class="page-accordion-content-title">
                       <span>${getFormattedCategoryTitle(category)} elements</span>
-                      <span class="page-items-count">${page.items.length}</span>
+                      <span class="page-items-count">${pageItemsCount}</span>
                     </div>
                   </div>
                 </div>
@@ -423,45 +423,47 @@ category summary is clicked %>
           </li>
         `);
 
-        accordion.querySelector('button').addEventListener('click', function(event) {
-          var accordionBody = accordion.querySelector(".accordion-body");
-
-          // So that It does not keep adding
-          if (!accordionBody.querySelector(".unbulleted-list"))
-          {
-            buildExpandedRuleCategoryContentAccordian(accordionId,category,ruleInCategory,page,index);
-
-            this.setAttribute('data-bs-target', '#' + accordionId+"-content");
+        if (normalMode) {
+          accordion.querySelector('button').addEventListener('click', function(event) {
+            var accordionBody = accordion.querySelector(".accordion-body");
+  
+            // So that It does not keep adding
+            if (!accordionBody.querySelector(".unbulleted-list"))
+            {
+              buildExpandedRuleCategoryContentAccordian(accordionId,category,ruleInCategory,page,index);
+  
+              this.setAttribute('data-bs-target', '#' + accordionId+"-content");
+  
+              // Remove the event listener temporarily
+              this.removeEventListener('click', arguments.callee);
+  
+              // Programmatically trigger a click on the button to open the accordion
+              this.click();
+            }
+          });
 
+          accordion.querySelector('button').addEventListener('click', function(event) {
+            // Set data attributes
+            this.setAttribute('data-bs-toggle', 'collapse');
+            this.setAttribute('data-bs-target', '#' + accordionId + "-content");
+            this.setAttribute('aria-expanded', 'false');
+            this.setAttribute('aria-controls', accordionId + "-content");
+  
+            // Initialize  the Collapse plugin on the button element
+            var collapse = new bootstrap.Collapse(this, {
+              toggle: false // Set to true if you want to toggle the collapsed state on initialization
+            });
+  
             // Remove the event listener temporarily
             this.removeEventListener('click', arguments.callee);
-
+  
             // Programmatically trigger a click on the button to open the accordion
-            this.click();
-          }
-        });
-
-        accordion.querySelector('button').addEventListener('click', function(event) {
-          // Set data attributes
-          this.setAttribute('data-bs-toggle', 'collapse');
-          this.setAttribute('data-bs-target', '#' + accordionId + "-content");
-          this.setAttribute('aria-expanded', 'false');
-          this.setAttribute('aria-controls', accordionId + "-content");
-
-          // Initialize  the Collapse plugin on the button element
-          var collapse = new bootstrap.Collapse(this, {
-            toggle: false // Set to true if you want to toggle the collapsed state on initialization
-          });
-
-          // Remove the event listener temporarily
-          this.removeEventListener('click', arguments.callee);
-
-          // Programmatically trigger a click on the button to open the accordion
-          setTimeout(() => { // Delaying to ensure the content is added before triggering the click
-              this.click();
-          }, 0);
-
-        })
+            setTimeout(() => { // Delaying to ensure the content is added before triggering the click
+                this.click();
+            }, 0);
+  
+          })
+        }
 
         if (isCustomFlow) {
           const customScreenshotElem = accordion.getElementsByClassName(`custom-flow-screenshot`)[0];

package/src/static/ejs/partials/scripts/scanAboutScript.ejs

@@ -0,0 +1,38 @@
+<%# functions to handle interaction and ui for advancedScanOptionsSummary in scanAbout.ejs.
+component %>
+
+<script>
+  let optionsToCheck = scanData.advancedScanOptionsSummaryItems;
+
+  document.querySelectorAll('#advancedScanOptionsSummary li').forEach(liElement => {
+    liElement.classList.add('d-none');
+  });
+
+  function toggleAdvanceScanSummary() {
+    const chevron = document.getElementById('advancedScanOptionsSummaryTitle');
+    const advancedScanOptionsSummary = document.getElementById('advancedScanOptionsSummary');
+
+    const isHidden = advancedScanOptionsSummary.classList.toggle('d-none');
+
+    chevron.classList.toggle('chevron-rotated', !isHidden);
+
+    if (!isHidden) {
+      showScanOptions(optionsToCheck);
+    }
+  }
+
+  function showScanOptions(options) {
+    document.querySelectorAll('#advancedScanOptionsSummary li').forEach(liElement => {
+      liElement.classList.add('d-none');
+    });
+
+    for (const key in options) {
+      if (options[key] === true) {
+        const liElement = document.getElementById(key);
+        if (liElement) {
+          liElement.classList.remove('d-none');
+        }
+      }
+    }
+  }
+</script>

package/src/static/ejs/partials/styles/styles.ejs

@@ -755,7 +755,8 @@
     margin: 1.5rem 0 1rem 0;
   }
 
-  button#wcagModalToggle {
+  button#wcagModalToggle,
+  button#advancedScanOptionsSummaryTitle {
     background: none;
     border: 0;
     padding: 0;
@@ -962,6 +963,26 @@
     width: 1.125rem;
   }
 
+  #advancedScanOptionsSummary li > svg {
+    margin-left: 2rem;
+  }
+
+  #advancedScanOptionsSummaryTitle::after {
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 16" fill="none"><path d="M1.03847 16C0.833084 16 0.632306 15.9388 0.461529 15.8241C0.290753 15.7095 0.157649 15.5465 0.0790493 15.3558C0.000449621 15.1651 -0.0201154 14.9553 0.0199549 14.7529C0.0600251 14.5505 0.158931 14.3645 0.304165 14.2186L6.49293 7.99975L0.304165 1.78088C0.109639 1.58514 0.000422347 1.31979 0.000518839 1.04315C0.000615331 0.766523 0.110018 0.501248 0.30468 0.30564C0.499341 0.110032 0.763331 9.70251e-05 1.03862 6.41929e-08C1.31392 -9.68968e-05 1.57798 0.109652 1.77278 0.305123L8.69586 7.26187C8.8906 7.45757 9 7.72299 9 7.99975C9 8.2765 8.8906 8.54192 8.69586 8.73763L1.77278 15.6944C1.67646 15.7914 1.562 15.8684 1.43598 15.9208C1.30996 15.9733 1.17487 16.0002 1.03847 16Z" fill="%23006B8C" transform="rotate(90, 4.5, 8)"/></svg>');
+    background-size: contain;
+    background-repeat: no-repeat;
+    transform: scaleY(1);
+    margin-left: 0.5rem;
+  }
+
+  #advancedScanOptionsSummaryTitle.chevron-rotated::after {
+    transform: scaleY(-1);
+  }
+
   #footer {
     padding: 0.75rem 1rem;
     box-shadow: 0 -0.25rem 10px #736ccb1a;
@@ -1175,6 +1196,10 @@
     content: none;
   }
 
+  #expandedRuleCategoryContent .no-chevron .accordion-button::before {
+    background-image: none !important;
+  }
+
   #expandedRuleCategoryContent .accordion-button::before {
     content: '';
     width: 0.75rem;

package/src/static/ejs/partials/summaryMain.ejs

@@ -2,11 +2,7 @@
   <main aria-label="Report main content" class="d-flex flex-column flex-grow-1">
     <div class="row m-0 py-4 px-3 d-flex" style="flex-wrap: nowrap">
       <div id="aboutScanDiv" class="pe-md-2 d-flex" style="flex: 1; flex-basis: 300px">
-        <div
-          id="scanabout-compliance-card"
-          class="card h-100"
-          style="width: -webkit-fill-available"
-        >
+        <div id="scanabout-compliance-card" class="card h-100" style="width: -webkit-fill-available">
           <div class="card-body"><%- include("components/summaryScanAbout") %></div>
         </div>
       </div>
@@ -16,36 +12,21 @@
             <h2>Scan results</h2>
             <div class="d-flex justify-content-between align-items-center">
               <span class="fw-bold"> WCAG (A & AA) Passes </span>
-              <span aria-label="Pass percentage" class="ms-2"><%= wcagPassPercentage %>% of automated checks</span>
+              <span aria-label="Pass percentage" class="ms-2">
+                <%= wcagPassPercentage %>% of automated checks
+              </span>
             </div>
             <div class="wcag-compliance-passes-bar mb-5 d-flex">
-              <svg
-                width="500"
-                role="none"
-                height="6"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                style="display: flex; width: 100%; position: absolute"
-              >
-                <rect
-                  width="100%"
-                  height="10"
-                  rx="3"
-                  fill="#E7ECEE"
-                  style="justify-content: left"
-                ></rect>
-                <rect
-                  width="<%= wcagPassPercentage %>%"
-                  height="6"
-                  rx="3"
-                  fill="#9021a6"
-                  style=""
-                ></rect>
+              <svg width="500" role="none" height="6" fill="none" xmlns="http://www.w3.org/2000/svg"
+                style="display: flex; width: 100%; position: absolute">
+                <rect width="100%" height="10" rx="3" fill="#E7ECEE" style="justify-content: left"></rect>
+                <rect width="<%= wcagPassPercentage %>%" height="6" rx="3" fill="#9021a6" style=""></rect>
               </svg>
             </div>
             <ul class="unbulleted-list">
-              <% Object.keys(items).forEach((category) => { %> <%-
-              include("components/summaryScanResults", { category: category }) %> <% }) %>
+              <% Object.keys(items).forEach((category)=> { %> <%- include("components/summaryScanResults", { category:
+                  category }) %>
+                  <% }) %>
             </ul>
           </div>
         </div>
@@ -55,21 +36,13 @@
       <h2 class="mb-2">Summary of issues:</h2>
       <p>
         Only a subset of
-        <a
-          href="https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&versions=2.1&levels=aaa"
-          target="_blank"
-          >WCAG 2.1</a
-        >
+        <a href="https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2" target=" _blank">WCAG 2.2</a>
         (Conformance Level A & AA) Success Criteria can be automatically checked so
-        <a
-          aria-label="Manual testing guide"
-          href="http://go.gov.sg/oobee-manual-testing"
-          target="_blank"
-          >manual testing</a
-        >
+        <a aria-label="Manual testing guide" href="http://go.gov.sg/oobee-manual-testing" target="_blank">manual
+          testing</a>
         is still required. For more details, please refer to the HTML report.
       </p>
     </div>
     <%- include("components/summaryTable") %>
   </main>
-</div>
+</div>

package/src/static/ejs/report.ejs

@@ -17,6 +17,7 @@
       href="data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 6C11.7707 6 10 11.1369 10 19.23V28.77C10 36.8631 11.7707 42 23.5 42C35.2293 42 37 36.8631 37 28.77V19.23C37 11.1369 35.2293 6 23.5 6ZM25.4903 14.5985V35.0562H21.5097V12.9438H27.8925L25.4903 14.5985Z' fill='%239021A6'/%3E%3C/svg%3E
       "
     />
+    <%- include('partials/scripts/decodeUnzipParse') %>
     <%- include('partials/styles/bootstrap') %> <%- include('partials/styles/highlightjs') %> <%-
     include('partials/styles/styles') %>
   </head>
@@ -25,6 +26,7 @@
     <%- include('partials/header') %> <%- include('partials/main') %> <%-
     include('partials/scripts/popper') %> <%- include('partials/scripts/bootstrap') %> <%-
     include('partials/scripts/highlightjs') %> <%- include('partials/scripts/utils') %> <%-
+    include('partials/scripts/scanAboutScript') %> <%-
     include('partials/scripts/categorySelectorDropdownScript') %> <%-
     include('partials/scripts/categorySummary') %> <%- include('partials/scripts/ruleOffcanvas') %>
     <%- include('partials/scripts/screenshotLightbox')%>
@@ -99,7 +101,7 @@
         const scategoryList = document.getElementById('categorySelector');
 
         Object.keys(scanItems).forEach(category => {
-          if (category !== 'passed') {
+          if (["mustFix", "goodToFix", "needsReview"].includes(category)) { // skip other keys like pagesScanned, etc
             const categoryData = scanItems[category];
             const listItem = document.createElement('div');
             listItem.className = 'col-md-4 px-2';
@@ -168,12 +170,10 @@
             spanInfo.id = `${category}ItemsInformation`;
             spanInfo.className = 'category-information';
 
-            if (category !== 'passed' && categoryData.totalItems !== 0) {
+            if (categoryData.totalItems !== 0) {
               spanInfo.textContent = `${categoryData.rules.length} ${categoryData.rules.length === 1 ? 'issue' : 'issues'} / ${categoryData.totalItems} ${categoryData.totalItems === 1 ? 'occurrence' : 'occurrences'}`;
-            } else if (category !== 'passed' && categoryData.totalItems === 0) {
+            } else if (categoryData.totalItems === 0) {
               spanInfo.textContent = `0 issues`;
-            } else {
-              spanInfo.textContent = `${categoryData.totalItems} ${categoryData.totalItems === 1 ? 'occurrence' : 'occurrences'}`;
             }
 
             button.appendChild(divFlex);
@@ -186,7 +186,8 @@
         const categoryList = document.getElementById('issueTypeListbox');
 
         Object.keys(scanItems).forEach(category => {
-          if (category !== 'passed') {
+          if (["mustFix", "goodToFix", "needsReview"].includes(category)) { // skip other keys like pagesScanned, etc
+
             const categoryData = scanItems[category];
             const rulesLength = categoryData.rules ? categoryData.rules.length : 0;
 
@@ -205,12 +206,10 @@
             spanInfo.id = `${category}ItemsInformation`;
             spanInfo.className = 'category-information';
 
-            if (category !== 'passed' && categoryData.totalItems !== 0) {
+            if (categoryData.totalItems !== 0) {
               spanInfo.textContent = `(${categoryData.rules.length} ${categoryData.rules.length === 1 ? 'issue' : 'issues'})`;
-            } else if (category !== 'passed' && categoryData.totalItems === 0) {
+            } else if (categoryData.totalItems === 0) {
               spanInfo.textContent = `(0 issues)`;
-            } else {
-              spanInfo.textContent = `(${categoryData.totalItems} ${categoryData.totalItems === 1 ? 'occurrence' : 'occurrences'})`;
             }
 
             listItem.appendChild(spanTitle);
@@ -407,9 +406,20 @@
       };
 
       document.addEventListener('DOMContentLoaded', () => {
-        initTooltips();
-        scanDataHTML();
+        scanDataPromise.then(() => {
+          console.log("scanData loaded.");
+          scanItemsPromise.then(() => {
+            console.log("scanItems loaded.");
+            initTooltips();
+            scanDataHTML();
+          }).error(e => {
+            console.error("Failed to load scanItems: ", e);
+          });
+        }).error(e => {
+          console.error("Failed to load scanData: ", e);
+        });
       });
+
     </script>
     <!-- Checks if js runs -->
     <script>

package/src/utils.ts

@@ -191,8 +191,15 @@ export const cleanUp = async pathToDelete => {
 //   });
 
 export const getWcagPassPercentage = (wcagViolations: string[]): string => {
-  const totalChecks = Object.keys(constants.wcagLinks).length;
-  const passedChecks = totalChecks - wcagViolations.length;
+
+  // These AAA rules should not be counted as WCAG Pass Percentage only contains A and AA
+  const wcagAAA = ['WCAG 1.4.6', 'WCAG 2.2.4', 'WCAG 2.4.9', 'WCAG 3.1.5', 'WCAG 3.2.5'];
+
+  const filteredWcagLinks = Object.keys(constants.wcagLinks).filter(key => !wcagAAA.includes(key));
+  const filteredWcagViolations = wcagViolations.filter(violation => !wcagAAA.includes(violation));
+  const totalChecks = filteredWcagLinks.length;
+
+  const passedChecks = totalChecks - filteredWcagViolations.length;
   const passPercentage = (passedChecks / totalChecks) * 100;
 
   return passPercentage.toFixed(2); // toFixed returns a string, which is correct here
@@ -241,6 +248,7 @@ export const setHeadlessMode = (browser: string, isHeadless: boolean): void => {
   } else {
     process.env.CRAWLEE_HEADLESS = '0';
   }
+
 };
 
 export const setThresholdLimits = setWarnLevel => {

package/src/xPathToCss.ts

@@ -0,0 +1,186 @@
+/**
+ * XPath to CSS
+ *
+ * Utility function for converting XPath expressions to CSS selectors
+ *
+ * Originally written in Python by [santiycr](https://github.com/santiycr) for
+ * [cssify](https://github.com/santiycr/cssify) and ported to JavaScript by
+ * [Dither](https://github.com/Dither). Converted to ES2015 and packaged as an npm module by
+ * [svenheden](https://github.com/svenheden)
+ */
+
+'use strict';
+
+import { consoleLogger } from "./logs.js";
+
+const isValidXPath = expr => (
+    typeof expr != 'undefined' &&
+    expr.replace(/[\s-_=]/g,'') !== '' &&
+    expr.length === expr.replace(/[-_\w:.]+\(\)\s*=|=\s*[-_\w:.]+\(\)|\sor\s|\sand\s|\[(?:[^\/\]]+[\/\[]\/?.+)+\]|starts-with\(|\[.*last\(\)\s*[-\+<>=].+\]|number\(\)|not\(|count\(|text\(|first\(|normalize-space|[^\/]following-sibling|concat\(|descendant::|parent::|self::|child::|/gi,'').length
+);
+
+const getValidationRegex = () => {
+    let regex =
+        "(?P<node>"+
+          "("+
+            "^id\\([\"\\']?(?P<idvalue>%(value)s)[\"\\']?\\)"+// special case! `id(idValue)`
+          "|"+
+            "(?P<nav>//?(?:following-sibling::)?)(?P<tag>%(tag)s)" + //  `//div`
+            "(\\[("+
+              "(?P<matched>(?P<mattr>@?%(attribute)s=[\"\\'](?P<mvalue>%(value)s))[\"\\']"+ // `[@id="well"]` supported and `[text()="yes"]` is not
+            "|"+
+              "(?P<contained>contains\\((?P<cattr>@?%(attribute)s,\\s*[\"\\'](?P<cvalue>%(value)s)[\"\\']\\))"+// `[contains(@id, "bleh")]` supported and `[contains(text(), "some")]` is not
+            ")\\])?"+
+            "(\\[\\s*(?P<nth>\\d+|last\\(\\s*\\))\\s*\\])?"+
+          ")"+
+        ")";
+
+    const subRegexes = {
+        "tag": "([a-zA-Z][a-zA-Z0-9:-]*|\\*)",
+        "attribute": "[.a-zA-Z_:][-\\w:.]*(\\(\\))?)",
+        "value": "\\s*[\\w/:][-/\\w\\s,:;.]*"
+    };
+
+    Object.keys(subRegexes).forEach(key => {
+        regex = regex.replace(new RegExp('%\\(' + key + '\\)s', 'gi'), subRegexes[key]);
+    });
+
+    regex = regex.replace(/\?P<node>|\?P<idvalue>|\?P<nav>|\?P<tag>|\?P<matched>|\?P<mattr>|\?P<mvalue>|\?P<contained>|\?P<cattr>|\?P<cvalue>|\?P<nth>/gi, '');
+
+    return new RegExp(regex, 'gi');
+};
+
+const preParseXpath = expr => (
+    expr.replace(/contains\s*\(\s*concat\(["']\s+["']\s*,\s*@class\s*,\s*["']\s+["']\)\s*,\s*["']\s+([a-zA-Z0-9-_]+)\s+["']\)/gi, '@class="$1"')
+);
+
+function escapeCssIdSelectors(cssSelector) {
+    return cssSelector.replace(/#([^ >]+)/g, (match, id) => {
+        // Escape special characters in the id part
+        return '#' + id.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, '\\$&');
+    });
+}
+
+export const xPathToCss = expr => {
+    if (!expr) {
+        throw new Error('Missing XPath expression');
+    }
+
+    expr = preParseXpath(expr);
+
+    if (!isValidXPath(expr)) {
+        consoleLogger.error(`Invalid or unsupported XPath: ${expr}`);
+        // do not throw error so that this function proceeds to convert xpath that it does not support
+        // for example, //*[@id="google_ads_iframe_/4654/dweb/imu1/homepage/landingpage/na_0"]/html/body/div[1]/a
+        // becomes #google_ads_iframe_/4654/dweb/imu1/homepage/landingpage/na_0 > html > body > div:first-of-type > div > a
+        // which is invalid because the slashes in the id selector are not escaped
+        // throw new Error('Invalid or unsupported XPath: ' + expr);
+    }
+
+    const xPathArr = expr.split('|');
+    const prog = getValidationRegex();
+    const cssSelectors = [];
+    let xindex = 0;
+
+    while (xPathArr[xindex]) {
+        const css = [];
+        let position = 0;
+        let nodes;
+
+        while (nodes = prog.exec(xPathArr[xindex])) {
+            let attr;
+
+            if (!nodes && position === 0) {
+                throw new Error('Invalid or unsupported XPath: ' + expr);
+            }
+
+            const match = {
+                node: nodes[5],
+                idvalue: nodes[12] || nodes[3],
+                nav: nodes[4],
+                tag: nodes[5],
+                matched: nodes[7],
+                mattr: nodes[10] || nodes[14],
+                mvalue: nodes[12] || nodes[16],
+                contained: nodes[13],
+                cattr: nodes[14],
+                cvalue: nodes[16],
+                nth: nodes[18]
+            };
+
+            let nav = '';
+
+            if (position != 0 && match['nav']) {
+                if (~match['nav'].indexOf('following-sibling::')) {
+                    nav = ' + ';
+                } else {
+                    nav = (match['nav'] == '//') ? ' ' : ' > ';
+                }
+            }
+
+            const tag = (match['tag'] === '*') ? '' : (match['tag'] || '');
+
+            if (match['contained']) {
+                if (match['cattr'].indexOf('@') === 0) {
+                    attr = '[' + match['cattr'].replace(/^@/, '') + '*="' + match['cvalue'] + '"]';
+                } else {
+                    throw new Error('Invalid or unsupported XPath attribute: ' + match['cattr']);
+                }
+            } else if (match['matched']) {
+                switch (match['mattr']) {
+                    case '@id':
+                        attr = '#' + match['mvalue'].replace(/^\s+|\s+$/,'').replace(/\s/g, '#');
+                        break;
+                    case '@class':
+                        attr = '.' + match['mvalue'].replace(/^\s+|\s+$/,'').replace(/\s/g, '.');
+                        break;
+                    case 'text()':
+                    case '.':
+                        throw new Error('Invalid or unsupported XPath attribute: ' + match['mattr']);
+                    default:
+                        if (match['mattr'].indexOf('@') !== 0) {
+                            throw new Error('Invalid or unsupported XPath attribute: ' + match['mattr']);
+                        }
+                        if (match['mvalue'].indexOf(' ') !== -1) {
+                            match['mvalue'] = '\"' + match['mvalue'].replace(/^\s+|\s+$/,'') + '\"';
+                        }
+                        attr = '[' + match['mattr'].replace('@', '') + '="' + match['mvalue'] + '"]';
+                        break;
+                }
+            } else if (match['idvalue']) {
+                attr = '#' + match['idvalue'].replace(/\s/, '#');
+            } else {
+                attr = '';
+            }
+
+            let nth = '';
+
+            if (match['nth']) {
+                if (match['nth'].indexOf('last') === -1) {
+                    if (isNaN(parseInt(match['nth'], 10))) {
+                        throw new Error('Invalid or unsupported XPath attribute: ' + match['nth']);
+                    }
+                    nth = parseInt(match['nth'], 10) !== 1 ? ':nth-of-type(' + match['nth'] + ')' : ':first-of-type';
+                } else {
+                    nth = ':last-of-type';
+                }
+            }
+
+            css.push(nav + tag + attr + nth);
+            position++;
+        }
+
+        const result = css.join('');
+
+        if (result === '') {
+            throw new Error('Invalid or unsupported XPath');
+        }
+
+        cssSelectors.push(result);
+        xindex++;
+    }
+
+    // return cssSelectors.join(', ');
+    const originalResult = cssSelectors.join(', ');
+    return escapeCssIdSelectors(originalResult);
+};

package/src/types/xpath-to-css.d.ts

@@ -1,3 +0,0 @@
-declare module 'xpath-to-css' {
-  export default function xPathToCss(xPath: string): string;
-}