マイグレーションガイド 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ケムラボ
beforeafter

主な違い

ページライブラリ設計とページオブジェクト設計の違い

既存のフレームワークで実装されているページオブジェクトでは、要素に対してアクションを実行するメソッドを定義する必要があります。(通常はワンライナー）

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'  # sets the first_name
    form.continue  # clicks 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-qa-selectorに_field または_button サフィックスを指定する必要はありません。

<!-- Before -->
<input type="text" name="first-name" data-testid="first_name_field" />
<input type="submit" name="continue" value="Continue" data-testid="continue_button" />

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

これにより、開発者はテストを書きやすくなり、UI を見ながら Page Library を書くことができるので、テスト容易性に貢献します。