From 10becfeaa2ac09c0e985065026d8b67859d20010 Mon Sep 17 00:00:00 2001
From: DavertMik <davert@testomat.io>
Date: Tue, 8 Sep 2026 21:34:16 +0300
Subject: [PATCH 1/2] feat: dragSlider and moveCursorTo accept human readable
 locators

Both actions resolved their locator with _locateElement, which wraps the
argument as new Locator(locator, 'css'), so a human readable string was
treated as a CSS selector. There was no findFields / findClickable / role
step anywhere in either chain, and both failed on plain HTML:
dragSlider('Legacy volume', 40) could not find an <input type="range">
labelled by <label for>, and moveCursorTo('Show details') could not find
a <button>.

dragSlider now resolves a fuzzy string through getByRole('slider', {name,
exact: true}), then findFields, then a non-exact role match, then CSS or
XPath. Role-exact runs first because Locator.field.labelContains ends in
unrestricted aria-labelledby branches, which return the wrapping container
ahead of the input for widgets that mirror their label onto both.

moveCursorTo resolves through findClickable, the same path click uses, in
both the plain and the context branch. Non-fuzzy locators short-circuit to
the existing lookup, so CSS, XPath, strict and role locators behave exactly
as before.

Puppeteer and WebDriver have no getByRole, so they use a new
Locator.slider.byLabel XPath covering aria-label, <label for>,
aria-labelledby and a wrapping <label>, restricted to input[type=range]
and [role=slider].

Also fixes the WebDriver drag itself: it resolved the locator three times
and then moved the pointer by the element's page coordinates from wherever
the pointer happened to be, since performActions starts its input source at
the origin. That only landed on the slider when the slider spanned the page.
It now resolves once and moves to the element origin.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TcwzSXPnfaig8nBZD2Vxfi
---
 docs/webapi/dragSlider.mustache           |  5 +-
 docs/webapi/moveCursorTo.mustache         |  4 +-
 lib/helper/Playwright.js                  | 47 +++++++++++---
 lib/helper/Puppeteer.js                   | 45 +++++++++----
 lib/helper/WebDriver.js                   | 57 ++++++++++------
 lib/locator.js                            | 16 +++++
 test/data/app/view/form/hover.php         | 10 +++
 test/data/app/view/form/hover/radix.php   | 48 ++++++++++++++
 test/data/app/view/form/slider.php        | 16 +++++
 test/data/app/view/form/slider/baseui.php | 63 ++++++++++++++++++
 test/data/app/view/form/slider/native.php | 30 +++++++++
 test/data/app/view/form/slider/radix.php  | 63 ++++++++++++++++++
 test/helper/webapi.js                     | 79 +++++++++++++++++++++++
 13 files changed, 439 insertions(+), 44 deletions(-)
 create mode 100644 test/data/app/view/form/hover/radix.php
 create mode 100644 test/data/app/view/form/slider.php
 create mode 100644 test/data/app/view/form/slider/baseui.php
 create mode 100644 test/data/app/view/form/slider/native.php
 create mode 100644 test/data/app/view/form/slider/radix.php

diff --git a/docs/webapi/dragSlider.mustache b/docs/webapi/dragSlider.mustache
index 19030606f..469b41fa1 100644
--- a/docs/webapi/dragSlider.mustache
+++ b/docs/webapi/dragSlider.mustache
@@ -1,9 +1,10 @@
-Drag the scrubber of a slider to a given position
-For fuzzy locators, fields are matched by label text, the "name" attribute, CSS, and XPath.
+Drag the scrubber of a slider to a given position.
+For fuzzy locators, sliders are matched by label text, `aria-label`, the "name" attribute, CSS, and XPath.
 
 ```js
 I.dragSlider('#slider', 30);
 I.dragSlider('#slider', -70);
+I.dragSlider('Volume', 30);
 ```
 
 @param {CodeceptJS.LocatorOrString} locator located by label|name|CSS|XPath|strict locator.
diff --git a/docs/webapi/moveCursorTo.mustache b/docs/webapi/moveCursorTo.mustache
index b5d212669..b3dc987e2 100644
--- a/docs/webapi/moveCursorTo.mustache
+++ b/docs/webapi/moveCursorTo.mustache
@@ -1,16 +1,18 @@
 Moves cursor to element matched by locator.
 Extra shift can be set with offsetX and offsetY options.
+For fuzzy locators, elements are matched the same way as by `click` - by text, `aria-label`, `title`, CSS, and XPath.
 
 An optional `context` (as a second parameter) can be specified to narrow the search to an element within a parent.
 When the second argument is a non-number (string or locator object), it is treated as context.
 
 ```js
 I.moveCursorTo('.tooltip');
+I.moveCursorTo('Show details');
 I.moveCursorTo('#submit', 5,5);
 I.moveCursorTo('#submit', '.container');
 ```
 
-@param {CodeceptJS.LocatorOrString} locator located by CSS|XPath|strict locator.
+@param {CodeceptJS.LocatorOrString} locator located by text|CSS|XPath|strict locator.
 @param {number|CodeceptJS.LocatorOrString} [offsetX=0] (optional, `0` by default) X-axis offset or context locator.
 @param {number} [offsetY=0] (optional, `0` by default) Y-axis offset.
 @returns {void} automatically synchronized promise through #recorder
diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 939988c9a..0449bb09d 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -1505,18 +1505,19 @@ class Playwright extends Helper {
       offsetX = 0
     }
 
-    let el
+    let matcher
     if (context) {
       const contextEls = await this._locate(context)
       assertElementExists(contextEls, context, 'Context element')
-      el = await findElements.call(this, contextEls[0], locator)
-      assertElementExists(el, locator)
-      el = el[0]
+      matcher = contextEls[0]
     } else {
-      el = await this._locateElement(locator)
-      assertElementExists(el, locator)
+      matcher = await this._getContext()
     }
 
+    const els = await findClickable.call(this, matcher, locator)
+    assertElementExists(els, locator)
+    const el = selectElement(els, locator, this)
+
     // Use manual mouse.move instead of .hover() so the offset can be added to the coordinates
     const { x, y } = await clickablePoint(el)
     await this.page.mouse.move(x + offsetX, y + offsetY)
@@ -2871,8 +2872,9 @@ class Playwright extends Helper {
    *
    */
   async dragSlider(locator, offsetX = 0) {
-    const src = await this._locateElement(locator)
-    assertElementExists(src, locator, 'Slider Element')
+    const els = await findSlider.call(this, await this._getContext(), locator)
+    assertElementExists(els, locator, 'Slider Element')
+    const src = selectElement(els, locator, this)
 
     // Note: Using clickablePoint private api because the .BoundingBox does not take into account iframe offsets!
     const sliderSource = await clickablePoint(src)
@@ -4443,6 +4445,35 @@ async function findFields(locator, context = null) {
   return locateFn({ css: locator })
 }
 
+async function findSlider(matcher, locator) {
+  const matchedLocator = new Locator(locator)
+  if (!matchedLocator.isFuzzy()) return findElements.call(this, matcher, matchedLocator)
+
+  let els
+  try {
+    els = await matcher.getByRole('slider', { name: matchedLocator.value, exact: true }).all()
+    if (els.length) return els
+  } catch (err) {
+    // getByRole not supported or failed
+  }
+
+  try {
+    els = await findFields.call(this, matchedLocator.value)
+    if (els.length) return els
+  } catch (err) {
+    // not a field
+  }
+
+  try {
+    els = await matcher.getByRole('slider', { name: matchedLocator.value }).all()
+    if (els.length) return els
+  } catch (err) {
+    // getByRole not supported or failed
+  }
+
+  return findElements.call(this, matcher, matchedLocator.value)
+}
+
 async function proceedSelect(context, el, option) {
   const role = await el.getAttribute('role')
   const options = Array.isArray(option) ? option : [option]
diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js
index ff00f6dd8..8c97738a5 100644
--- a/lib/helper/Puppeteer.js
+++ b/lib/helper/Puppeteer.js
@@ -829,21 +829,18 @@ class Puppeteer extends Helper {
       offsetX = 0
     }
 
-    let el
+    let matcher = await this.context
     if (context) {
       const contextEls = await findElements.call(this, this.page, context)
       assertElementExists(contextEls, context, 'Context element')
-      const els = await findElements.call(this, contextEls[0], locator)
-      if (!els || els.length === 0) {
-        throw new ElementNotFound(locator, 'Element to move cursor to')
-      }
-      el = els[0]
-    } else {
-      el = await this._locateElement(locator)
-      if (!el) {
-        throw new ElementNotFound(locator, 'Element to move cursor to')
-      }
+      matcher = contextEls[0]
+    }
+
+    const els = await findClickable.call(this, matcher, locator)
+    if (!els || els.length === 0) {
+      throw new ElementNotFound(locator, 'Element to move cursor to')
     }
+    const el = selectElement(els, locator, this)
 
     // Use manual mouse.move instead of .hover() so the offset can be added to the coordinates
     const { x, y } = await getClickablePoint(el)
@@ -2156,11 +2153,12 @@ class Puppeteer extends Helper {
    * {{> dragSlider }}
    */
   async dragSlider(locator, offsetX = 0) {
-    const src = await this._locate(locator)
-    assertElementExists(src, locator, 'Slider Element')
+    const els = await findSlider.call(this, await this.context, locator)
+    assertElementExists(els, locator, 'Slider Element')
+    const src = selectElement(els, locator, this)
 
     // Note: Using public api .getClickablePoint because the .BoundingBox does not take into account iframe offsets
-    const sliderSource = await getClickablePoint(src[0])
+    const sliderSource = await getClickablePoint(src)
 
     // Drag start point
     await this.page.mouse.move(sliderSource.x, sliderSource.y, { steps: 5 })
@@ -3148,6 +3146,25 @@ async function findClickable(matcher, locator) {
   return findElements.call(this, matcher, matchedLocator.value) // by css or xpath
 }
 
+async function findSlider(matcher, locator) {
+  const matchedLocator = new Locator(locator)
+  if (!matchedLocator.isFuzzy()) return findElements.call(this, matcher, matchedLocator)
+
+  const literal = xpathLocator.literal(matchedLocator.value)
+
+  let els = await findElements.call(this, matcher, { xpath: Locator.slider.byLabel(literal) })
+  if (els.length) return els
+
+  try {
+    els = await findFields.call(this, matchedLocator.value)
+    if (els.length) return els
+  } catch (err) {
+    // not a field
+  }
+
+  return findElements.call(this, matcher, matchedLocator.value)
+}
+
 async function proceedSee(assertType, text, context, strict = false) {
   let description
   let allText
diff --git a/lib/helper/WebDriver.js b/lib/helper/WebDriver.js
index 62c0b4dc2..c98a993eb 100644
--- a/lib/helper/WebDriver.js
+++ b/lib/helper/WebDriver.js
@@ -1959,16 +1959,8 @@ class WebDriver extends Helper {
       xOffset = undefined
     }
 
-    let res
-    if (context) {
-      const contextRes = await this._locate(withStrictLocator(context), true)
-      assertElementExists(contextRes, context, 'Context element')
-      res = await contextRes[0].$$(withStrictLocator(locator))
-      assertElementExists(res, locator)
-    } else {
-      res = await this._locate(withStrictLocator(locator), true)
-      assertElementExists(res, locator)
-    }
+    const res = await findClickable.call(this, locator, prepareLocateFn.call(this, context))
+    assertElementExists(res, locator)
     const elem = usingFirstElement(res)
     try {
       await elem.moveTo({ xOffset, yOffset })
@@ -2358,13 +2350,18 @@ class WebDriver extends Helper {
    */
   async dragSlider(locator, offsetX = 0) {
     const browser = this.browser
-    await this.moveCursorTo(locator)
+    const els = await findSlider.call(this, locator)
+    assertElementExists(els, locator, 'Slider Element')
+    const el = usingFirstElement(els)
+
+    try {
+      await el.moveTo()
+    } catch (e) {
+      output.debug(e.message)
+    }
 
     // for chrome
     if (browser.isW3C) {
-      const xOffset = await this.grabElementBoundingRect(locator, 'x')
-      const yOffset = await this.grabElementBoundingRect(locator, 'y')
-
       return browser.performActions([
         {
           type: 'pointer',
@@ -2373,17 +2370,17 @@ class WebDriver extends Helper {
           actions: [
             {
               type: 'pointerMove',
-              origin: 'pointer',
-              duration: 1000,
-              x: xOffset,
-              y: yOffset,
+              origin: { 'element-6066-11e4-a52e-4f735466cecf': getElementId(el) },
+              duration: 100,
+              x: 0,
+              y: 0,
             },
             { type: 'pointerDown', button: 0 },
             {
               type: 'pointerMove',
               origin: 'pointer',
               duration: 1000,
-              x: offsetX,
+              x: Math.round(offsetX),
               y: 0,
             },
             { type: 'pointerUp', button: 0 },
@@ -3070,6 +3067,28 @@ async function findClickable(locator, locateFn) {
   return await locateFn(locator.value) // by css or xpath
 }
 
+async function findSlider(locator, context = null) {
+  const locateFn = prepareLocateFn.call(this, context)
+  const matchedLocator = new Locator(locator)
+
+  if (this._isCustomLocator(matchedLocator)) return locateFn(matchedLocator)
+  if (!matchedLocator.isFuzzy()) return locateFn(matchedLocator)
+
+  const literal = xpathLocator.literal(matchedLocator.value)
+
+  let els = await locateFn(Locator.slider.byLabel(literal))
+  if (els.length) return els
+
+  try {
+    els = await findFields.call(this, matchedLocator.value, context)
+    if (els.length) return els
+  } catch (err) {
+    // not a field
+  }
+
+  return locateFn(matchedLocator.value) // by css or xpath
+}
+
 async function findFields(locator, context = null) {
   const locateFn = prepareLocateFn.call(this, context)
   locator = new Locator(locator)
diff --git a/lib/locator.js b/lib/locator.js
index 6a47b71d2..faea23122 100644
--- a/lib/locator.js
+++ b/lib/locator.js
@@ -649,6 +649,22 @@ Locator.field = {
     ]),
 }
 
+Locator.slider = {
+  /**
+   * @param {string} literal
+   * @returns {string}
+   */
+  byLabel: literal => {
+    const slider = "self::input[@type = 'range'] | self::*[@role = 'slider']"
+    return xpathLocator.combine([
+      `.//*[${slider}][@aria-label = ${literal}]`,
+      `.//*[${slider}][@id = //label[@for][normalize-space(string(.)) = ${literal}]/@for]`,
+      `.//*[${slider}][@aria-labelledby = //*[@id][normalize-space(string(.)) = ${literal}]/@id]`,
+      `.//label[normalize-space(string(.)) = ${literal}]//*[${slider}]`,
+    ])
+  },
+}
+
 Locator.checkable = {
   /**
    * @param {string} literal
diff --git a/test/data/app/view/form/hover.php b/test/data/app/view/form/hover.php
index bbf3534f9..64dcbb141 100644
--- a/test/data/app/view/form/hover.php
+++ b/test/data/app/view/form/hover.php
@@ -7,5 +7,15 @@
 
 <div id="show"></div>
 
+<p>
+  <button id="hover-button" onmouseover="document.getElementById('show-button').innerText = 'Button hovered!'">Show details</button>
+</p>
+<div id="show-button"></div>
+
+<p>
+  <span id="hover-card" aria-label="Hover card trigger" onmouseover="document.getElementById('show-card').innerText = 'Card hovered!'">?</span>
+</p>
+<div id="show-card"></div>
+
 </body>
 </html>
diff --git a/test/data/app/view/form/hover/radix.php b/test/data/app/view/form/hover/radix.php
new file mode 100644
index 000000000..8252fad6c
--- /dev/null
+++ b/test/data/app/view/form/hover/radix.php
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Radix Tooltip and Hover Card</title>
+    <style>
+        body { font-family: Arial, sans-serif; padding: 20px; }
+        button { padding: 10px 20px; margin: 20px 0; display: block; }
+        .Content { background: #333; color: #fff; padding: 8px 12px; border-radius: 4px; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Radix Tooltip and Hover Card</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Tooltip, HoverCard } from 'https://esm.sh/radix-ui@1.6.7?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            return h(React.Fragment, null,
+                h(Tooltip.Provider, { delayDuration: 0 },
+                    h(Tooltip.Root, null,
+                        h(Tooltip.Trigger, { asChild: true }, h('button', null, 'Hover me')),
+                        h(Tooltip.Portal, null,
+                            h(Tooltip.Content, { className: 'Content', sideOffset: 5 }, 'Tooltip is open')))),
+                h(HoverCard.Root, { openDelay: 0 },
+                    h(HoverCard.Trigger, { asChild: true }, h('button', null, 'Hover card trigger')),
+                    h(HoverCard.Portal, null,
+                        h(HoverCard.Content, { className: 'Content', sideOffset: 5 }, 'Hover card is open'))))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+
+        window.__ready = true
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/slider.php b/test/data/app/view/form/slider.php
new file mode 100644
index 000000000..4af2efe83
--- /dev/null
+++ b/test/data/app/view/form/slider.php
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Sliders</title>
+</head>
+<body>
+    <h1>Sliders</h1>
+    <p>Test pages for dragSlider and setSliderValue.</p>
+    <ul>
+        <li><a href="/form/slider/native">Native</a> — input[type=range] labelled by &lt;label for&gt; and aria-label</li>
+        <li><a href="/form/slider/radix">Radix</a> — span[role=slider], aria-label on the thumb</li>
+        <li><a href="/form/slider/baseui">Base UI</a> — hidden input[type=range] labelled by aria-labelledby</li>
+    </ul>
+</body>
+</html>
diff --git a/test/data/app/view/form/slider/baseui.php b/test/data/app/view/form/slider/baseui.php
new file mode 100644
index 000000000..4caedc846
--- /dev/null
+++ b/test/data/app/view/form/slider/baseui.php
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Base UI Slider</title>
+    <style>
+        body { font-family: Arial, sans-serif; padding: 20px; }
+        label { display: block; font-weight: bold; margin-bottom: 5px; }
+        .Control { display: flex; align-items: center; width: 200px; height: 20px; }
+        .Track { display: block; position: relative; width: 100%; height: 4px; background: #ccc; border-radius: 9999px; }
+        .Indicator { display: block; position: absolute; height: 100%; background: #333; border-radius: 9999px; }
+        .Thumb { display: block; width: 16px; height: 16px; background: #fff; border: 2px solid #333; border-radius: 50%; }
+        .row { margin-bottom: 30px; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Base UI Slider</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Slider } from 'https://esm.sh/@base-ui/react@1.8.0/slider?external=react,react-dom'
+        import { Field } from 'https://esm.sh/@base-ui/react@1.8.0/field?external=react,react-dom'
+
+        const h = React.createElement
+
+        function Row({ label, step, defaultValue, thumbClass }) {
+            return h(Field.Root, { className: 'row' },
+                h(Field.Label, null, label),
+                h(Slider.Root, { defaultValue, min: 0, max: 100, step },
+                    h(Slider.Control, { className: 'Control' },
+                        h(Slider.Track, { className: 'Track' },
+                            h(Slider.Indicator, { className: 'Indicator' }),
+                            h(Slider.Thumb, { className: thumbClass })))))
+        }
+
+        function App() {
+            return h(React.Fragment, null,
+                h(Row, { label: 'Volume', step: 1, defaultValue: 50, thumbClass: 'Thumb' }),
+                h(Row, { label: 'Base quality', step: 5, defaultValue: 0, thumbClass: 'Thumb' }),
+                h(Row, { label: 'Collapsed gain', step: 1, defaultValue: 0, thumbClass: 'BareThumb' }))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+
+        window.__sliderValue = name => {
+            const label = [...document.querySelectorAll('label')].find(l => l.textContent.trim() === name)
+            if (!label) return null
+            const el = document.querySelector(`[role="slider"][aria-labelledby~="${label.id}"], input[type="range"][aria-labelledby~="${label.id}"]`)
+            return el ? el.getAttribute('aria-valuenow') || el.value : null
+        }
+        window.__ready = true
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/slider/native.php b/test/data/app/view/form/slider/native.php
new file mode 100644
index 000000000..7c2ff9f41
--- /dev/null
+++ b/test/data/app/view/form/slider/native.php
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Native sliders</title>
+    <style>
+        body { font-family: Arial, sans-serif; padding: 20px; }
+        label { display: block; font-weight: bold; margin: 15px 0 5px; }
+        input[type="range"] { width: 200px; }
+    </style>
+</head>
+<body>
+    <h1>Native sliders</h1>
+
+    <label for="legacy-volume">Legacy volume</label>
+    <input type="range" id="legacy-volume" name="volume" min="0" max="100" value="50" step="1">
+
+    <label for="quality">Quality</label>
+    <input type="range" id="quality" name="quality" min="0" max="100" value="0" step="5">
+
+    <input type="range" id="gain" aria-label="Input gain" min="0" max="10" value="5" step="1">
+
+    <input type="range" id="unlabeled" name="unlabeled-gain" min="0" max="10" value="5" step="1">
+
+    <script>
+        window.__value = id => document.getElementById(id).value
+        window.__ready = true
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/slider/radix.php b/test/data/app/view/form/slider/radix.php
new file mode 100644
index 000000000..414b6200f
--- /dev/null
+++ b/test/data/app/view/form/slider/radix.php
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Radix Slider</title>
+    <style>
+        body { font-family: Arial, sans-serif; padding: 20px; }
+        .SliderRoot { position: relative; display: flex; align-items: center; user-select: none; touch-action: none; }
+        .SliderRoot[data-orientation="horizontal"] { width: 200px; height: 20px; }
+        .SliderRoot[data-orientation="vertical"] { flex-direction: column; width: 20px; height: 150px; }
+        .SliderTrack { position: relative; background: #ccc; flex-grow: 1; border-radius: 9999px; }
+        .SliderTrack[data-orientation="horizontal"] { height: 4px; }
+        .SliderTrack[data-orientation="vertical"] { width: 4px; }
+        .SliderRange { position: absolute; background: #333; border-radius: 9999px; }
+        .SliderRange[data-orientation="horizontal"] { height: 100%; }
+        .SliderRange[data-orientation="vertical"] { width: 100%; }
+        .SliderThumb { display: block; width: 16px; height: 16px; background: #fff; border: 2px solid #333; border-radius: 50%; }
+        .row { margin-bottom: 30px; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Radix Slider</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Slider } from 'https://esm.sh/radix-ui@1.6.7?external=react,react-dom'
+
+        const h = React.createElement
+
+        function Row({ label, orientation, step, defaultValue }) {
+            return h('div', { className: 'row' },
+                h('span', null, label),
+                h(Slider.Root, { className: 'SliderRoot', defaultValue: [defaultValue], max: 100, step, orientation },
+                    h(Slider.Track, { className: 'SliderTrack' }, h(Slider.Range, { className: 'SliderRange' })),
+                    h(Slider.Thumb, { className: 'SliderThumb', 'aria-label': label })))
+        }
+
+        function App() {
+            return h(React.Fragment, null,
+                h(Row, { label: 'Brightness', orientation: 'horizontal', step: 1, defaultValue: 50 }),
+                h(Row, { label: 'Radix quality', orientation: 'horizontal', step: 5, defaultValue: 0 }),
+                h(Row, { label: 'Contrast', orientation: 'vertical', step: 1, defaultValue: 50 }))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+
+        window.__sliderValue = name => {
+            const el = document.querySelector(`[role="slider"][aria-label="${name}"]`)
+            return el && el.getAttribute('aria-valuenow')
+        }
+        window.__ready = true
+    </script>
+</body>
+</html>
diff --git a/test/helper/webapi.js b/test/helper/webapi.js
index 40b51c3c3..469fcda1f 100644
--- a/test/helper/webapi.js
+++ b/test/helper/webapi.js
@@ -2407,6 +2407,85 @@ export function tests() {
     })
   })
 
+  describe('#dragSlider - semantic locators', function () {
+    this.timeout(60000)
+
+    async function openComponentPage(page) {
+      await I.amOnPage(`/form/slider/${page}`)
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+    }
+
+    it('drags a native range input located by its label', async () => {
+      await I.amOnPage('/form/slider/native')
+      const before = await I.executeScript(() => window.__value('legacy-volume'))
+      await I.dragSlider('Legacy volume', 40)
+      const after = await I.executeScript(() => window.__value('legacy-volume'))
+      expect(Number(after)).to.be.greaterThan(Number(before))
+    })
+
+    it('drags a native range input located by aria-label', async () => {
+      await I.amOnPage('/form/slider/native')
+      const before = await I.executeScript(() => window.__value('gain'))
+      await I.dragSlider('Input gain', 30)
+      const after = await I.executeScript(() => window.__value('gain'))
+      expect(Number(after)).to.be.greaterThan(Number(before))
+    })
+
+    it('drags a Radix slider located by the thumb aria-label', async () => {
+      await openComponentPage('radix')
+      const before = await I.executeScript(() => window.__sliderValue('Brightness'))
+      await I.dragSlider('Brightness', 40)
+      const after = await I.executeScript(() => window.__sliderValue('Brightness'))
+      expect(Number(after)).to.be.greaterThan(Number(before))
+    })
+
+    it('drags a Base UI slider located by its field label', async () => {
+      await openComponentPage('baseui')
+      const before = await I.executeScript(() => window.__sliderValue('Volume'))
+      await I.dragSlider('Volume', 40)
+      const after = await I.executeScript(() => window.__sliderValue('Volume'))
+      expect(Number(after)).to.be.greaterThan(Number(before))
+    })
+
+    it('reports a missing slider by its human readable name', async () => {
+      await I.amOnPage('/form/slider/native')
+      let message = ''
+      try {
+        await I.dragSlider('No such slider', 10)
+      } catch (e) {
+        message = e.message
+      }
+      expect(message).to.include('No such slider')
+    })
+  })
+
+  describe('#moveCursorTo - semantic locators', function () {
+    this.timeout(60000)
+
+    it('moves the cursor to a button located by its text', async () => {
+      await I.amOnPage('/form/hover')
+      await I.moveCursorTo('Show details')
+      await I.see('Button hovered!', '#show-button')
+    })
+
+    it('moves the cursor to an element located by aria-label', async () => {
+      await I.amOnPage('/form/hover')
+      await I.moveCursorTo('Hover card trigger')
+      await I.see('Card hovered!', '#show-card')
+    })
+
+    it('opens a Radix tooltip and hover card', async () => {
+      await I.amOnPage('/form/hover/radix')
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+
+      await I.moveCursorTo('Hover me')
+      await I.waitForText('Tooltip is open', 10)
+
+      await I.moveCursorTo('Hover card trigger')
+      await I.waitForText('Hover card is open', 10)
+    })
+  })
+
   describe('#strict mode', () => {
     afterEach(() => {
       I.options.strict = false

From 51fa64a5d8f9e46216d18f5d3dde0c92fcd11589 Mon Sep 17 00:00:00 2001
From: DavertMik <davert@testomat.io>
Date: Tue, 8 Sep 2026 21:35:18 +0300
Subject: [PATCH 2/2] feat: add setSliderValue to set a slider to an absolute
 value

There was no way to set a slider to a value. fillField can not be delegated
to fill() for every slider: a range input that a component library collapses
to 0x0 is not visible, so fill() times out, and a <span role="slider"> is not
an input at all. Pixel dragging can not reach a zero size element either.
focus() plus Home/End and arrow keys works for all of them.

setSliderValue(locator, value) reads aria-valuemin, aria-valuemax,
aria-valuenow and step, falling back to the min, max and value attributes of
a native range and then to 0 and 100. It focuses the element, moves to
whichever of the current value, Home or End is cheapest, presses the arrow
key for the axis given by aria-orientation the required number of times, and
asserts the value actually reached the target.

Widgets that are not form fields expose no step, so the increment is measured
by pressing one arrow key and reading the delta. Starting from the current
value rather than always from Home matters over the wire: on WebDriver the
same case went from 23.7s to 0.9s.

An unreachable or out of range value raises a message naming the step and the
nearest reachable values instead of timing out.

dragSlider on an element with no bounding box no longer throws; it applies
offsetX as that many keyboard steps and says so in the debug log.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TcwzSXPnfaig8nBZD2Vxfi
---
 docs/basics.md                      |  17 ++++
 docs/webapi/dragSlider.mustache     |   1 +
 docs/webapi/setSliderValue.mustache |  18 ++++
 lib/helper/Playwright.js            |  29 ++++++
 lib/helper/Puppeteer.js             |  29 ++++++
 lib/helper/WebDriver.js             |  26 +++++
 lib/helper/extras/slider.js         | 146 ++++++++++++++++++++++++++++
 test/helper/webapi.js               | 109 +++++++++++++++++++++
 8 files changed, 375 insertions(+)
 create mode 100644 docs/webapi/setSliderValue.mustache
 create mode 100644 lib/helper/extras/slider.js

diff --git a/docs/basics.md b/docs/basics.md
index c6b7121f3..94a68d218 100644
--- a/docs/basics.md
+++ b/docs/basics.md
@@ -192,6 +192,7 @@ I.click('Delete', '.toolbar')                 // with context
 |---|---|---|---|
 | [click](/web-api#iclick) | [forceClick](/web-api#iforcecclick) | [doubleClick](/web-api#idoubleclick) | [rightClick](/web-api#irightclick) |
 | [forceRightClick](/web-api#iforcerightclick) | [moveCursorTo](/web-api#imovecursorto) | [dragAndDrop](/web-api#idraganddrop) | [dragSlider](/web-api#idragslider) |
+| [setSliderValue](/web-api#isetslidervalue) | | | |
 
 Use **forceClick** when standard click fails (e.g., hidden elements, animations). Use **rightClick** for context menus, **doubleClick** for multi-select.
 
@@ -241,6 +242,22 @@ I.uncheckOption('Subscribe')
 
 > [selectOption](/web-api#iselectoption) works with native `<select>` elements as well as custom components using `role="combobox"` or `role="listbox"`.
 
+#### Sliders
+
+```js
+I.setSliderValue('Volume', 60)      // absolute value
+I.dragSlider('Volume', 40)          // relative, by pixels
+```
+
+[setSliderValue](/web-api#isetslidervalue) sets a slider to an absolute value with the keyboard, so it works with `<input type="range">` and with custom widgets built on `role="slider"` alike — including thumbs that are too small to drag. [dragSlider](/web-api#idragslider) moves the scrubber by pixels and falls back to the keyboard when the element has no size.
+
+Both accept a human-readable name. A component library must expose one: React libraries that render the thumb as a `<span role="slider">` give it no accessible name unless the application adds `aria-label` to the thumb, since a `<label for>` on the slider root points at a `<span>`, which is not labelable.
+
+```js
+// <Slider.Thumb aria-label="Brightness" />
+I.setSliderValue('Brightness', 40)
+```
+
 ### Assertions
 
 CodeceptJS provides **built-in browser assertions** instead of generic `expect()` calls. This keeps tests readable and produces clear failure messages without extra assertion libraries.
diff --git a/docs/webapi/dragSlider.mustache b/docs/webapi/dragSlider.mustache
index 469b41fa1..6cda2de18 100644
--- a/docs/webapi/dragSlider.mustache
+++ b/docs/webapi/dragSlider.mustache
@@ -1,5 +1,6 @@
 Drag the scrubber of a slider to a given position.
 For fuzzy locators, sliders are matched by label text, `aria-label`, the "name" attribute, CSS, and XPath.
+When the slider has no size to drag along, `offsetX` is applied as that many keyboard steps instead.
 
 ```js
 I.dragSlider('#slider', 30);
diff --git a/docs/webapi/setSliderValue.mustache b/docs/webapi/setSliderValue.mustache
new file mode 100644
index 000000000..4309b1c48
--- /dev/null
+++ b/docs/webapi/setSliderValue.mustache
@@ -0,0 +1,18 @@
+Sets a slider to an absolute value.
+
+The value is reached with the keyboard (`Home`/`End` plus arrow keys), so it also works for
+sliders that have no size to drag along and for widgets that are not form fields, like
+`<span role="slider">`. The range and the increment are read from `aria-valuemin`,
+`aria-valuemax` and `step`, falling back to the `min` / `max` attributes of a native
+`<input type="range">`. For fuzzy locators, sliders are matched by label text, `aria-label`,
+the "name" attribute, CSS, and XPath.
+
+```js
+I.setSliderValue('Volume', 60);
+I.setSliderValue('#slider', 0);
+I.setSliderValue({ role: 'slider', name: 'Brightness' }, 40);
+```
+
+@param {CodeceptJS.LocatorOrString} locator located by label|name|CSS|XPath|strict locator.
+@param {number} value value to set the slider to.
+@returns {void} automatically synchronized promise through #recorder
diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 0449bb09d..916e3d154 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -40,6 +40,7 @@ import { findByPlaywrightLocator } from './extras/PlaywrightLocator.js'
 import { dropFile } from './scripts/dropFile.js'
 import WebElement from '../element/WebElement.js'
 import { selectElement } from './extras/elementSelection.js'
+import { readSliderState, setSliderToValue, nudgeSliderByKeyboard, isSliderWithoutBox } from './extras/slider.js'
 import { fillRichEditor } from './extras/richTextEditor.js'
 
 let playwright
@@ -2875,6 +2876,13 @@ class Playwright extends Helper {
     const els = await findSlider.call(this, await this._getContext(), locator)
     assertElementExists(els, locator, 'Slider Element')
     const src = selectElement(els, locator, this)
+    const actions = sliderActions.call(this, src)
+
+    if (isSliderWithoutBox(await actions.state())) {
+      this.debugSection('Slider', `${new Locator(locator)} has no size to drag along, moving it by ${offsetX} steps instead`)
+      await nudgeSliderByKeyboard(actions, offsetX)
+      return this._waitForAction()
+    }
 
     // Note: Using clickablePoint private api because the .BoundingBox does not take into account iframe offsets!
     const sliderSource = await clickablePoint(src)
@@ -2890,6 +2898,19 @@ class Playwright extends Helper {
     return this._waitForAction()
   }
 
+  /**
+   * {{> setSliderValue }}
+   *
+   */
+  async setSliderValue(locator, value) {
+    const els = await findSlider.call(this, await this._getContext(), locator)
+    assertElementExists(els, locator, 'Slider Element')
+    const el = selectElement(els, locator, this)
+
+    await setSliderToValue(sliderActions.call(this, el), new Locator(locator), value)
+    return this._waitForAction()
+  }
+
   /**
    * {{> grabAttributeFrom }}
    *
@@ -4445,6 +4466,14 @@ async function findFields(locator, context = null) {
   return locateFn({ css: locator })
 }
 
+function sliderActions(el) {
+  return {
+    state: () => el.evaluate(readSliderState),
+    focus: () => el.focus(),
+    press: key => this.page.keyboard.press(key),
+  }
+}
+
 async function findSlider(matcher, locator) {
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) return findElements.call(this, matcher, matchedLocator)
diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js
index 8c97738a5..2bf2590dd 100644
--- a/lib/helper/Puppeteer.js
+++ b/lib/helper/Puppeteer.js
@@ -45,6 +45,7 @@ import { dontSeeElementError, seeElementError, dontSeeElementInDOMError, seeElem
 import { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } from './network/actions.js'
 import WebElement from '../element/WebElement.js'
 import { selectElement } from './extras/elementSelection.js'
+import { readSliderState, setSliderToValue, nudgeSliderByKeyboard, isSliderWithoutBox } from './extras/slider.js'
 import { fillRichEditor } from './extras/richTextEditor.js'
 
 let puppeteer
@@ -2156,6 +2157,14 @@ class Puppeteer extends Helper {
     const els = await findSlider.call(this, await this.context, locator)
     assertElementExists(els, locator, 'Slider Element')
     const src = selectElement(els, locator, this)
+    const actions = sliderActions.call(this, src)
+
+    if (isSliderWithoutBox(await actions.state())) {
+      this.debugSection('Slider', `${new Locator(locator)} has no size to drag along, moving it by ${offsetX} steps instead`)
+      await nudgeSliderByKeyboard(actions, offsetX)
+      await this._waitForAction()
+      return
+    }
 
     // Note: Using public api .getClickablePoint because the .BoundingBox does not take into account iframe offsets
     const sliderSource = await getClickablePoint(src)
@@ -2171,6 +2180,18 @@ class Puppeteer extends Helper {
     await this._waitForAction()
   }
 
+  /**
+   * {{> setSliderValue }}
+   */
+  async setSliderValue(locator, value) {
+    const els = await findSlider.call(this, await this.context, locator)
+    assertElementExists(els, locator, 'Slider Element')
+    const el = selectElement(els, locator, this)
+
+    await setSliderToValue(sliderActions.call(this, el), new Locator(locator), value)
+    await this._waitForAction()
+  }
+
   /**
    * {{> grabAttributeFromAll }}
    */
@@ -3146,6 +3167,14 @@ async function findClickable(matcher, locator) {
   return findElements.call(this, matcher, matchedLocator.value) // by css or xpath
 }
 
+function sliderActions(el) {
+  return {
+    state: () => el.evaluate(readSliderState),
+    focus: () => el.focus(),
+    press: key => this.page.keyboard.press(key),
+  }
+}
+
 async function findSlider(matcher, locator) {
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) return findElements.call(this, matcher, matchedLocator)
diff --git a/lib/helper/WebDriver.js b/lib/helper/WebDriver.js
index c98a993eb..871ebf5fb 100644
--- a/lib/helper/WebDriver.js
+++ b/lib/helper/WebDriver.js
@@ -42,6 +42,7 @@ import { dropFile } from './scripts/dropFile.js'
 import { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } from './network/actions.js'
 import WebElement from '../element/WebElement.js'
 import { selectElement } from './extras/elementSelection.js'
+import { readSliderState, setSliderToValue, nudgeSliderByKeyboard, isSliderWithoutBox } from './extras/slider.js'
 import { fillRichEditor } from './extras/richTextEditor.js'
 
 const SHADOW = 'shadow'
@@ -2353,6 +2354,12 @@ class WebDriver extends Helper {
     const els = await findSlider.call(this, locator)
     assertElementExists(els, locator, 'Slider Element')
     const el = usingFirstElement(els)
+    const actions = sliderActions.call(this, el)
+
+    if (isSliderWithoutBox(await actions.state())) {
+      this.debugSection('Slider', `${new Locator(locator)} has no size to drag along, moving it by ${offsetX} steps instead`)
+      return nudgeSliderByKeyboard(actions, offsetX)
+    }
 
     try {
       await el.moveTo()
@@ -2394,6 +2401,17 @@ class WebDriver extends Helper {
     await browser.buttonUp(0)
   }
 
+  /**
+   * {{> setSliderValue }}
+   */
+  async setSliderValue(locator, value) {
+    const els = await findSlider.call(this, locator)
+    assertElementExists(els, locator, 'Slider Element')
+    const el = usingFirstElement(els)
+
+    await setSliderToValue(sliderActions.call(this, el), new Locator(locator), value)
+  }
+
   /**
    * {{> grabAllWindowHandles }}
    */
@@ -3067,6 +3085,14 @@ async function findClickable(locator, locateFn) {
   return await locateFn(locator.value) // by css or xpath
 }
 
+function sliderActions(el) {
+  return {
+    state: () => this.browser.execute(readSliderState, el),
+    focus: () => this.browser.execute(node => node.focus(), el),
+    press: key => this.pressKey(key),
+  }
+}
+
 async function findSlider(locator, context = null) {
   const locateFn = prepareLocateFn.call(this, context)
   const matchedLocator = new Locator(locator)
diff --git a/lib/helper/extras/slider.js b/lib/helper/extras/slider.js
new file mode 100644
index 000000000..086fbfef2
--- /dev/null
+++ b/lib/helper/extras/slider.js
@@ -0,0 +1,146 @@
+const MAX_KEY_PRESSES = 1000
+
+function readSliderState(node) {
+  const attr = name => node.getAttribute(name)
+  const rect = node.getBoundingClientRect()
+  return {
+    min: attr('aria-valuemin') !== null ? attr('aria-valuemin') : attr('min'),
+    max: attr('aria-valuemax') !== null ? attr('aria-valuemax') : attr('max'),
+    value: attr('aria-valuenow') !== null ? attr('aria-valuenow') : node.value,
+    step: attr('step'),
+    orientation: attr('aria-orientation'),
+    width: rect.width,
+    height: rect.height,
+  }
+}
+
+function toNumber(value, fallback = null) {
+  if (value === null || value === undefined || value === '') return fallback
+  const num = Number(value)
+  return Number.isNaN(num) ? fallback : num
+}
+
+function sliderKeys(orientation) {
+  if (orientation === 'vertical') return { increase: 'ArrowUp', decrease: 'ArrowDown' }
+  return { increase: 'ArrowRight', decrease: 'ArrowLeft' }
+}
+
+function tolerance(step) {
+  return Math.max(1e-9, Math.abs(step) * 1e-6)
+}
+
+async function currentValue(actions, fallback) {
+  return toNumber((await actions.state()).value, fallback)
+}
+
+async function pressTowards(actions, plan, options) {
+  const { target, step, keys, locator } = options
+  let current = plan.from
+
+  if (plan.key) {
+    await actions.press(plan.key)
+    current = await currentValue(actions, plan.from)
+  }
+
+  const presses = Math.round(Math.abs(target - current) / step)
+  if (presses > MAX_KEY_PRESSES) {
+    throw new Error(`Slider (${locator}) needs ${presses} key presses to reach ${target}, which is over the limit of ${MAX_KEY_PRESSES}`)
+  }
+
+  const key = target > current ? keys.increase : keys.decrease
+  for (let i = 0; i < presses; i++) {
+    await actions.press(key)
+  }
+  return currentValue(actions, current)
+}
+
+/**
+ * Drives a slider to an absolute value with the keyboard.
+ *
+ * Dragging can not reach a slider that has no bounding box and `fill()` is refused by widgets
+ * that are not form fields, while `focus()` plus Home/End and arrow keys works for both.
+ *
+ * `actions` adapts the helper: `state()` reads the slider attributes, `focus()` focuses it and
+ * `press(key)` sends a single key without waiting between steps.
+ */
+async function setSliderToValue(actions, locator, value) {
+  const target = toNumber(value)
+  if (target === null) throw new Error(`Slider (${locator}) can not be set to "${value}", a number is expected`)
+
+  const state = await actions.state()
+  const min = toNumber(state.min, 0)
+  const max = toNumber(state.max, 100)
+  const keys = sliderKeys(state.orientation)
+
+  if (target < min || target > max) {
+    throw new Error(`Slider (${locator}) can not be set to ${target}, its range is ${min}..${max}`)
+  }
+
+  await actions.focus()
+
+  let step = toNumber(state.step)
+  let current = toNumber(state.value)
+
+  if (step === null || step <= 0) {
+    if (current === null) {
+      await actions.press('Home')
+      current = await currentValue(actions, min)
+    }
+    const before = current
+    await actions.press(before >= max ? keys.decrease : keys.increase)
+    current = await currentValue(actions, before)
+    step = Math.abs(current - before)
+    if (!step) {
+      throw new Error(`Slider (${locator}) does not react to arrow keys, its value can not be set`)
+    }
+  }
+
+  const eps = tolerance(step)
+  const isReachable = distance => Math.abs(Math.round(distance / step) * step - distance) <= eps
+
+  if (!isReachable(target - min)) {
+    const lower = min + Math.floor((target - min) / step) * step
+    throw new Error(`Slider (${locator}) can not be set to ${target}, with step ${step} the nearest values are ${lower} and ${lower + step}`)
+  }
+
+  const starts = []
+  if (current !== null && isReachable(target - current)) starts.push({ key: null, from: current })
+  starts.push({ key: 'Home', from: min })
+  if (isReachable(max - min)) starts.push({ key: 'End', from: max })
+
+  const options = { target, step, keys, locator }
+  const plan = starts.reduce((best, start) => (Math.abs(target - start.from) < Math.abs(target - best.from) ? start : best))
+
+  let reached = await pressTowards(actions, plan, options)
+
+  if (Math.abs(reached - target) > eps && !plan.key) {
+    reached = await pressTowards(actions, { key: 'Home', from: min }, options)
+  }
+
+  if (Math.abs(reached - target) > eps) {
+    throw new Error(`Slider (${locator}) stopped at ${reached} instead of ${target}, the value was clamped or stepped differently`)
+  }
+  return reached
+}
+
+/**
+ * Moves a slider by `offset` steps with the keyboard.
+ * Used by dragSlider when the element has no bounding box to drag along.
+ */
+async function nudgeSliderByKeyboard(actions, offset) {
+  const state = await actions.state()
+  const keys = sliderKeys(state.orientation)
+  const presses = Math.min(Math.abs(Math.round(offset)), MAX_KEY_PRESSES)
+  const key = offset < 0 ? keys.decrease : keys.increase
+
+  await actions.focus()
+  for (let i = 0; i < presses; i++) {
+    await actions.press(key)
+  }
+}
+
+function isSliderWithoutBox(state) {
+  return !state || !state.width || !state.height
+}
+
+export { readSliderState, setSliderToValue, nudgeSliderByKeyboard, isSliderWithoutBox, sliderKeys, MAX_KEY_PRESSES }
diff --git a/test/helper/webapi.js b/test/helper/webapi.js
index 469fcda1f..f9f6b3078 100644
--- a/test/helper/webapi.js
+++ b/test/helper/webapi.js
@@ -2457,6 +2457,115 @@ export function tests() {
       }
       expect(message).to.include('No such slider')
     })
+
+    it('moves a slider that has no size to drag along', async () => {
+      await openComponentPage('baseui')
+      await I.dragSlider('Collapsed gain', 30)
+      expect(Number(await I.executeScript(() => window.__sliderValue('Collapsed gain')))).to.equal(30)
+    })
+  })
+
+  describe('#setSliderValue', function () {
+    this.timeout(60000)
+
+    async function openComponentPage(page) {
+      await I.amOnPage(`/form/slider/${page}`)
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+    }
+
+    async function nativeValue(id) {
+      return Number(await I.executeScript(id => window.__value(id), id))
+    }
+
+    async function componentValue(name) {
+      return Number(await I.executeScript(name => window.__sliderValue(name), name))
+    }
+
+    it('sets a native range input located by its label', async () => {
+      await I.amOnPage('/form/slider/native')
+      await I.setSliderValue('Legacy volume', 40)
+      expect(await nativeValue('legacy-volume')).to.equal(40)
+    })
+
+    it('sets a native range input to its minimum and maximum', async () => {
+      await I.amOnPage('/form/slider/native')
+      await I.setSliderValue('Legacy volume', 0)
+      expect(await nativeValue('legacy-volume')).to.equal(0)
+      await I.setSliderValue('Legacy volume', 100)
+      expect(await nativeValue('legacy-volume')).to.equal(100)
+    })
+
+    it('sets a stepped native slider', async () => {
+      await I.amOnPage('/form/slider/native')
+      await I.setSliderValue('Quality', 35)
+      expect(await nativeValue('quality')).to.equal(35)
+    })
+
+    it('sets a native range input located by its name attribute', async () => {
+      await I.amOnPage('/form/slider/native')
+      await I.setSliderValue('unlabeled-gain', 3)
+      expect(await nativeValue('unlabeled')).to.equal(3)
+    })
+
+    it('sets a slider located by a strict locator', async () => {
+      await I.amOnPage('/form/slider/native')
+      await I.setSliderValue('#legacy-volume', 12)
+      expect(await nativeValue('legacy-volume')).to.equal(12)
+    })
+
+    it('sets a Radix slider rendered as span[role=slider]', async () => {
+      await openComponentPage('radix')
+      await I.setSliderValue('Brightness', 40)
+      expect(await componentValue('Brightness')).to.equal(40)
+    })
+
+    it('sets a vertical Radix slider', async () => {
+      await openComponentPage('radix')
+      await I.setSliderValue('Contrast', 75)
+      expect(await componentValue('Contrast')).to.equal(75)
+    })
+
+    it('sets a stepped Radix slider', async () => {
+      await openComponentPage('radix')
+      await I.setSliderValue('Radix quality', 30)
+      expect(await componentValue('Radix quality')).to.equal(30)
+    })
+
+    it('sets a Base UI slider located by its field label', async () => {
+      await openComponentPage('baseui')
+      await I.setSliderValue('Volume', 20)
+      expect(await componentValue('Volume')).to.equal(20)
+    })
+
+    it('sets a Base UI slider that has no size, which can not be dragged or filled', async () => {
+      await openComponentPage('baseui')
+      await I.setSliderValue('Collapsed gain', 40)
+      expect(await componentValue('Collapsed gain')).to.equal(40)
+    })
+
+    it('reports a value that is out of range', async () => {
+      await I.amOnPage('/form/slider/native')
+      let message = ''
+      try {
+        await I.setSliderValue('Legacy volume', 200)
+      } catch (e) {
+        message = e.message
+      }
+      expect(message).to.include('0..100')
+    })
+
+    it('reports a value that no step can reach', async () => {
+      await I.amOnPage('/form/slider/native')
+      let message = ''
+      try {
+        await I.setSliderValue('Quality', 33)
+      } catch (e) {
+        message = e.message
+      }
+      expect(message).to.include('step 5')
+      expect(message).to.include('30 and 35')
+      expect(await nativeValue('quality')).to.equal(0)
+    })
   })
 
   describe('#moveCursorTo - semantic locators', function () {