Bug(range): Set range value on native element setter so that events a…

…re triggered properly (#2370)

Signed-off-by: atulv <[email protected]>

lib/elements/element.js

@@ -1,3 +1,4 @@
+const { setNativeValue } = require('./elementHelper');
 /**
  * Abstract Element present on the web page. Extra methods are available based on the element type.
  * @see {ElementWrapper} for methods available
@@ -123,5 +124,15 @@ class Element {
     }
     return await this._executeAndGetValue(isDraggable);
   }
+
+  async registerNativeValueSetter() {
+    return await this.runtimeHandler.runtimeEvaluate(
+      `if (typeof globalThis.setNativeValue === 'undefined') {
+        globalThis.setNativeValue = ` +
+        setNativeValue.toString() +
+        `
+      }`,
+    );
+  }
 }
 module.exports = Element;

lib/elements/elementHelper.js

@@ -16,4 +16,18 @@ const highlightElement = async (element) => {
     console.warn('WARNING: Taiko cannot highlight hidden elements.');
   }
 };
-module.exports = { highlightElement };
+
+const setNativeValue = function (element, propName, value) {
+  const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, propName) || {};
+  const prototype = Object.getPrototypeOf(element);
+  const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, propName) || {};
+  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else if (valueSetter) {
+    valueSetter.call(element, value);
+  } else {
+    throw new Error('The given element does not have a value setter');
+  }
+};
+
+module.exports = { highlightElement, setNativeValue };

lib/elements/range.js

@@ -2,7 +2,7 @@ const { setNavigationOptions } = require('../config');
 const { descEvent } = require('../eventBus');
 const Element = require('./element');
 const { defaultConfig } = require('../config');
-const { highlightElement } = require('./elementHelper');
+const { highlightElement, setNativeValue } = require('./elementHelper');
 const { doActionAwaitingNavigation } = require('../doActionAwaitingNavigation');
 
 class Range extends Element {
@@ -31,14 +31,16 @@ class Range extends Element {
     }
 
     function setRange(value) {
-      this.value = value;
+      setNativeValue(this, 'value', value);
+
       let rangeValues = {};
       rangeValues['min'] = this.min || 0;
       rangeValues['max'] = this.max || 100;
       rangeValues['current'] = this.value;
 
       let selectAndDispatchEvent = function (self, value) {
-        self.value = value;
+        setNativeValue(self, 'value', value);
+
         ['change', 'input'].forEach((ev) => {
           let event = new Event(ev, { bubbles: true });
           try {
@@ -56,6 +58,8 @@ class Range extends Element {
       selectAndDispatchEvent(this, this.value);
       return rangeValues;
     }
+
+    await this.registerNativeValueSetter();
     const options = setNavigationOptions({});
     let result;
     await doActionAwaitingNavigation(options, async () => {

test/unit-tests/range.test.js

@@ -15,19 +15,20 @@ let {
   $,
 } = require('../../lib/taiko');
 let { createHtml, removeFile, openBrowserArgs, resetConfig } = require('./test-util');
+const { assert } = require('chai');
 
 describe('Range test', () => {
   let filePath;
 
   before(async () => {
     let innerHtml =
       `<script>
-     
+
         class ShadowButton extends HTMLElement {
           constructor() {
             super();
             var shadow = this.attachShadow({mode: 'open'});
-    
+
             var button = document.createElement('input');
             button.setAttribute('type', 'range');
             button.setAttribute('id', 'Shadow Click');
@@ -41,7 +42,7 @@ describe('Range test', () => {
             hiddenButton.setAttribute('id', 'HiddenShadowButton');
             hiddenButton.setAttribute('style','display:none');
             shadow.appendChild(hiddenButton);
-            
+
           }
         }
         customElements.define('shadow-button', ShadowButton);
@@ -50,14 +51,17 @@ describe('Range test', () => {
       `
         <div>
             <p>RangeItem</p>
-            <input type="range" id="range-1" name="range" 
+            <input type="range" id="range-1" name="range"
                 min="0" max="100" value='2'>
             <label for="volume">Volume</label>
         </div>
         <div>
         <p>RangeItem</p>
         <input type="range" id="range-2" name="range" value='2'>
         <label for="volume">Volume</label>
+        <p>Simulate Native Range Setter</p>
+        <input type="range" id="range-3" name="range" value='10'>
+        <label for="volume">Simulate Native Setter</label>
     </div>
      `;
     filePath = createHtml(innerHtml, 'Range');
@@ -86,6 +90,54 @@ describe('Range test', () => {
     });
   });
 
+  describe('set native value', () => {
+    it('should set native value on element', async () => {
+      await evaluate(() => {
+        function trackValueOnElementPrototype(element) {
+          const valueField = 'value';
+          const descriptor = Object.getOwnPropertyDescriptor(
+            element.constructor.prototype,
+            valueField,
+          );
+
+          const { set } = descriptor;
+          Object.defineProperty(element.constructor.prototype, valueField, {
+            configurable: true,
+            set: function (val) {
+              document.nativeSetterCalled = true;
+              set.call(this, val);
+            },
+          });
+        }
+        function trackValueOnElement(element) {
+          const valueField = 'value';
+          const descriptor = Object.getOwnPropertyDescriptor(
+            element.constructor.prototype,
+            valueField,
+          );
+
+          const { get } = descriptor;
+          Object.defineProperty(element, valueField, {
+            configurable: true,
+            get: function () {
+              return get.call(this);
+            },
+            set: function () {
+              document.nativeSetterCalled = false;
+            },
+          });
+        }
+        trackValueOnElementPrototype(document.getElementById('range-3'));
+        trackValueOnElement(document.getElementById('range-3'));
+      });
+
+      expect(await evaluate(() => document.nativeSetterCalled)).to.be.undefined;
+      await range({ id: 'range-3' }).select(57);
+      expect(await evaluate(() => document.nativeSetterCalled)).to.be.true;
+      expect(await range({ id: 'range-3' }).value()).to.be.equal('57');
+    });
+  });
+
   it('Set Range value with Integer', async () => {
     await range({ id: 'range-1' }).select(10);
     expect(await range({ id: 'range-1' }).value()).to.be.equal('10');