Selenium doesn't work with Bootstrap 5: Cannot click on button

 

Bootstrap 5, a powerful CSS framework, brings new challenges. One issue developers face is Selenium test failures due to Bootstrap 5's smooth scrolling feature. In this article, we'll explore this problem and provide solutions.

 Recently, I encountered some unexpected test suite failures while using Bootstrap 5. Upon closer inspection, I noticed that the test cases were randomly failing, particularly when interacting with the save button as it will not submit the form. An intriguing puzzle, isn't it?

To address the perplexing test failures, I embarked on an extensive debugging process and conducted thorough research. Eventually, I uncovered the root cause of the issue: a conflict between Bootstrap 5 and Selenium. Specifically, a particular CSS element was causing the problem.

 scroll-behavior: smooth;

This does not allow Selenium to automatically scroll down and click on the element that is at the bottom of the page, I mean an element that is outside window.

How to fix it?

I found 2 ways to fix this kind of flaky tests. I tested them and they actually works. 😊

1. Disable smooth scrolling from bootstrap.

 Note: if you are using rails it should be in: _bootstrap-custom.scss

 $enable-smooth-scroll: false;

2.  Override bootstrap scroll-behavior.

 html {
    scroll-behavior: auto !important;
}

2.1 if you're using rails, you can actually do this just for the test environment:

 html[data-environment="test"] {
    scroll-behavior: auto !important;
}

and in your haml file you should have something like this:

%html{"data-environment": "#{Rails.env}"}