fix: cannot grab for css attributes with hyphen (#2059)

Author: Richard Petersen

lib/helper/Puppeteer.js

@@ -13,6 +13,7 @@ const {
   ucfirst,
   fileExists,
   chunkArray,
+  toCamelCase,
   convertCssPropertiesToCamelCase,
   screenshotOutputFolder,
   getNormalizedKeyAttributeValue,
@@ -1462,7 +1463,7 @@ class Puppeteer extends Helper {
   async grabCssPropertyFrom(locator, cssProperty) {
     const els = await this._locate(locator);
     const res = await Promise.all(els.map(el => el.executionContext().evaluate(el => JSON.parse(JSON.stringify(getComputedStyle(el))), el)));
-    const cssValues = res.map(props => props[cssProperty]);
+    const cssValues = res.map(props => props[toCamelCase(cssProperty)]);
 
     if (res.length > 0) {
       return cssValues;

lib/utils.js

@@ -210,6 +210,7 @@ function toCamelCase(name) {
     return letter.toUpperCase();
   });
 }
+module.exports.toCamelCase = toCamelCase;
 
 function convertFontWeightToNumber(name) {
   const fontWeightPatterns = [

test/data/app/view/form/doubleclick.php

@@ -9,6 +9,7 @@
     color: white;
     height: 100px;
     width: 150px;
+    user-select: text;
  }
   div.dbl {
     background: yellow;

test/helper/webapi.js

@@ -1143,6 +1143,15 @@ module.exports.tests = function () {
       const css = await I.grabCssPropertyFrom('#block', 'height');
       assert.equal(css, '100px');
     });
+
+    it('should grab camelcased css properies', async () => {
+      if (isHelper('Nightmare')) return;
+      if (isHelper('TestCafe')) return;
+
+      await I.amOnPage('/form/doubleclick');
+      const css = await I.grabCssPropertyFrom('#block', 'user-select');
+      assert.equal(css, 'text');
+    });
   });
 
   describe('#seeAttributesOnElements', () => {