如何使用 Selenide 读取/写入/更改 jQuery UI 滑块？

Posted 2023-05-08

【中文标题】如何使用 Selenide 读取/写入/更改 jQuery UI 滑块？

【英文标题】：How to read/write/change jQuery UI slider with Selenide?

【发布时间】：2021-10-01 07:19:02

【问题描述】：

我想测试一下 jQuery UI 滑块如何

与 Selenide 一起使用。我试过了

$("#L3, #numeric-ui-slider-handle").sendKeys(Keys.ARROW_RIGHT);

但这失败了

Invalid element state: element not interactable

如果手动激活元素并按右箭头键就可以了。

要么我需要全局发送键，而不是针对元素，要么我需要以某种方式直接设置它的值。

【问题讨论】：

如果适用的话，我们也可以有 html 吗？

@cruisepandey 它是 jQuery UI，它是使用带有 $("something").slider(...) 的 javascript 创建的

如果只是测试滑块的位置，你可以看到style="left: 62%;在你移动滑块的时候已经更新了。

我觉得这可以通过动作类来完成。

@cruisepandey 假设我想将滑块移动到左侧的下一个位置，如何计算百分比？也许我可以以某种方式从 Selenide/Selenium 调用滑块对象的 value methid？

【参考方案1】：

这是移动滑块所需的一切，并使用% 对其进行测试，如下所示：-

@Test
public void testJQuerySlider() throws InterruptedException 
    driver = new ChromeDriver();
    driver.manage().window().maximize();
    driver.get("https://jqueryui.com/slider/");
    WebDriverWait wait = new WebDriverWait(driver, 30);
    Actions action = new Actions(driver);
    wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.className("demo-frame")));
    System.out.println("Inside iframe");
    WebElement slider = wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("div#slider span")));
    slider.click();
    String sliderPosition = slider.getAttribute("style");
    System.out.println(sliderPosition);
    Thread.sleep(2000);
    for (int i = 0; i<=10; i++) 
        action.sendKeys(Keys.ARROW_RIGHT).build().perform();
        Thread.sleep(1000);
    
    WebElement newslider = wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("div#slider span")));
    String newSliderPosition = newslider.getAttribute("style");
    System.out.println(newSliderPosition);