fix: css to xpath backward compatibility (#4141)

kobenguyent · web-flow · commit ad1bb1548793 · 2024-01-21T08:10:58.000+01:00
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
 test/data/output
+lib/css2xpath/*
diff --git a/lib/locator.js b/lib/locator.js
@@ -1,4 +1,4 @@
-const cssToXPath = require('csstoxpath');
+let cssToXPath;
 const { sprintf } = require('sprintf-js');
 
 const { xpathLocator } = require('./utils');
@@ -162,8 +162,17 @@ class Locator {
    * @returns {string}
    */
   toXPath(pseudoSelector = '') {
+    const locator = `${this.value}${pseudoSelector}`;
+    const limitation = [':nth-of-type', ':first-of-type', ':last-of-type', ':nth-last-child', ':nth-last-of-type', ':checked', ':disabled', ':enabled', ':required', ':lang'];
+
+    if (limitation.some(item => locator.includes(item))) {
+      cssToXPath = require('css-to-xpath');
+    } else {
+      cssToXPath = require('csstoxpath');
+    }
+
     if (this.isXPath()) return this.value;
-    if (this.isCSS()) return cssToXPath(`${this.value}${pseudoSelector}`);
+    if (this.isCSS()) return cssToXPath(locator);
 
     throw new Error('Can\'t be converted to XPath');
   }
@@ -250,7 +259,7 @@ class Locator {
    */
   withText(text) {
     text = xpathLocator.literal(text);
-    const xpath = this.toXPath(`:text-contains-case(${text})`);
+    const xpath = sprintf('%s[%s]', this.toXPath(), `contains(., ${text})`);
     return new Locator({ xpath });
   }
 
@@ -261,7 +270,7 @@ class Locator {
    */
   withTextEquals(text) {
     text = xpathLocator.literal(text);
-    const xpath = this.toXPath(`:text-case(${text})`);
+    const xpath = sprintf('%s[%s]', this.toXPath(), `.= ${text}`);
     return new Locator({ xpath });
   }
 
diff --git a/package.json b/package.json
@@ -76,14 +76,15 @@
     "axios": "1.6.3",
     "chai": "4.3.8",
     "chai-deep-match": "1.2.1",
-    "chai-exclude": "^2.1.0",
-    "chai-json-schema": "^1.5.1",
-    "chai-json-schema-ajv": "^5.2.4",
-    "chai-match-pattern": "^1.3.0",
-    "chai-string": "^1.5.0",
+    "chai-exclude": "2.1.0",
+    "chai-json-schema": "1.5.1",
+    "chai-json-schema-ajv": "5.2.4",
+    "chai-match-pattern": "1.3.0",
+    "chai-string": "1.5.0",
     "chalk": "4.1.2",
     "commander": "11.1.0",
     "cross-spawn": "7.0.3",
+    "css-to-xpath": "0.1.0",
     "csstoxpath": "1.6.0",
     "devtools": "8.27.2",
     "envinfo": "7.11.0",
@@ -92,7 +93,7 @@
     "fn-args": "4.0.0",
     "fs-extra": "11.2.0",
     "glob": "6.0.1",
-    "html-minifier-terser": "^7.2.0",
+    "html-minifier-terser": "7.2.0",
     "inquirer": "6.5.2",
     "joi": "17.11.0",
     "js-beautify": "1.14.11",
@@ -118,7 +119,7 @@
     "@faker-js/faker": "7.6.0",
     "@pollyjs/adapter-puppeteer": "6.0.6",
     "@pollyjs/core": "5.1.0",
-    "@types/chai": "^4.3.7",
+    "@types/chai": "4.3.7",
     "@types/inquirer": "9.0.3",
     "@types/node": "20.10.7",
     "@wdio/sauce-service": "8.27.0",
diff --git a/test/unit/locator_test.js b/test/unit/locator_test.js
@@ -50,6 +50,7 @@ const xml = `<body>
     </div>
   </fieldset>
   <label class="n-1">Hello<a href="#">Please click</a></label>
+  <label class="n1">Hello no hyphen<a href="#">Please click</a></label>
   </div>
   <input type="hidden" name="return_url" value="" id="return_url" />
 
@@ -197,7 +198,7 @@ describe('Locator', () => {
       .inside(Locator.build('label').withText('Hello'));
 
     const nodes = xpath.select(l.toXPath(), doc);
-    expect(nodes).to.have.length(1, l.toXPath());
+    expect(nodes).to.have.length(2, l.toXPath());
     expect(nodes[0].firstChild.data).to.eql('Please click', l.toXPath());
   });
 
@@ -301,4 +302,16 @@ describe('Locator', () => {
     expect(nodes).to.have.length(1, l.toXPath());
     expect(nodes[0].firstChild.data).to.eql('Authoring', l.toXPath());
   });
+
+  it('should find element with last of type with text', () => {
+    const l = Locator.build('.p-confirm-popup:last-of-type button').withText('delete');
+    const nodes = xpath.select(l.toXPath(), doc);
+    expect(nodes).to.have.length(0, l.toXPath());
+  });
+
+  it('should find element with last of type without text', () => {
+    const l = Locator.build('.p-confirm-popup:last-of-type button');
+    const nodes = xpath.select(l.toXPath(), doc);
+    expect(nodes).to.have.length(0, l.toXPath());
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`test/data/output`
	`2`	`+lib/css2xpath/*`