blob: 025f998c0c97a8342614f43272584764879f3c58 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
---
stage: none
group: unassigned
info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
---
# Migration Guide Capybara → Chemlab
Given the view:
*_form.html*
```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 |
| ------ | ----- |
|  |  |
## Key Differences
### Page Library Design vs Page Object Design
Page Objects as implemented in the existing framework require you to define methods to perform actions on elements. (Usually one-liners)
```ruby
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
```
Page Libraries make this more efficient by providing methods based on the page's elements, making extra methods unnecessary.
```ruby
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
```
Consider if we needed to validate the text of the `First name` field using Capybara. We'd need to add a one-liner to fetch the text:
```ruby
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
```
Instead, because the page library automatically creates methods from page elements, we can fetch the text by calling `first_name` without writing code to define the method ourselves:
```ruby
Page::Form.perform do |form|
form.first_name = 'First Name'
expect(form.first_name).to eq('First Name')
form.continue
end
```
### Element Naming Convention
Since the element type is preserved within the Page Library, there is no need to specify a `_field` or `_button` suffix to the data-qa-selector.
```html
<!-- 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" />
```
This makes it much easier for Developers to write tests and contributes to testability since we can write the Page Library while we look at the UI.
|
