Element Scroll Behavior ignored when Element is already within the Viewport, but not visible/clickable #1740
Description
Expected Behavior -
In an environment with a fixed top navigation bar, scrolling can hide elements behind the bar. If an element is hidden behind the bar, but can be scrolled-to by the user, it should be scrolled into view before the driver attempts to click (or otherwise interact) with the element.
Actual Behavior -
When attempting to click an element outside the viewport, the driver will first scroll the element to either the top or bottom of the viewport depending on the elementScrollBehavior capability (related to #1202). When attempting to click an element INSIDE the viewport, but hidden behind a fixed navigation bar, the driver makes no attempt to scroll the element into view and an exception is thrown.
Steps to reproduce -
Versions:
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>2.52.0</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-server</artifactId>
<version>2.52.0</version>
<scope>test</scope>
</dependency>JUnit test:
@Test
public void testInitialOverlapWontScroll()
{
DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability(CapabilityType.ELEMENT_SCROLL_BEHAVIOR, ElementScrollBehavior.BOTTOM);
FirefoxDriver driver = new FirefoxDriver(caps);
try
{
driver.get("http://localhost/1740.jsp");
System.out.println("Traversing buttons top-down.");
for (int i = 0; i < 10; i++)
{
System.out.println("BEFORE: Clicking button "+i);
driver.findElement(By.cssSelector("#button"+i)).click();
System.out.println("AFTER: Clicking button "+i);
}
System.out.println("Traversing buttons bottom-up.");
for (int i = 9; i >= 0; i--)
{
System.out.println("BEFORE: Clicking button "+i);
driver.findElement(By.cssSelector("#button"+i)).click();
System.out.println("AFTER: Clicking button "+i);
}
}
finally
{
driver.quit();
}
}HTML Page:
<html>
<head>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
margin-top: 203px;
}
.overlay {
border: 1px dashed red;
background-color: #cccccc;
z-index: 1000;
position: fixed;
top: 0px;
height: 200px;
width: 100%;
padding: 0px;
margin: 0px;
}
.overlay a {
width: 100%;
height: 100%;
display: block;
border: 1px solid green;
}
div {
background-color: #eeeeee;
text-align: center;
vertical-align: middle;
border: 1px dashed blue;
height: 200px;
width: 100%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div class="overlay">
<a href="#link">Overlay Link</a>
</div>
<div>
<button id="button0" name="button0">Button0</button>
</div>
<div>
<button id="button1" name="button1">Button1</button>
</div>
<div>
<button id="button2" name="button2">Button2</button>
</div>
<div>
<button id="button3" name="button3">Button3</button>
</div>
<div>
<button id="button4" name="button4">Button4</button>
</div>
<div>
<button id="button5" name="button5">Button5</button>
</div>
<div>
<button id="button6" name="button6">Button6</button>
</div>
<div>
<button id="button7" name="button7">Button7</button>
</div>
<div>
<button id="button8" name="button8">Button8</button>
</div>
<div>
<button id="button9" name="button9">Button9</button>
</div>
</body>
</html>Program output:
Traversing buttons top-down.
BEFORE: Clicking button 0
AFTER: Clicking button 0
BEFORE: Clicking button 1
AFTER: Clicking button 1
BEFORE: Clicking button 2
AFTER: Clicking button 2
BEFORE: Clicking button 3
AFTER: Clicking button 3
BEFORE: Clicking button 4
AFTER: Clicking button 4
BEFORE: Clicking button 5
AFTER: Clicking button 5
BEFORE: Clicking button 6
AFTER: Clicking button 6
BEFORE: Clicking button 7
AFTER: Clicking button 7
BEFORE: Clicking button 8
AFTER: Clicking button 8
BEFORE: Clicking button 9
AFTER: Clicking button 9
Traversing buttons bottom-up.
BEFORE: Clicking button 9
AFTER: Clicking button 9
BEFORE: Clicking button 8
AFTER: Clicking button 8
BEFORE: Clicking button 7
AFTER: Clicking button 7
BEFORE: Clicking button 6
*** Exception org.openqa.selenium.WebDriverException: Element is not clickable at point (705, 50). Other element would receive the click: <a href="#link"></a>