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 approach
In older version, it was possible to use the :focus pseudo-class. This seems not to work in newer versions anymore.
find(':focus')
Related cards:
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.
How to grep through the DOM using the Capybara API
When your Cucumber feature needs to browse the page HTML, and you are not sure how to express your query as a clever CSS or XPath expression, there is another way: You can use [all](http://rubydoc.info/github/jnicklas/capybara/master/Capybara/No...
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(...
Capybara: Find the innermost DOM element that contains a given string
Let's say you want to find the element with the text hello in the following DOM tree:
<html>
<body>
<article>
<strong>hello</strong>
<strong>world</strong>
</article>
</body>
</html>
You might think of XPath...
Capybara: How to find a hidden field by its label
To find an input with the type hidden, you need to specify the type hidden:
find_field('Some label', type: :hidden)
Otherwise you will see an exception :
find_field('Some label')
# => Capybara::ElementNotFound: Unable to ...
CSS: How to find out the rendered font in chrome
The rendered font often depends on the local font your system provides, therefore you often find a rule like below in the computed style for an element:
font-family: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera ...
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...
How to set the user agent in tests
The User-Agent HTTP header identifies the client and is sent by "regular" browsers, search engine crawlers, or other web client software.
Cucumber
In Rack::Test, you can set your user agent like this on Capybara:
Given /^my user age...
How to iterate over an Enumerable, returning the first truthy result of a block ("map-find")
Ruby has Enumerable.find(&block), which returns the first item in the collection for which the block evaluates to true.
first_post_with_image = posts.find do |post|
post.image
end
However, sometimes it's not the item you're int...
How to reverse the order of HTML elements with CSS
Imagine you have a list you want to render inline on large screens, but stacked on small screens.
<ul>
<li>high</li>
<li>medium</li>
<li>low</li>
</ul>
ul { white-space: nowrap } /* optional: keep items in one line no matter th...