개요

RSpec을 사용하여 결합 테스트 코드를 실행했을 때 "element has zero size"というエラー에 부딪쳤습니다.
확실히 보고 「クリックした要素のサイズがゼロだからか…」と思い、仮説と検証 를 실시했습니다.

어쩌면 FontAwesome을 사용하는 사람들에게도 같은 현상이 발생할 수 있으므로 여기에서 가설과 검증 과정을 공유합니다.

환경

macOS Catalina 10.15.6

루비 2.6.5

Rails 6.0.3.4

MySQL : 5.6.47

Bootstrap : 4.3.1

이번 코드

이번은 「ユーザーが投稿したタスク内で、コミットを記録していくアプリ」 의 테스트를 합니다.テスト内容は「投稿したコミットを編集する」 입니다.

app/spec/system/commits_spec.rb

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
=> "요소의 크기가 0입니다."

▶【가설】find_link에서 지정한 링크의 크기가 0이므로 클릭할 수 없었습니까?

검증 도구로 링크 확인

Chrome 검증 도구에서 타겟팅한 링크를 확인합니다.
find_link(href: "/tasks/#{@commit.task.id}/commits/#{@commit.id}/edit").click 에서 검색하고 클릭한 링크는 아래의 a 태그입니다.

확실히, a 0x17.27 의 「높이 제로의 요소」를 클릭하려고 하고 있었던 것을 알 수 있습니다. 높이가 제로에서는, 폭이 있더라도 존재하지 않는 판정이 되는 것 같네요 . 처음 알았습니다. 상황 정리 지금 클릭하고 싶은 것은 오른쪽의 파란색 편집 아이콘입니다. 이것을 find_link().click 로 클릭하려고 했습니다만, 검증 툴로 확인했더니, 사이즈가 없는 a 태그이므로 클릭할 수 없다 라고 하는 결과가 되고 있습니다. 덧붙여서이 a 태그 부분이 뷰 파일로 어떻게 기술되어 있는지 살펴 보겠습니다. app/views/commits/_commit.html.erb <%# 필요한 부분 발췌 %> <%= link_to edit_task_commit_path(commit.task, commit) do %> <i class="fas fa-edit"></i> <%end%> 편집 아이콘 <i class="fas fa-edit"></i> 은 실제로 링크로 표시되는 문자입니다. 즉 "링크를 클릭"하려면 이 아이콘을 클릭하면 좋을 것 같습니다. 이 아이콘입니다만, 실은 페이지내의 다른 부분에서도 사용하고 있으므로, 개별적으로 id 속성을 부여해 클릭해 봅시다. 코드 변경 ▶ 검증 이미지와 같이 클릭하려는 요소에 id 속성 (data-linkId 속성)을 부여했습니다. app/views/commits/_commit.html.erb <%# 필요한 부분 발췌 %> <%= link_to edit_task_commit_path(commit.task, commit) do %> <i class="fas fa-edit" data-linkId="commit-edit"></i> <%end%> 그러면 HTML이 다음과 같이 표시됩니다.svg 요소 (아이콘)에 data-linkId를 부여 할 수있었습니다. data-linkId="commit-edit" 부분입니다. 이것을 find로 가져와 클릭해 보겠습니다. app/spec/system/commits_spec.rb require 'rails_helper' RSpec.describe "커밋 편집", type: :system do before do @commit = FactoryBot.create(:commit) # user > task > commit 순으로 중첩 끝 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 끝 끝 끝 이 변경으로 인해클릭 전 화면에서