Migration Guide Capybara → Chemlab

주어진 뷰:

_form.html 

<form id="my-form">
    <label for="first-name">이름</label>
    <input type="text" name="first-name" data-testid="first_name" />
    
    <label for="last-name">성</label>
    <input type="text" name="last-name" data-testid="last_name" />
    
    <label for="company-name">회사 이름</label>
    <input type="text" name="company-name" data-testid="company_name" />
    
    <label for="user-name">사용자 이름</label>
    <input type="text" name="user-name" data-testid="user_name" />
    
    <label for="password">암호</label>
    <input type="password" name="password" data-testid="password" />
    
    <input type="submit" value="계속" data-testid="continue"/>
</form>
Capybara Chemlab
before after

주요 차이점

페이지 라이브러리 디자인 vs 페이지 오브젝트 디자인

기존 프레임워크에 구현된 페이지 오브젝트는 요소에 작업을 수행하기 위해 메서드를 정의해야 합니다. (일반적으로 한 줄로) 

def set_first_name(first_name)
  fill_element(:first_name, first_name)
end

def click_continue
  click_element(:continue)
end

it '이름을 설정하고 계속 클릭' do
  Page::Form.perform do |form|
    form.set_first_name('이름')
    form.click_continue
  end
end

페이지 라이브러리는 페이지 요소를 기반으로 메서드를 제공하여 추가 메서드를 불필요하게 만들어 더 효율적으로 만듭니다. 

it '이름을 설정하고 계속 클릭' do
  Page::Form.perform do |form|
    form.first_name = '이름'  # first_name 설정
    form.continue  # 계속 클릭
  end
end

Capybara를 사용하여 ‘이름’ 필드의 텍스트를 확인해야 한다면 고려해야 합니다. 우리는 텍스트를 가져오기 위해 한 줄을 추가해야 합니다: 

def get_first_name
  find_element(:first_name).text
end

Page::Form.perform do |form|
  form.set_first_name('이름')
  expect(form.get_first_name).to eq('이름')
  form.click_continue
end

대신, 페이지 라이브러리는 페이지 요소에서 메서드를 자동으로 생성하므로, 스스로 메서드를 정의할 필요 없이 first_name을 호출하여 텍스트를 가져올 수 있습니다. 

Page::Form.perform do |form|
  form.first_name = '이름'
  expect(form.first_name).to eq('이름')
  form.continue
end

요소 네이밍 규칙

페이지 라이브러리에서 요소 유형이 보존되므로, data-testid에 _field 또는 _button 접미사를 지정할 필요가 없습니다. 

<!-- 이전 -->
<input type="text" name="first-name" data-testid="first_name_field" />
<input type="submit" name="continue" value="계속" data-testid="continue-button" />

<!-- 이후 -->
<input type="text" name="first-name" data-testid="first_name" />
<input type="submit" name="continue" value="계속" data-testid="continue" />

이로써 개발자가 테스트를 작성하는 것이 더 쉬워지며, UI를 볼 때 페이지 라이브러리를 작성할 수 있어 테스트 가능성에 기여합니다.