How to find out the currently focused DOM element with JavaScript
This works in all relevant browsers:
document.activeElement
You can use this in your Selenium steps, for example, to assert that a form field is or is not focused.
Related cards:
How to create giant memory leaks in AngularJS (and other client-side JavaScript)
This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users.
Although this guide has been written for Angular 1 originally, most of the advice is relevant...
Capybara: Finding invisible elements and how to test that an element is not visible
When Capybara locates elements in the DOM, by default it allows only accessing visible elements -- when you are using a driver that supports it (e.g. Selenium, not the default Rack::Test
driver).
Consider the following HTML:
<div class=...
How to access before/after pseudo element styles with JavaScript
Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple.
Using getComputedStyle
First, find the element in question.
let element = document.querySelector(...
jQuery: How to replace DOM nodes with their contents
You know that you can use jQuery's text()
to get an element's contents without any tags.
If you want to remove only some tags, but keep others, use contents()
and unwrap()
. Here is how.
Consider the following example element.
$containe...
How to: Upgrade CarrierWave to 3.x
While upgrading CarrierWave from version 0.11.x to 3.x, we encountered some very nasty fails. Below are the basic changes you need to perform and some behavior you may eventually run into when upgrading your application. This aims to save you some...
JavaScript without jQuery
This is a presentation from 2019-01-21.
Summary
- We want to move away from jQuery in future projects
- Motivations are performance, bundle size and general trends for the web platform.
- The native DOM API is much nicer than it used to be, a...
How to transition the height of elements with unknown/auto height
If you want to collapse/expand elements with dynamic content (and thus unknown height), you can not transition between height: 0
and height: auto
.
Doing it properly, with modern CSS features
In the past, you might have resorted to bulky J...
Google Chrome: How to find out your currently installed theme
So you downloaded a theme for Chrome a while ago and don't remember which one it is?
You can go to chrome://settings/appearance
(on Chrome 61+) to see the theme's name, and click a link to open it in the Chrome Web Store.
If you are on an olde...
Capybara: How to find the focused element
Capybara allows you to filter elements that are focused.
page.find(:fillable_field, focused: true) # Filtering only fillable inputs for performance reasons
page.find(:xpath, '//*', focused: true) # Filter all fields
Legacy approac...
Customize tokenization of the MySQL FULLTEXT parser
The way MySQL's FULLTEXT tokenizer splits text into word tokens might not always be what you need. E.g. it splits a word at period characters.
Since the tokenizer has near-zero configuration options (minimum word length and stopwords list), you n...