Question

我试图通过DragandDropBy方法移动滑块，但滑块移动到错误的位置。我也使用了javascriptexecutor，但这也无效。

driver.manage().window().maximize();
driver.get("http://www.globalsqa.com/demo-site/sliders/#Color Picker");

driver.manage().timeouts().implicitlyWait(30,TimeUnit.SECONDS );

WebElement iFrame = driver.findElement(By.cssSelector("#post-2673 > div.twelve.columns > div.newtabs.horizontal > div > div.single_tab_div.resp-tab-content.resp-tab-content-active > p > iframe"));

String sFrameContent = iFrame.getText().toString();
System.out.println("The Iframe Content is: "+sFrameContent );

driver.switchTo().frame(iFrame);

Actions action = new Actions(driver);

WebElement redSlider = driver.findElement(By.cssSelector("div#red > div"));

Thread.sleep(1000);

action.clickAndHold(redSlider).moveByOffset(90,0).release(redSlider).release().build().perform();

JavascriptExecutor jse = (JavascriptExecutor) driver;

jse.executeScript("document.getElementsByTagName('span')[0].style.left = '10.000%' ");
System.out.println("-------END--------");

driver.switchTo().defaultContent();

此代码在执行时没有出现任何错误，但Slider没有正确移动到正确的位置。

<body class="ui-widget-content" style="border:0;">
  <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
    <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> Simple Colorpicker
  </p>
  <div id="red" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
    <div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 9.80392%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 9.80392%;"></span></div>
  <div id="green" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
    <div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 54.902%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 54.902%;"></span></div>
  <div id="blue" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
    <div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 23.5294%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 23.5294%;"></span></div>
  <div id="swatch" class="ui-widget-content ui-corner-all" style="background-color: rgb(25, 140, 60);"></div>

</body>

Answer 1

我会避免使用JSE类型的答案，因为它们不是用户场景。没有用户会使用JS设置滑块，他们将单击滑块。由于点击滑块是您可能想要在测试中多次执行的操作，我会将其写入函数中。见下文

public class CityActor extends UntypedActor {

@Override
public void onReceive(Object message) throws Exception {
    if (message instanceof String) {
        System.out.println("Processing city " + message);
        Thread.sleep(1000);
    }
}}

并将其称为

public static void setRed(int percentage)
{
    driver.switchTo().frame(driver.findElement(By.cssSelector("iframe.demo-frame")));
    WebElement red = new WebDriverWait(driver, 3).until(ExpectedConditions.elementToBeClickable(By.id("red")));
    Dimension d = red.getSize();
    new Actions(driver).moveToElement(red, d.width * percentage / 100, d.height / 2).click().build().perform();
    driver.switchTo().defaultContent();
}

您可能希望对传入该功能的百分比进行一些错误检查，并确保它在0到100之间只是为了安全。

Answer 2

以下应该适合你（全部添加）：

    JavascriptExecutor js = (JavascriptExecutor) driver;

    js.executeScript("document.getElementById('red').getElementsByTagName('div')[0].setAttribute('style', 'width: 50%;')");
    js.executeScript("document.getElementById('red').getElementsByTagName('span')[0].setAttribute('style', 'left: 50%;')");

<强>更新 -

您可以使用以下内容：

    WebElement spanButton = driver.findElement(By.cssSelector("div#red > div+span"));

            Actions action = new Actions(driver);

            action.clickAndHold(spanButton).moveByOffset(-20,0).release(spanButton).build().perform(); // to move slider backward

action.clickAndHold(spanButton).moveByOffset(20,0).release(spanButton).build().perform(); // to move slider forward

如何根据javaScriptExecutor

2 个答案: