#1031 Added support for range API

Co-authored-by: priyanupur <priya.seiji@gmail.com>

lib/elementWrapper/elementWrapperFactory.js

@@ -5,6 +5,7 @@ const TextBoxWrapper = require('./textBoxWrapper');
 const CheckBoxWrapper = require('./checkBoxWrapper');
 const DropDownWrapper = require('./dropDownWrapper');
 const ColorWrapper = require('./colorWrapper');
+const RangeWrapper = require('./rangeWrapper');
 
 const { xpath, isString, isElement, isSelector } = require('../helper');
 const { RelativeSearchElement, handleRelativeSearch } = require('../proximityElementSearch');
@@ -97,6 +98,8 @@ const createElementWrapper = (get, description, elementType) => {
       return new DropDownWrapper(get, description, getIfExists);
     case 'colorField':
       return new ColorWrapper(get, description, getIfExists);
+    case 'rangeType':
+      return new RangeWrapper(get, description, getIfExists);
     default:
       return new ElementWrapper(get, description, getIfExists);
   }

lib/elementWrapper/rangeWrapper.js

@@ -0,0 +1,19 @@
+const Range = require('../elements/range');
+const ElementWrapper = require('./elementWrapper');
+const { firstElement } = require('./helper');
+
+class RangeWrapper extends ElementWrapper {
+  async select(value) {
+    const elem = await firstElement.apply(this);
+    return await elem.select(value);
+  }
+  async value() {
+    const elem = await firstElement.apply(this);
+    return await elem.value();
+  }
+  async elements(retryInterval, retryTimeout) {
+    let elements = await super.elements(retryInterval, retryTimeout);
+    return elements.map(element => Range.from(element, this._description));
+  }
+}
+module.exports = RangeWrapper;

lib/elements/range.js

@@ -0,0 +1,45 @@
+const { setNavigationOptions } = require('../config');
+const { descEvent } = require('../eventBus');
+const Element = require('./element');
+const { defaultConfig } = require('../config');
+const { highlightElement } = require('./elementHelper');
+
+const { doActionAwaitingNavigation } = require('../doActionAwaitingNavigation');
+class Range extends Element {
+  async select(value) {
+    if (defaultConfig.headful) {
+      await highlightElement(this);
+    }
+
+    function setRange(value) {
+      this.value = value;
+    }
+
+    const options = setNavigationOptions({});
+    await doActionAwaitingNavigation(options, async () => {
+      await this.runtimeHandler.runtimeCallFunctionOn(setRange, null, {
+        nodeId: this.get(),
+        arg: value,
+        returnByValue: false,
+      });
+    });
+    descEvent.emit('success', 'Selected ' + (value.index || value));
+  }
+  async value() {
+    function getValue() {
+      if (this.value) {
+        return this.value;
+      }
+      return this.innerText;
+    }
+    const { result } = await this.runtimeHandler.runtimeCallFunctionOn(getValue, null, {
+      nodeId: this.get(),
+    });
+    return result.value;
+  }
+  static from(element, description) {
+    return new Range(element.get(), description, element.runtimeHandler);
+  }
+}
+
+module.exports = Range;

lib/taiko.js

@@ -2205,6 +2205,28 @@ function fileField(attrValuePairs, _options = {}, ...args) {
   return createElementWrapper(get, description, 'fileField');
 }
 
+module.exports.range = range;
+
+function range(attrValuePairs, _options = {}, ...args) {
+  validate();
+  const { selector, options } = prepareParameters(attrValuePairs, _options, ...args);
+  const get = getElementGetter(
+    selector,
+    async () =>
+      await $$xpath(
+        `//input[@type='range'][@id=(//label[contains(string(), ${xpath(
+          selector.label,
+        )})]/@for)] | //label[contains(string(), ${xpath(selector.label)})]/input[@type='range']`,
+        options.selectHiddenElement,
+      ),
+    '//input[@type="range"]',
+    options.selectHiddenElement,
+  );
+
+  const description = desc(selector, 'label', 'Range Type');
+  return createElementWrapper(get, description, 'rangeType');
+}
+
 /**
  * This {@link selector} lets you set color values on color picker on web page with attribute and value pairs and proximity selectors.
  *
@@ -3290,6 +3312,7 @@ module.exports.metadata = {
     'text',
     'tableCell',
     'color',
+    'range',
   ],
   'Proximity selectors': ['toLeftOf', 'toRightOf', 'above', 'below', 'near'],
   Events: ['alert', 'prompt', 'confirm', 'beforeunload'],

test/unit-tests/range.test.js

@@ -0,0 +1,39 @@
+const chai = require('chai');
+const expect = chai.expect;
+const chaiAsPromised = require('chai-as-promised');
+chai.use(chaiAsPromised);
+let { openBrowser, closeBrowser, goto, range, setConfig } = require('../../lib/taiko');
+let { createHtml, removeFile, openBrowserArgs, resetConfig } = require('./test-util');
+
+describe.only('Color picker test', () => {
+  let filePath;
+
+  before(async () => {
+    let innerHtml = `
+        <div>
+            <input type="range" id="range-1" name="range" 
+                min="0" max="100" value='2' step="10">
+            <label for="volume">Volume</label>
+        </div>
+     `;
+    filePath = createHtml(innerHtml, 'Range');
+    await openBrowser(openBrowserArgs);
+    await goto(filePath);
+    setConfig({
+      waitForNavigation: false,
+      retryTimeout: 100,
+      retryInterval: 10,
+    });
+  });
+
+  after(async () => {
+    resetConfig();
+    await closeBrowser();
+    removeFile(filePath);
+  });
+
+  it('Set Range value', async () => {
+    await range({ id: 'range-1' }).select(10);
+    expect(await range({ id: 'range-1' }).value()).to.be.equal('10');
+  });
+});