Upgrading Capybara with deprecated Integer selectors
Capybara added a deprecation warning in version 3.35.3 (version from 2019) that shows up if your selector is not of type String or Symbol.
Example:
click_link(10) # bad
click_link("10") # good
You might encounter this error e.g. in a pagination step or similar where you want to click on numbers. To figure out where this deprecation warning comes from try to run the tests with a step output.
bundle exec parallel_cucumber --test-options "--format=pretty" feature
The deprecation message looks like following:
Locator In...
NVM: How to automatically switch version when changing directories
The Node Version Manager allows installing multiple NodeJS versions and switching between them.
By default, it does not automatically switch versions when entering a directory that holds a .nvmrc
file.
The project's readme document offers a bash function which calls nvm use
after each cd
. In fact, it replaces cd
in your bash.
I did not want to do that, but instead use the $PROMPT_COMMAND
feature. So here is my take on it.
Note that it is much shorter, it probably does a f...
Geordi 6.0.0 released
6.0.0 2021-06-02
Compatible changes
-
geordi commit
will continue even if one of the given projects is inaccessible. It will only fail if no stories could be found at all.
Breaking changes
- Removed VNC test browser support for integration tests – Headless Chrome has
matured and is almost a drop-in replacement. Also, key binding issues have
increased with VNC and recent Linux.- Please use a headless Chrome setup https://makandracards.com/makandra/492109-capybara-running-tests-with-headless-chrome.
- You might also ...
Chromedriver: Disabling the w3c option might break your integration tests with Chrome 91
We recently noticed issues with Chrome 75+ when having the w3c
option enabled within the Selenium webdriver. It looks like recent Selenium versions don't have any issues with the w3c interface anymore. And starting with Chrome 91 this fix might cause unexpected issues, so you should try to enabled this option again or just remove the following line from you configuration:
options.add_option('w3c', false)
Background: Setting the w3c
option t...
Accessing JavaScript objects from Capybara/Selenium
When testing JavaScript functionality in Selenium (E2E), you may need to access a class or function inside of a evaluate_script
block in one of your steps. Capybara may only access definitions that are attached to the browser (over the window
object that acts as the base). That means that once you are exporting your definition(s) in Webpacker, these won't be available in your tests (and neither in the dev console). The following principles/concepts also apply to Sprockets.
Say we have a StreetMap
class:
// street_map.js
class S...
Delivering Carrierwave attachments to authorized users only
Preparation
To attach files to your records, you will need a new database column representing the filename of the file. To do this, add a new migration (rails g migration <name>
) with the following content:
class AddAttachmentToNotes < ActiveRecord::Migration[6.0]
def change
add_column :notes, :attachment, :string
end
end
Don't forget to rename the class and change the column details to fit your purpose. Run it.
1) Deliver attachments through Rails
The first way is to store your Carrierwave attachments not ...
Capybara: Preventing headless Chrome from freezing your test suite
We prefer to run our end-to-end tests with headless Chrome. While it's a very stable solution overall, we sometimes see the headless Chrome process freeze (or the Capybara driver losing connection, we're not sure).
The effect is that your test suite suddenly stops progressing without an error. You will eventually see an error after a long timeout but until then it will seem that your suite is frozen. If you're also using [capybara-screenshot](https:/...
Capybara: Preventing server errors from failing your test
When your Rails application server raises error, Capybara will fail your test when it clears the session after the last step. The effect is a test that passes all steps, but fails anyway.
Capybara's behavior will help you to detect and fix errors in your application code. However, sometimes your application will explode with an error outside your control. Two examples:
- A JavaScript library references a source map in its build, but forgets to package the source map
- CarrierWave cleans up an upload or cache file after the record was delet...
Capybara: Pretending to interact with the document
Browsers blocks abusable JavaScript API calls until the user has interacted with the document. Examples would be opening new tab or start playing video or audio.
E.g. if you attempt to call video.play()
in a test, the call will reject with a message like this:
NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
Workaround
To pretend document interaction in a test you can create an element, click on it, and remove the element again. This unblocks the entire JavaSc...
The Ruby Object Model
In Ruby (almost) everything is an Object
. While this enables a lot of powerful features, this concept might be confusing for developers who have been programming in more static languages, such as Java or C#. This card should help understanding the basic concepts of Ruby's object model and how things behave.
Usage of objects in Ruby
When working with objects in Ruby, you might think of a "container" that holds metadata, variables and methods. Metadata describes stuff like the object's class or its object_id
whi...
makandra/capybara-lockstep
capybara-lockstep can help you with flaky end-to-end tests:
This Ruby gem synchronizes Capybara commands with client-side JavaScript and AJAX requests. This greatly improves the stability of a full-stack integration test suite, even if that suite has timing issues.
Geordi 5.4.0 released
5.4.0 2021-02-01
Compatible changes
- Add
geordi branch
command that checks out a feature branch based on a story from Pivotal Tracker - Faster MySQL dumping with
--single-transaction
and--quick
- Allow pivotal tracker ids in the global config file
- Fix missing require for
Fileutils
in the dump load command (#145) - Document
PARALLEL_TEST_PROCESSORS
Making ZSH the default shell on Ubuntu 20.04
ZSH is an alternative command line shell that includes some features like spelling correction, cd automation, better theme, and plugin support. You can replace Bash with ZSH like following:
sudo apt-get install zsh
Setting ZSH as default login shell
sudo usermod -s /usr/bin/zsh $(whoami)
Opening a new terminal window will show you a dialog where you can configure your initial ZSH config (Option 2 recommended).
Afterwards you can install the plugin manager Oh-My-ZSH and select a prop...
Too many parallel test processes may amplify flaky tests
By default parallel_tests will spawn as many test processes as you have CPUs. If you have issues with flaky tests, reducing the number of parallel processes may help.
Important
Flaky test suites can and should be fixed. This card is only relevant if you need to run a flaky test suite that you cannot fix for some reason. If you have no issues...
Running old ImageMagick versions in a Docker container
If your project depends on an old version of ImageMagick that you can no longer install in your system, you can choose the run an old ImageMagick in a Docker container.
Dockerized ImageMagick commands will only work with absolute path arguments. You need to boot a corresponding docker container once before using it.
Setting up Docker
If you haven't installed Docker yet, use our guide or the [official instructions](https://docs.docker.com/get-started/...
How to list updateable dependencies with Bundler and Yarn
Bundler
bundle outdated [--filter-major|--filter-minor|--filter-patch]
Example output for bundle outdated --filter-major
Other examples
A useful flag is --strict
as it will only list versions that are allowed by your Gemfile requirements (e.g. does not show rails update to 6 if your Gemfile has the line gem 'rails', '~>5.2'
).
I also experienced that doing upgrades per group (test, development) are easier to do. Thus --groups
might also be helpful.
$ bundle...
Some tips for upgrading Bootstrap from 3 to 4
Recently I made an upgrade from Bootstrap 3 to Bootstrap 4 in a bigger project. Here are some tips how to plan and perform such an upgrade. The effort will scale with the size of the project and its structure. If your stylesheets already follow strict rules, it may take less time to adapt them to the new version.
Preparation
There are several gems and libraries that works well with bootstrap or provide at least stylesheets/plugins to easily integrate the bootstrap theme. But very often they only work with specific version or are no long...
How to fix: Version in "./docker-compose.yml" is unsupported
When running an older version of docker-compose
you might see the following error:
ERROR: Version in "./docker-compose.yml" is unsupported. You might be seeing this error because you're using the wrong Compose file version. Either specify a supported version (e.g "2.2" or "3.3") and place your service definitions under the `services` key, or omit the `version` key and place your service definitions at the root of the file to use version 1.
For more on the Compose file format versions, see https://docs.docker.com/compose/compose-file/
...
How to test inside iframes with cucumber / capybara
When testing with Cucumber / Caypbara, iframes are ignored, so you can't interact with them.
To interact with your iframe, you have to explicitly tell your driver to use it.
You can reference your iframe either through it's id, or if none given, by it's number:
When /^(.*?) inside the (.*?). iframe$/ do |nested_step, frame_number|
page.within_frame(frame_number.to_i) do
step nested_step
end
end
When /^(.*?) inside the (.*?). iframe:$/ do |nested...
Capybara: Running tests with headless Chrome
Headless Chrome is a way to run the Chrome browser without a visible window.
Configuring Capybara
Configure the Capybara driver like this:
Capybara.register_driver :selenium do |app|
options = Selenium::WebDriver::Chrome::Options.new
options.add_argument('--disable-infobars')
options.add_emulation(device_metrics: { width: 1280, height: 960, touch: false })
unless ENV.key?('NO_HEADLESS')
options.add_argument('--headless')
o...
A few recent CSS properties
-
Feature Queries (Edge 12+): Similar to @media queries, @supports blocks can be scoped to browsers that support a given declaration. There is
CSS.supports()
to do the equivalent in Javascript. -
backdrop-filter
(Edge 17+, but not FF): Applying filters to what is visible through an element. -
[
touch-action
](https://d...
Configuring Webpacker deployments with Capistrano
When deploying a Rails application that is using Webpacker and Capistrano, there are a few configuration tweaks that optimize the experience.
Using capistrano-rails
capistrano-rails is a Gem that adds Rails specifics to Capistrano, i.e. support for Bundler, assets, and migrations. While it is designed for Asset Pipeline (Sprockets) assets, it can easily be configured for Webpacker. This brings these features to the Webpacker world:
- Automatic removal of expired assets
- Manifest backups
How to fix: Pasting in IRB 1.2+ is very slow
IRB 1.2 (shipped with Ruby 2.7, but works on 2.5+) brings pretty syntax highlighting and multiline cursor navigation. However, pasting longer contents is incredibly slow. You can fix that by disabling said features. [1]
Ruby 3.0.0-pre2 solved the issue (however, the fix does not appear to be included in IRB 1.2.6, it must be Ruby itself).
Option 1:
Add a command line flag when opening an IRB:
irb --nomultiline
This also works on modern Rails...
Variable fonts for web developers
This card is mainly an explanation how variable fonts work in CSS, not necessarily a recommendation to actually use them.
What is a variable font?
Designing and rendering fonts are two highly complex topics. For an arbitrary text to appear properly on your screen, its font must be created multiple times for different "settings" like stroke width (boldness) and style (e.g. italic).
Now as web developers, we usually ship these variants of the same font via multiple @font-face
s of the same font-family:
@font-face
font-family...