Migration Guide Capybara → Chemlab

주어진 뷰:

_form.html 

<form id="my-form">
    <label for="first-name">First name</label>
    <input type="text" name="first-name" data-testid="first_name" />

    <label for="last-name">Last name</label>
    <input type="text" name="last-name" data-testid="last_name" />

    <label for="company-name">Company name</label>
    <input type="text" name="company-name" data-testid="company_name" />

    <label for="user-name">User name</label>
    <input type="text" name="user-name" data-testid="user_name" />

    <label for="password">Password</label>
    <input type="password" name="password" data-testid="password" />

    <input type="submit" value="Continue" data-testid="continue"/>
</form>
Capybara Chemlab
이전 이후

주요 차이점

페이지 라이브러리 디자인 vs 페이지 객체 디자인

기존 프레임워크에 구현된 페이지 객체는 요소에 대한 작업을 수행하기 위한 메서드를 정의해야 합니다. (보통 한 줄짜리) 

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

def click_continue
  click_element(:continue)
end

it 'sets first name and clicks continue' do
  Page::Form.perform do |form|
    form.set_first_name('First Name')
    form.click_continue
  end
end

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

it 'sets first name and clicks continue' do
  Page::Form.perform do |form|
    form.first_name = 'First Name'  # first_name 설정
    form.continue  # 계속 클릭
  end
end

Capybara를 사용하여 First name 필드의 텍스트를 유효성 검사해야 하는 경우를 고려해 보십시오. 텍스트를 가져오기 위해 한 줄짜리를 추가해야 합니다. 

def get_first_name
  find_element(:first_name).text
end

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

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

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

요소 명명 규칙

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

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

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

이는 개발자가 테스트를 작성하기 훨씬 쉽고 UI를 보면서 페이지 라이브러리를 작성할 수 있기 때문에 테스트 가능성에 기여합니다.