I have a Java code as follows:
public void moveOpacitySlider(int x) throws InterruptedException {
By opacitySlider = By.xpath("//div[@class='sliders']/*[2]/*[3]");
wait.until(ExpectedConditions.visibilityOfElementLocated(opacitySlider));
WebElement slider = driver.findElement(opacitySlider);
Actions moveSlider = new Actions(driver);
Action action = moveSlider.dragAndDropBy(slider, x, 0).build();
action.perform();
this code works fine under Chrome (opacity slider can be moved), but not under Safari browser.
On Safari browser I got exception on action.perform() line.
actions [{"id":"default mouse","type":"pointer","parameters":{"pointerType":"mouse"},"actions":[{"duration":100,"x":0,"y":0,"type":"pointerMove","origin":{"ELEMENT":"node-94447CC8-DDAB-4EE2-BE96-37EFC36DCB3E","element-6066-11e4-a52e-4f735466cecf":"node-94447CC8-DDAB-4EE2-BE96-37EFC36DCB3E"}},{"button":0,"type":"pointerDown"},{"duration":250,"x":-200,"y":0,"type":"pointerMove","origin":"pointer"},{"button":0,"type":"pointerUp"}]}]
and response:
element not interactable
same for following methods:
moveSlider.clickAndHold(slider).moveByOffset(x,0).release(slider).build().perform(); // to move slider backward
moveSlider.moveToElement(slider).clickAndHold().moveByOffset(x,0).release().perform();
moveSlider.moveToElement(slider).click(slider).sendKeys(Keys.ARROW_LEFT).perform();
DOM on my page is as follows:
<div class="sliders"><div class="slider__property">Opacity</div><svg width="100%" height="21"><line x1="6.5" y1="50%" x2="64.9765625" y2="50%" stroke-width="2" stroke="#00a5e4" stroke-linecap="round"></line><line x1="64.9765625" y1="50%" x2="104.39796874999999" y2="50%" stroke-width="2" stroke="#e0e0e0" stroke-linecap="round"></line><circle cx="64.9765625" cy="50%" r="6.5" fill="#00a5e4"></circle></svg><div class="slider__value">60%</div><div class="slider__property">Thickness</div><svg width="100%" height="21"><line x1="6.5" y1="50%" x2="33.9765625" y2="50%" stroke-width="2" stroke="#00a5e4" stroke-linecap="round"></line><line x1="33.9765625" y1="50%" x2="104.39796874999999" y2="50%" stroke-width="2" stroke="#e0e0e0" stroke-linecap="round"></line><circle cx="33.9765625" cy="50%" r="6.5" fill="#00a5e4"></circle></svg><div class="slider__value">6pt</div><div class="slider__property">Text Size</div><svg width="100%" height="21"><line x1="6.5" y1="50%" x2="16.289796875" y2="50%" stroke-width="2" stroke="#00a5e4" stroke-linecap="round"></line><line x1="16.289796875" y1="50%" x2="104.39796874999999" y2="50%" stroke-width="2" stroke="#e0e0e0" stroke-linecap="round"></line><circle cx="16.289796875" cy="50%" r="6.5" fill="#00a5e4"></circle></svg><div class="slider__value">9pt</div></div>
the sliders looks as follows:
