fix: locator builder returns error when class name contains hyphen (#4024)

kobenguyent · web-flow · commit d0901d899200 · 2023-11-29T07:09:10.000+01:00
diff --git a/lib/locator.js b/lib/locator.js
@@ -1,4 +1,4 @@
-const cssToXPath = require('css-to-xpath');
+const cssToXPath = require('convert-cssxpath');
 const { sprintf } = require('sprintf-js');
 
 const { xpathLocator } = require('./utils');
@@ -162,7 +162,7 @@ class Locator {
    */
   toXPath() {
     if (this.isXPath()) return this.value;
-    if (this.isCSS()) return cssToXPath(this.value);
+    if (this.isCSS()) return cssToXPath.convert(this.value);
 
     throw new Error('Can\'t be converted to XPath');
   }
diff --git a/package.json b/package.json
@@ -80,8 +80,8 @@
     "chai-string": "^1.5.0",
     "chalk": "4.1.2",
     "commander": "11.0.0",
+    "convert-cssxpath": "1.0.2",
     "cross-spawn": "7.0.3",
-    "css-to-xpath": "0.1.0",
     "envinfo": "7.11.0",
     "escape-string-regexp": "4.0.0",
     "figures": "3.2.0",
diff --git a/test/unit/locator_test.js b/test/unit/locator_test.js
@@ -49,7 +49,7 @@ const xml = `<body>
       <input name="name1" label="Выберите услугу" type="text" value=""/>
     </div>
   </fieldset>
-  <label>Hello<a href="#">Please click</a></label>
+  <label class="n-1">Hello<a href="#">Please click</a></label>
   </div>
   <input type="hidden" name="return_url" value="" id="return_url" />
 </body>`;
@@ -205,6 +205,12 @@ describe('Locator', () => {
     }).to.throw('round brackets');
   });
 
+  it('should find element with class name contains hyphen', () => {
+    const l = Locator.build('').find('.n-1').first();
+    const nodes = xpath.select(l.toXPath(), doc);
+    expect(nodes).to.have.length(1, l.toXPath());
+  });
+
   it('should throw an error when locator with specific position is nested', () => {
     expect(() => {
       Locator.build('tr').withChild(Locator.build('td').first());
