[🐛 Bug]: Cannot click button when using Bootstrap and HTML-details

[bennypi]

What happened?

Selenium can not click on a button altough the button is visible. In a demo project, spring boot 2.7, selenium 4.5.0 and testcontainers 1.17.5 is used. The application consists of a simple HTML page that shows text that the user can send from an input field inside of a form. There is a unit test that uses SpringBootTest, testcontainers and selenium to check this mechanism. The expected outcome of the test is that the data inserted in the input field and submitted with the button is present on the new page, but the test fails with a exception, please see the log output below.

From my testing, this error does no longer appear when bootstrap css is not included, or when simple divs, headers and paragraphs are used instead of details and summaries. The error is also not present when selenium is downgraded to 3.141.59. The error also seems to disappear in case the page is "short" enough. For the demo, I added a margin so that the page can be scrolled on a FullHD display.

How can we reproduce the issue?

https://github.com/bennypi/selenium-4-with-html-details

Relevant log output

org.openqa.selenium.ElementClickInterceptedException: element click intercepted: Element is not clickable at point (35, 952)
  (Session info: chrome=106.0.5249.91)
Build info: version: '4.5.0', revision: 'fe167b119a'
System info: os.name: 'Linux', os.arch: 'amd64', os.version: '5.15.0-50-generic', java.version: '11.0.16.1'
Driver info: org.openqa.selenium.remote.RemoteWebDriver
Command: [d251a24392b1ef456480246ee03b21ba, clickElement {id=e87310ec-772b-457e-9210-fa17784a056f}]
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 106.0.5249.91, chrome: {chromedriverVersion: 106.0.5249.61 (511755355844..., userDataDir: /tmp/.com.google.Chrome.aF3UFX}, goog:chromeOptions: {debuggerAddress: localhost:37003}, networkConnectionEnabled: false, pageLoadStrategy: normal, platformName: LINUX, proxy: Proxy(), se:cdp: ws://172.17.0.6:4444/sessio..., se:cdpVersion: 106.0.5249.91, se:vnc: ws://172.17.0.6:4444/sessio..., se:vncEnabled: true, se:vncLocalAddress: ws://172.17.0.6:7900, setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webauthn:extension:credBlob: true, webauthn:extension:largeBlob: true, webauthn:virtualAuthenticators: true}
Element: [[RemoteWebDriver: chrome on LINUX (d251a24392b1ef456480246ee03b21ba)] -> id: submit]
Session ID: d251a24392b1ef456480246ee03b21ba

    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:490)
    at org.openqa.selenium.remote.codec.w3c.W3CHttpResponseCodec.createException(W3CHttpResponseCodec.java:200)
    at org.openqa.selenium.remote.codec.w3c.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:133)
    at org.openqa.selenium.remote.codec.w3c.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:53)
    at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:184)
    at org.openqa.selenium.remote.TracedCommandExecutor.execute(TracedCommandExecutor.java:51)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:547)
    at org.openqa.selenium.remote.RemoteWebElement.execute(RemoteWebElement.java:257)
    at org.openqa.selenium.remote.RemoteWebElement.click(RemoteWebElement.java:78)
    at de.bennypi.DemoControllerTest.shouldDisplayMessage(DemoControllerTest.java:46)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.base/java.lang.reflect.Method.invoke(Method.java:566)
    at org.junit.platform.commons.util.ReflectionUtils.invokeMethod(ReflectionUtils.java:725)
    at org.junit.jupiter.engine.execution.MethodInvocation.proceed(MethodInvocation.java:60)
    at org.junit.jupiter.engine.execution.InvocationInterceptorChain$ValidatingInvocation.proceed(InvocationInterceptorChain.java:131)
    at org.junit.jupiter.engine.extension.TimeoutExtension.intercept(TimeoutExtension.java:149)
    at org.junit.jupiter.engine.extension.TimeoutExtension.interceptTestableMethod(TimeoutExtension.java:140)
    at org.junit.jupiter.engine.extension.TimeoutExtension.interceptTestMethod(TimeoutExtension.java:84)
    at org.junit.jupiter.engine.execution.ExecutableInvoker$ReflectiveInterceptorCall.lambda$ofVoidMethod$0(ExecutableInvoker.java:115)
    at org.junit.jupiter.engine.execution.ExecutableInvoker.lambda$invoke$0(ExecutableInvoker.java:105)
    at org.junit.jupiter.engine.execution.InvocationInterceptorChain$InterceptedInvocation.proceed(InvocationInterceptorChain.java:106)
    at org.junit.jupiter.engine.execution.InvocationInterceptorChain.proceed(InvocationInterceptorChain.java:64)
    at org.junit.jupiter.engine.execution.InvocationInterceptorChain.chainAndInvoke(InvocationInterceptorChain.java:45)
    at org.junit.jupiter.engine.execution.InvocationInterceptorChain.invoke(InvocationInterceptorChain.java:37)
    at org.junit.jupiter.engine.execution.ExecutableInvoker.invoke(ExecutableInvoker.java:104)
    at org.junit.jupiter.engine.execution.ExecutableInvoker.invoke(ExecutableInvoker.java:98)
    at org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.lambda$invokeTestMethod$7(TestMethodTestDescriptor.java:214)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.invokeTestMethod(TestMethodTestDescriptor.java:210)
    at org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.execute(TestMethodTestDescriptor.java:135)
    at org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.execute(TestMethodTestDescriptor.java:66)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$6(NodeTestTask.java:151)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$8(NodeTestTask.java:141)
    at org.junit.platform.engine.support.hierarchical.Node.around(Node.java:137)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$9(NodeTestTask.java:139)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.executeRecursively(NodeTestTask.java:138)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.execute(NodeTestTask.java:95)
    at java.base/java.util.ArrayList.forEach(ArrayList.java:1541)
    at org.junit.platform.engine.support.hierarchical.SameThreadHierarchicalTestExecutorService.invokeAll(SameThreadHierarchicalTestExecutorService.java:41)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$6(NodeTestTask.java:155)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$8(NodeTestTask.java:141)
    at org.junit.platform.engine.support.hierarchical.Node.around(Node.java:137)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$9(NodeTestTask.java:139)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.executeRecursively(NodeTestTask.java:138)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.execute(NodeTestTask.java:95)
    at java.base/java.util.ArrayList.forEach(ArrayList.java:1541)
    at org.junit.platform.engine.support.hierarchical.SameThreadHierarchicalTestExecutorService.invokeAll(SameThreadHierarchicalTestExecutorService.java:41)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$6(NodeTestTask.java:155)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$8(NodeTestTask.java:141)
    at org.junit.platform.engine.support.hierarchical.Node.around(Node.java:137)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$9(NodeTestTask.java:139)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.executeRecursively(NodeTestTask.java:138)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.execute(NodeTestTask.java:95)
    at org.junit.platform.engine.support.hierarchical.SameThreadHierarchicalTestExecutorService.submit(SameThreadHierarchicalTestExecutorService.java:35)
    at org.junit.platform.engine.support.hierarchical.HierarchicalTestExecutor.execute(HierarchicalTestExecutor.java:57)
    at org.junit.platform.engine.support.hierarchical.HierarchicalTestEngine.execute(HierarchicalTestEngine.java:54)
    at org.junit.platform.launcher.core.EngineExecutionOrchestrator.execute(EngineExecutionOrchestrator.java:107)
    at org.junit.platform.launcher.core.EngineExecutionOrchestrator.execute(EngineExecutionOrchestrator.java:88)
    at org.junit.platform.launcher.core.EngineExecutionOrchestrator.lambda$execute$0(EngineExecutionOrchestrator.java:54)
    at org.junit.platform.launcher.core.EngineExecutionOrchestrator.withInterceptedStreams(EngineExecutionOrchestrator.java:67)
    at org.junit.platform.launcher.core.EngineExecutionOrchestrator.execute(EngineExecutionOrchestrator.java:52)
    at org.junit.platform.launcher.core.DefaultLauncher.execute(DefaultLauncher.java:114)
    at org.junit.platform.launcher.core.DefaultLauncher.execute(DefaultLauncher.java:86)
    at org.junit.platform.launcher.core.DefaultLauncherSession$DelegatingLauncher.execute(DefaultLauncherSession.java:86)
    at org.junit.platform.launcher.core.SessionPerRequestLauncher.execute(SessionPerRequestLauncher.java:53)
    at com.intellij.junit5.JUnit5IdeaTestRunner.startRunnerWithArgs(JUnit5IdeaTestRunner.java:57)
    at com.intellij.rt.junit.IdeaTestRunner$Repeater$1.execute(IdeaTestRunner.java:38)
    at com.intellij.rt.execution.junit.TestsRepeater.repeat(TestsRepeater.java:11)
    at com.intellij.rt.junit.IdeaTestRunner$Repeater.startRunnerWithArgs(IdeaTestRunner.java:35)
    at com.intellij.rt.junit.JUnitStarter.prepareStreamsAndStart(JUnitStarter.java:235)
    at com.intellij.rt.junit.JUnitStarter.main(JUnitStarter.java:54)

Operating System

Linux Mint 21

Selenium version

Java 4.5.0

What are the browser(s) and version(s) where you see this issue?

selenium/standalone-chrome:4.5.0

What are the browser driver(s) and version(s) where you see this issue?

selenium-chrome-driver 4.5.0

Are you using Selenium Grid?

No response

[github-actions[bot]]

@bennypi, thank you for creating this issue. We will troubleshoot it as soon as we can.

---

Info for maintainers

Triage this issue by using labels.

If information is missing, add a helpful comment and then I-issue-template label.

If the issue is a question, add the I-question label.

If the issue is valid but there is no time to troubleshoot it, consider adding the help wanted label.

If the issue requires changes or fixes from an external project (e.g., ChromeDriver, GeckoDriver, MSEdgeDriver, W3C), add the applicable G-* label, and it will provide the correct link and auto-close the issue.

After troubleshooting the issue, please add the R-awaiting answer label.

Thank you!

[kreintjes]

This is probably caused by Bootstrap 5 setting scroll-behavior: smooth on the html element of the page. Selenium then can't automatically scroll to the element any longer when trying to click something outside the view window. We had a bunch of tests failing because of this as well after upgrading from Bootstrap 4 to 5. You can fix this in several ways:

• Scroll to the element manually before-hand, using something like this:

  // Scroll to element
  driver.executeScript("arguments[0].scrollIntoView();", checkbox);
  // pause for 1 second to wait until scroll is completed
  await wait(1000);

• Override (disable) smooth scrolling manually by adding scroll-behavior: auto !important; on the html element (i.e. in CSS or using the style attribute). You could also only do this when running the tests (e.g. when in the test environment if for example you are using Ruby on Rails).
• Prevent Bootstrap from setting smooth scrolling before-hand using a Bootstrap variable: $enable-smooth-scroll: false;

Solutions from https://github.com/symfony/panther/issues/502 and https://github.com/SeleniumHQ/selenium/issues/8973#issuecomment-786611503

While the above solutions work (for me), I think it would be better if Selenium supports smooth scrolling out-of-the-box (also when automatically scrolling when clicking something outside the view window). This is also suggested by https://github.com/symfony/panther/issues/502#issuecomment-1212324362.

There were also several Selenium issues in the past about this, which looks like they are caused by the same issue:

• https://github.com/SeleniumHQ/selenium/issues/10468
• https://github.com/SeleniumHQ/selenium/issues/10180
• https://github.com/SeleniumHQ/selenium/issues/9393
• https://github.com/SeleniumHQ/selenium/issues/8973
• https://github.com/SeleniumHQ/selenium/issues/8295

@titusfortner @diemol what do you think?

Hope this helps people running into this issue as well!

[rvalladares77]

If you are using rails, you can find here the way to disable the bootstrap scroll-behavior only for the test environment:

http://fullstacktutorials.blogspot.com/2023/03/selenium-doesnt-work-with-bootstrap-5.html

[pujagani]

I suspect Titus's comment on the issues listed in https://github.com/SeleniumHQ/selenium/issues/11136#issuecomment-1370803713 is still valid for this issue. But I would like @titusfortner to help confirm the same! Thank you!

[titusfortner]

I'm not sure why it would work with Selenium 3 and not with Selenium 4. I'm not sure what Selenium can or should do about it.

I think it would be better if Selenium supports smooth scrolling out-of-the-box

I think this needs to be managed by browser vendor implementations, and might need to be discussed in w3c.

[github-actions[bot]]

Hi, @bennypi. This issue has been determined to require a change to the WebDriver W3C Specification for Selenium to be able to support it.

Please create an issue with the WebDriver project.

Feel free to comment the issues that you raise back in this issue. Thank you.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.