Capybara: Working with invisible elements
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="test1">One<div>
<div class="test2">Two</div>
With some CSS:
.test1 { display: block }
.test2 { display: none }
We will be using Capybara's find
below, but this applies to any Capybara finder methods.
Default: visible: :visible
As described above, by default Capybara finds ...
Using ngrok for exposing your development server to the internet
Sometimes you need to access a dev server running on localhost from another machine that is not part of the same network. Maybe you want to use your phone to test a web page, but are only in a guest WiFi. In the past, we often used some port forwarding or other techniques to expose the service to the internet.
Enter ngrok, a command line tool that gives you an on-the-fly internet...
Caching in Rails < 6.1 may down parts of your application when using public cache control
TL;DR When using Cache-Control
on a Rails application, make sure the Vary: Accept
header is set.
Proxy caching is a good feature to serve your publicly visible application content faster and reduce load on your servers. It is e.g. available in nginx, but also affects proxies delivered by ISPs.
Unfortunately, there is a little problem in Rails < 6.1 when delivering responses for different MIME-types. Say you have an arbitrary route in your Rails application that is able to respond with regular HTML and JSON. By sending the specific ...
Spreewald 4.3.3 released
Field error steps
Spreewald's The ... field should have an error
and The ... field should have the error ...
steps now have built-in support for Rails and Bootstrap (v3-v5) error classes. When using Bootstrap, it is no longer necessary to overwrite the steps in your project.
At the same time, support for formtastic has been removed as there were no real use cases. Due to that, no breaking change was introduced, as the amount of users affected by this should be zero (it was neither in the documentation nor tested).
Users may now add...
Google Chrome now has a JavaScript bundle visualizer
Similar to the Webpack Bundle Analyzer, Chrome's new Lighthouse feature …
… shows a visualisation of your JavaScript bundles. It's compatible with sourcemaps and is great for understanding large JavaScript modules used by your page. It can also visualise unused bytes.
This is very helpful to visualize Javascript files in development. It also works on production code, where its usefulness depends on the structure of the productive Javascr...
Finding ancestors with Capybara
Modern versions of Capybara include a finder method #ancestor
which allows you to find a parental element using CSS or XPath.
If you previously did something like this:
field.find(:xpath, './ancestor::div[contains(@class, "form-group")]')
..and prefer CSS, you may rewrite it:
field.ancestor('div.form-group')
Both versions will return the outermost matching element. Use the #order
option find the closest parent:
field.ancestor('div.form-group', order: :reverse)
Ensure passing Jasmine specs from your Ruby E2E tests
Jasmine is a great way to unit test your JavaScript components without writing an expensive end-to-end test for every small requirement.
After we integrated Jasmine into a Rails app we often add an E2E test that opens that Jasmine runner and expects all specs to pass. This way we see Jasmine failures in our regular test runs.
RSpec
In a [feature spec](https://web.archive.org/web/20150201092849/http://www.rel...
Using feature flags to stabilize flaky E2E tests
A flaky test is a test that is often green, but sometimes red. It may only fail on some PCs, or only when the entire test suite is run.
There are many causes for flaky tests. This card focuses on a specific class of feature with heavy side effects, mostly on on the UI. Features like the following can amplify your flakiness issues by unexpectedly changing elements, causing excessive requests or other timing issues:
- Lazy loading images
- Autocomplete in search f...
Setup Sidekiq and Redis
If you want Sidekiq to be able to talk to Redis on staging and production servers, you need to add the following to your configuration:
# config/initializers/sidekiq.rb
require 'sidekiq'
Sidekiq.configure_client do |config|
config.redis = { url: REDIS_URL }
end
Sidekiq.configure_server do |config|
config.redis = { url: REDIS_URL }
end
The following step may be skipped for new Sidekiq 6+, since it isn't recommended anymore to use a global redis client.
# config/initializers/redis.rb
require 'redis'
require_relativ...
Fix REPL of better_errors page
The gem better_errors offers a detailed error page with an interactive REPL for better debugging.
I had the issue that on a few projects with Ruby 2.5.8
, the REPL was not shown.
Solution
To make the REPL work properly with this Ruby version I had to update the gem binding_of_caller to at least version 0.8.0
.
From the [better_errors](https://github.com/BetterE...
Git shortcut to rebase onto another branch
Inspired by recent "git shortcut" cards I figured it would be nice to have one of these for rebasing a few commits onto another branch. The usual notation is prone to of-by-one errors as you have to either specify the commit before the ones you want to move or count the number of commits.
You may add this rebase-onto
function to your ~/.bashrc
:
function rebase-onto {
commit=$(git log --oneline | fzf --prompt 'Select the first commit y...
Capybara can find links and fields by their [aria-label]
Sometimes a link or input field has no visible label. E.g. a text field with a magnifying glass icon 🔎 and a "Search" button does not really need a visible label "Query".
For accessibility reasons it is good practice to give such a field an [aria-label]
attribute:
<input type="search" aria-label="Search contacts">
This way, when a visually impaired user focuses the field, the screen reader will speak the label text ("Search contacts").
Info
Without an `[aria-...
RSpec matcher to compare two HTML fragments
The RSpec matcher tests if two HTML fragments are equivalent. Equivalency means:
- Whitespace is ignored
- Types of attribute quotes are irrelevant
- Attribute order is irrelevant
- Comments are ignored
You use it like this:
html = ...
expect(html).to match_html(<<~HTML)
<p>
Expected content
</p>
HTML
You may override options from CompareXML by passing keyword arguments after the HTML string:
html = ...
expect(html).to match_html(<<~HTML, ignore_text_nodes: true)
...
Rails: Removing the cucumber-rails warning when setting cache_classes to false without Spring enabled
We are using Spring in our tests for sequential test execution but not for parallel test execution. And Rails requires you to set the config.cache_classes = false
if you are using Spring in tests.
With our setup, this would raise the following error in cucumber-rails for parallel test executions due to some legacy database cleaner issue.
WARNING: You have set Rails' config.cache_classes to false
(Spring needs cache_classes set to false). This is known to cause probl...
Encrypting messages with age (alternative to PGP)
age is a simple, modern and secure file encryption tool, format, and Go library.
It features small explicit keys, no config options, and UNIX-style composability.
Generally we are happy with GPG for encrypting emails. In case you are not happy with the CLI of GnuPG
, this might be a tool you can use under the hood for encryption.
Using attribute event handlers with a strict Content Security Policy (CSP)
Given you have a strict CSP that only allows <script src>
elements from your own domain:
Content-Security-Policy: script-src 'self'
This will block JavaScript handlers inlined as attribute into your HTML elements. Clicking on the following link will only log an error with a strict CSP:
<a href="javascript:alert('hello')">click me</a>
<a href="#" onclick="alert('hello')">click me</a>
Solution 1: Move the handler into your JavaScript
The recommended solution is to move the handler from the HTML to the allowed ...
Using multiple MySQL versions on the same linux machine using docker
We had a card that described how to install multiple mysql versions using mysql-sandbox
. Nowadays with the wide adoption of docker it might be easier to use a MySQL docker image for this purpose.
Create a new mysql instance
docker run --name projectname_db -e MYSQL_ROOT_PASSWORD=secret -p "33008:3306" -d --restart unless-stopped mysql:5.7
The port 33008 is a freely chosen free port on the host machine that will be used to establish a...
Spreewald development steps
Our gem spreewald supports a few helpers for development. In case you notice errors in your Cucumber tests, you might want to use one of them to better understand the underlying background of the failure. The following content is also part of the spreewald's README, but is duplicated to this card to allow repeating.
Then console
Pauses test execution and opens an IRB shell with current cont...
Setting SASS variables as value for CSS custom properties
When using custom properties in your stylesheets, you may want to set a specific property value to an existing variable in your SASS environment. A pratical example would be a list of color variables that you've defined in colors.sass
and that you would like to refer to in your stylesheets. However, simply assigning a variable will not work:
$my-great-blue: blue
:root
--my-color: $my-great-blue
.sky
background-color: var(--my-color)
The property value will not be valid and if you open the browser's inspection window, yo...
Headless Chrome: Changing the Accept-Language header is not possible
It seems like changing the HTTP_ACCEPT_LANGUAGE
is not possible for a headless chrome.
- On Ubuntu the headless Chrome derives the Accept-Language from the operation system
- Adding the option
options.add_argument('--lang=de')
to theCapybara::Selenium::Driver
has no effect - Adding the preference
options.add_preference('intl.accept_languages', 'de')
to theCapybara::Selenium::Driver
has only effects if the--headless
option is skipped (see bug ticket #775911) - Cha...
Selenium: Network throttling via Chromedriver
You can throttle the network in your headless chrome via Selenium. This might be useful for debugging issues with flaky integration tests or slow page simulations.
page.driver.browser.network_conditions = {offline: false, latency: 5, download_throughput: 2 * 1024, upload_throughput: 2 * 1024}
The settings will match to the following UI component in Chrome:
Were the values for the default profiles might match the values from this post:
**S...
List of Chromium Command Line Switches « Peter Beverloo
An extensive list of command line options when booting Chrome.
This is useful for building a Capybara driver with custom Chrome options.
GitHub Actions: Retrying a failing step
If you have a flaky command you can use the nick-invision/retry to re-try a failing command, optionally with a timeout:
---
...
jobs:
test:
...
steps:
- name: Run tests
uses: nick-invision/retry@v2
with:
timeout_seconds: 30
max_attempts: 3
command: bundle exec rake spec
Undefined method log for Selenium::WebDriver::Remote::W3C::Bridge
In case your integration tests crash with a message like below, try to upgrade Capybara to a newer version (3.35.3 was good enough). You might encounter this issue when you enabled the w3c option in Selenium.
undefined method `log' for #<Selenium::WebDriver::Remote::W3C::Bridge:0x000055995647ded0>
Your affected code might look similar to this call below and will work after the upgrade again.