2017-03-25 3 views
-1

スライダをDragandDropByメソッドで移動しようとしていますが、スライダが正しくない位置に移動しています。私もjavascriptexecutorを使用しましたが、それもうまくいきません。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(); 

このコードは実行中にエラーが発生していませんが、スライダが正しい位置に正しく移動していません。

<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> 

答えて

0

後(すべてを追加)あなたのために働く必要があります。

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%;')"); 

UPDATE: -

また、次を使用することができます。

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 
+0

これはうまくいくかもしれませんが、これはユーザーのシナリオではないため、他の 'onclick'動作のショートカットになる可能性があります。実際に要素をクリックする方が良いでしょう。 – JeffC

1

を私はJSEを避けるだろう彼らはユーザーのシナリオではないので、 JSを使用してスライダーを設定するユーザーはいません。スライダーをクリックします。スライダをクリックするとテストで何度もやりたいことがあるので、関数に書きます。

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の間です確認するだろう

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

のようにそれを呼び出します。

関連する問題