How to solve Selenium focus issues

Selenium cannot reliably control a browser when its window is not in focus, or when you accidentally interact with the browser frame. This will result in flickering tests, which are "randomly" red and green. In fact, this behavior is not random at all and completely depends on whether or not the browser window had focus at the time.

This card will give you a better understanding of Selenium focus issues, and what you can do to get your test suite stable again.

Preventing accidental interaction with the Selenium window ——————–…

Linked content

Know what makes your browser pant

I figure we needed a definitive reference for what work is triggered by changing various CSS properties. It's something I get asked about often enough by developers, and while we can do tests with DevTools, I have both the time and inclination to shortcut that for everyone. I'm nice like that. —Paul Lewis

Selenium cannot obtain stable Firefox connection

When using geordi for integration tests you might get the following error when trying to run geordi cucumber:

unable to obtain stable firefox connection in 60 seconds ( (Selenium::WebDriver::Error::WebDriverError)

This means, that the vnc window the tests is talking to has no proper firefox version running. To figure out the issue this might help you:

  • Check if the .firefox-version (e.g. 24.0) is the same as ~/bin/firefoxes/24.0/firefox says in the browser
  • Maybe [rest…

Cancelling event propagation with jQuery

Within an event handler, there are no less than 4 methods to cancel event propagation, each with different semantics.

  • event.preventDefault()

    Only prevents the default browser behavior for the click, i.e. going to a different url or submitting a form.

  • event.stopPropagation()

    Only prevents the event from bubbling up the DOM. Note this effectively also cancels any event handlers attached through jQuery's live method, since those depend on bubbling.

  • event.stopImmediatePropagation()

    Prevents the event from bubbling up t…

How to make select2 use a Bootstrap 4 theme

select2 is a great jQuery library to make (large) <select> fields more usable.

For Bootstrap 3 there is select2-bootstrap-theme.
It won't work for Bootstrap 4, but rchavik's fork does (at least with Bootstrap 4 Alpha 6, current version at time of writing this).

It is based on a solution by angel-vladov and adds a few fixes.

Use it by addi…

Cucumber: Test that an element is not overshadowed by another element

I needed to make sure that an element is visible and not overshadowed by an element that has a higher z-index (like a modal overlay).

Here is the step I wanted:

Then the very important notice should not be overshadowed by another element

This is the step definition:

Then(/^(.*?) should not be overshadowed by another element$/) do |locator|
selector = selector_for(locator)
expect(page).to have_css(selector)
js = «-JS
var selector = #{selector.to_json};
var elementFromSelector = document.querySelector(selector)…

Linked content

Caution: Carrierwave has your file three times (temporarily)

When storing a file with Carrierwave, it is always cached prior to actually storing it (to support form roundtrips).

Carrierwave by default 1) copies the file to the cache and then 2) copies it again to its final destination (deleting the cached file immediately after storing). This means there are 3 (three) instances of a file on the disk at some point in time, and still 2 instances after Carrierwave is done if you do not remove…


Efficiently add a click event handler to many elements in jQuery

When you need to add a click event handler to 50+ elements in jQuery, this might slow down the browser.

You can simply register an event at the root of the DOM instead. This waits for events to bubble up and checks whether the triggering element matches the selector:

$(document).on('click', '.dialog_link', function(event) {
    // Open dialog

Fun fact: Angular 2.0 will provide native syntax for event handlers that are registered on the document body,


Keeping web applications fast

Our applications not only need to be functional, they need to be fast.

But, to quote Donald Knuth,

premature optimization is the root of all evil (or at least most of it) in programming

The reasoning is that you should not waste your time optimizing code where it does not even matter. However, I believe there are some kinds of optimizations you should do right away, because

  • they are either obvious and easy
  • or they are very hard to do optimize later

This is an attempt to list some of those things:

On the server

Speed up better_errors

If you use the Better Errors gem, you will sometimes notice that it can be very slow. This is because it sometimes renders a huge amount of data that will actually be hard to render for your browser.

You can significantly improve performance by adding this to config/initializers/better_errors:

if defined?(BetterErrors) && Rails.env.development?
module BetterErrorsHugeInspectWarning
def inspect_value(obj)
inspected = obj.inspect
if inspected.size > 20_000


Minified JavaScript and CSS

JavaScripts and CSS should be minified for production use.

In Rails 3.1+ the asset pipeline will take care of this. Thus you're best off using an uncompressed version of your Javascript in development. Also load the non-minified versions of libraries. This way debugging will be easier and you will still get all the minification love once deployed.

In Rails 2.3 and 3.0 you should at least embed external JavaScript libraries in minified form, using something like JavaScript compressor.

How to define height of a div as percentage of its variable width

This is useful if, for example, you want to use a background-image that has to scale with the width and the div should only have the height of the picture.


<div class="outer">
  <div class="inner">


.outer {
  width: 100%;
  background-image: image-url('background.png');
  background-size: cover;
.inner {
  padding-top: 60%;

How does it work?

There are several CSS attributes that can handle values as percentage. But they use different other attributes as "reference value…


Understanding race conditions with duplicate unique keys in Rails/MySQL

validates_uniqueness_of is not sufficient to ensure the uniqueness of a value. The reason for this is that in production, multiple worker processes can cause race conditions:

  1. Two concurrent requests try to create a user with the same name (and we want user names to be unique)
  2. The requests are accepted on the server by two worker processes who will now process them in parallel
  3. Both requests scan the users table and see that the name is available
  4. Both requests pass validation and create a user with the seemingly available name…
Linked content

HTTP/2 push is tougher than I thought -

TLDR: Browser implementations of HTTP/2 push are horrible. You might end up with worse performance than without pushing. However, the article includes a great explanation of how HTTP/2 push are supposed to integrate with browser APIs.

Middleman: Use pretty URLs without doubling requests

By default Middleman generates files with a .html extension. Because of this all your URLs end in /foo.html instead of /foo, which looks a bit old school.

To get prettier URLs, Middleman lets you activate :directory_indexes in config.rb. This makes a directory for each of your pages and puts a single file index.html into it, e.g. /foo/index.html. This lets you access pages with http://domain/foo.

Don't double your requests!

Unfortunately you are now forcing every br…

Middleman for Rails Developers

Middleman is a static page generator that brings many of the goodies that Rails developers are used to.

Out of the box, Middleman brings Haml, Sass, helpers etc. However, it can be configured to do even better. This card is a list of improvement hints for a Rails developer.


Remove tzinfo-data and wdm unless you're on Windows. Add these gems:

gem 'middleman-livereload'
gem 'middleman-sprockets' # Asset pipeline!

gem 'bootstrap-sass' # If you want to use Bootstrap

gem 'byebug'

gem 'capistrano'
gem 'capistrano-mid…


Cucumber: Prevent outstanding AJAX requests to bleed into other scenarios

When using Cucumber with Selenium or some other Javascript-enabled browser, AJAX request can sometimes "bleed" into the next scenario. This happens when a scenario triggers an AJAX request near the end, but does not wait for it to complete.

To avoid this, add the attached code to your cucumber's /features/support directory. It will disable AJAX requests at the end of the scenario and wait for outstanding requests to complete.

Requires spreewald and only works for requests triggered by jQuery.

Linked content

Classic CSS problems that are easy with flexbox

Solved with flexbox is a collection of css problems which were hard or impossible to solve without flexbox:

  • Better, Simpler Grid Systems
  • Holy Grail Layout
  • Input Add-ons
  • Media Object
  • Sticky Footer
  • Vertical Centering
This website uses cookies to improve usability and analyze traffic.
Accept or learn more