Random TIL #1

I figured I should share some random TIL that I got when I was working on my tickets. Let's see how long I can keep up with this 😆

Same radio button's name

I stumbled upon this problem where the radio button wasn't checked even though it's supposed to be based on the given param in the URL.

Apparently, the problem was because there's another radio button with the same name so that was the one that got checked. We have two sets of radio buttons (desktop and mobile) and both of them are using the same name. Simply prefixing the name of one of those sets fix the problem

CircleCI artifact for Capybara screenshots

It turned out that it's very easy to access those Capybara screenshots. Simply specify the directory where the screenshot is in your local config will ensure it'll show up in the Artifacts tab in your CircleCI

version: 2
jobs:
  build:
    docker:
      ...
    steps:
      ...
      ...
      - store_artifacts:
          path: /home/circleci/project/tmp/capybara

Testing feature spec in mobile view

In order to test some UI which will only be available on mobile, we need to resize the window first and this can be achieved with this code:

# spec/support/capybara_test_helper.rb
module CapybaraTestHelper
  def resize_to_mobile(width: 375, height: 667)
    page.current_window.resize_to(width, height)
  end
end

# spec/rails_helper.rb
RSpec.configure do |config|
  # ...
  config.include CapybaraTestHelper, type: :feature
end

This works great BUT apparently, Capbybara doesn't resize the window back to the original size so, your specs after that will probably fail. In order to ensure it'll be reset back, put this code in your rails helper again:

RSpec.configure do |config|
  config.after(js: true, type: :feature) do
    page.current_window.resize_to(1600, 1024)
  end
end

I used .maximize before and it worked locally but failed in CircleCI probably due to the unsupported driver as mentioned in the documentation. So, explicitly set the width and height helped.

Capybara parent selector

In one of my specs, I need to get the text value which is the third sibling of an element that I can target. Since it's the only text, I can use parent selector and call .text to get the value. Using .first(:xpath, '..') helped:

find(
  'input[name="meh"]:checked',
  visible: false
).first(:xpath, '..').text

That's it, folks. Hopefully, these notes might help someone in the future ✌️