概要

RSpecを用いて結合テストコードを実行していた際"element has zero size"というエラーにぶつかりました。
パッと見で「クリックした要素のサイズがゼロだからか…」と思い、仮説と検証を行いました。

もしかしたらFontAwesomeを使っている方には同じ現象が起こるかもしれないので、ここで仮説と検証のプロセスを共有します。

環境

• macOS Catalina 10.15.6
• ruby 2.6.5
• Rails 6.0.3.4
• MySQL : 5.6.47
• Bootstrap : 4.3.1

今回のコード

今回は「ユーザーが投稿したタスク内で、コミットを記録していくアプリ」のテストをします。
テスト内容は「投稿したコミットを編集する」です。

require 'rails_helper'

RSpec.describe "コミット編集", type: :system do
  before do
    @commit = FactoryBot.create(:commit)
    # user > task > commit の順にネスト
  end

  context 'コミット編集ができるとき' do
    it '正しい情報が入力されれば更新される' do
      # ログイン (サポートモジュールで実装済み)
      sign_in(@commit.task.user)
      # マイページのタスクをクリック
      find_link(href: "/tasks/#{@commit.task.id}").click
      # コミット編集ボタンをクリック
      find_link(href: "/tasks/#{@commit.task.id}/commits/#{@commit.id}/edit").click
      => エラー！
    end
  end
end

テストコードを実行すると、ターミナルに下記のエラー文が表示されました。

1) コミット編集 コミット編集ができるとき 正しい情報が入力されれば更新される
Failure/Error: find_link(href: "/tasks/#{@commit.task.id}/commits/#{@commit.id}/edit").click
Selenium::WebDriver::Error::ElementNotInteractableError:
element not interactable: element has zero size

続いて、このエラー文から仮説と検証を行います。

仮説と検証

エラー文から仮説設定

Failure/Error: find_link(href: "/tasks/***/edit).click
=> find_linkのところでエラー

Selenium::WebDriver::Error::ElementNotInteractableError:
element not interactable: element has zero size
=> 「要素のサイズがゼロだよ」

▶【仮説】find_linkで指定したリンクのサイズがゼロだからクリックできなかった？

検証ツールでリンクを確認

Chromeの検証ツールで、ターゲットにしたリンクを確認します。

find_link(href: "/tasks/#{@commit.task.id}/commits/#{@commit.id}/edit").clickで検索しクリックしたリンクは、下記のaタグです。

<%# 必要部分を抜粋 %>
<%= link_to edit_task_commit_path(commit.task, commit) do %>
  <i class="fas fa-edit"></i>
<% end %>

<%# 必要部分を抜粋 %>
<%= link_to edit_task_commit_path(commit.task, commit) do %>
  <i class="fas fa-edit" data-linkId="commit-edit"></i>
<% end %>

require 'rails_helper'

RSpec.describe "コミット編集", type: :system do
  before do
    @commit = FactoryBot.create(:commit)
    # user > task > commit の順にネスト
  end

  context 'コミット編集ができるとき' do
    it '正しい情報が入力されれば更新される' do
      # ログイン
      sign_in(@commit.task.user)
      # マイページのタスクをクリック
      find_link(href: "/tasks/#{@commit.task.id}").click
      # コミット編集ボタンをクリック
      - find_link(href: "/tasks/#{@commit.task.id}/commits/#{@commit.id}/edit").click
      ＋ find("svg[data-linkId='commit-edit']").click
    end
  end
end