如何使用Selenium Webdriver移动jQuery的水平滑块或垂直滑块

Question

我想制作硒脚本，移动滑块在以下网站上给出

示例名称是如何更改 jQuery UI 滑块的方向

http://jqueryui.com/demos/slider/

我不知道该怎么做

Answer 1

我计算出Python等价于Franz Ebner的答案。以防万一它是否帮助了某人

笔记：在 Python 中，

1. find_element_by_XXX在框架中找不到元素，除非您使用switch_to_frame（不确定其他语言）

2. 负 （-） 偏移值无法按预期工作，因此仅按基于传递给方法的百分比计算的偏移值移动

---

def check(self, percent):
    driver = self.driver
    driver.get("http://jqueryui.com/demos/slider/");
    driver.switch_to_frame(0)
    driver.switch_to_active_element()
    slidebar = driver.find_element_by_id("slider")
    height = slidebar.size['height']
    width = slidebar.size['width']
    move = ActionChains(driver);
    slider = driver.find_element_by_xpath("//div[@id='slider']/a")
    if width > height:
        //highly likely a horizontal slider
        move.click_and_hold(slider).move_by_offset(percent * width / 100, 0).release().perform()
    else:
        //highly likely a vertical slider
       move.click_and_hold(slider).move_by_offset(percent * height / 100, 0).release().perform()
    driver.switch_to_default_content()

Answer 2

工作代码 -

WebDriver driver = new InternetExplorerDriver();
driver.get("http://jqueryui.com/demos/slider/");
//Identify WebElement
WebElement slider = driver.findElement(By.xpath("//div[@id='slider']/a"));
//Using Action Class
Actions move = new Actions(driver);
Action action = move.dragAndDropBy(slider, 30, 0).build();
action.perform();
driver.quit();

Answer 3

你试过Action界面吗？

特别是"生成操作链"应该对您有所帮助

/**
 * Moves a jQuery slider to percental position, don't care about directions
 * @param slider to move
 * @param percent to set the slider
 */
public void moveSliderToPercent(WebElement slider, int percent){
    Actions builder = new Actions(this.driver);
    Action dragAndDrop;
    int height = slider.getSize().getHeight();
    int width = slider.getSize().getWidth();

    if(width>height){
        //high likely a horizontal slider
        dragAndDrop = builder.clickAndHold(slider).moveByOffset(-(width/2),0).
                       moveByOffset((int)((width/100)*percent),0).
                       release().build();
    }else{
        //high likely a vertical slider
        dragAndDrop = builder.clickAndHold(slider).moveByOffset(0, -(height/2)).
                       moveByOffset(0,(int)((height/100)*percent)).
                       release().build();
    }

    dragAndDrop.perform();
}

Answer 4

生成操作链

操作

链生成器实现生成器模式以创建包含一组其他操作的复合操作。这应该通过配置操作链生成器实例并调用其 build（） 方法来获取复杂操作来简化构建操作：

 Actions builder = new Actions(driver); 
 Action dragAndDrop = builder.clickAndHold(someElement)
    .moveToElement(otherElement)
    .release(otherElement)
    .build(); 
 dragAndDrop.perform();

Answer 5

在这种情况下，

我更喜欢使用以下代码移动滑块-

Actions builder = new Actions(driver);
Action dragAndDrop =
builder.clickAndHold(someElement).moveByOffset(xOffset,yOffset).release().build();
dragAndDrop.perform();

在这种特殊情况下，将滑块移动一个偏移量而不是使用 moveToElement（otherElement） 是有意义的。

希望这对你有帮助。

Answer 6

我发现由于从浮点数舍入到 int，计算像素偏移量是错误的，所以我找到的解决方案是首先将滑块移动到开头，然后在循环中移动箭头键。向右移动的每个箭头键是滑块的 1 个单位。

Actions action = new Actions(_driver);
var width = slider.Size.Width;
//the moment you issue a click Selenium clicks in the center of the slider
//therefore to move slider to beginning we need to move left half of the slider's length
action.ClickAndHold(slider).MoveByOffset(-(int)(width / 2), 0).Perform();
int increment = 50;
for (int i = 0; i < increment ; i++)
{
   action.SendKeys(Keys.ArrowRight);
}
action.Perform();