You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In a similar manner CodeceptJS allows you to generate **StepObjects**, **PageFragments** and any other are abstraction
72
-
by running `go` command with `--kind` option:
71
+
### Page Fragments
72
+
73
+
In a similar manner CodeceptJS allows you to generate **PageFragments** and any other are abstraction
74
+
by running `go` command with `--kind` (or `-t`) option:
73
75
74
76
```
75
77
codeceptjs go --kind fragment
76
78
```
77
79
80
+
Page Fragments represent autonomous parts of a page, like modal boxes, components, widgets.
81
+
Technically they are the same as PageObject but conceptually they are a bit different.
82
+
For instance, it is recommended that Page Fragment to include a root locator of a component.
83
+
Methods of page fragment can use `within` block to narrow scope to a root locator:
84
+
85
+
```js
86
+
letI;
87
+
// fragments/modal.js
88
+
module.exports= {
89
+
90
+
_init() {
91
+
I=require('codeceptjs/actor')();
92
+
},
93
+
94
+
root:'#modal',
95
+
96
+
// we are clicking "Accept: inside a popup window
97
+
accept() {
98
+
within(this.root, function() {
99
+
I.click('Accept');
100
+
});
101
+
}
102
+
}
103
+
```
104
+
105
+
### StepObjects
106
+
107
+
StepObjects represent complex actions which involve usage of multiple web pages. For instance, creating users in backend, chaning permissions, etc.
108
+
StepObject can be created similarly to PageObjects or PageFragments:
109
+
110
+
```
111
+
codeceptjs go --kind step
112
+
```
113
+
114
+
Technically they are the same as PageObjects but with no locators inside them. StepObjects can inject PageObjects and use multiple POs to make a complex scenarios:
115
+
116
+
```js
117
+
letI, userPage, permissionPage;
118
+
module.exports= {
119
+
120
+
_init() {
121
+
I=require('codeceptjs/actor')();
122
+
userPage =require('../pages/user');
123
+
userPage._init();
124
+
permissionPage =require('../pages/permissions');
125
+
permissionPage._init();
126
+
127
+
},
128
+
129
+
createUser(name) {
130
+
// action composed from actions of page objects
131
+
userPage.open();
132
+
userPage.create(name);
133
+
permissionPage.activate(name);
134
+
}
135
+
136
+
};
137
+
```
138
+
78
139
## Actor
79
140
80
141
Login example above can be reworked so the method `login` would be available in `I` object itself.
81
142
This is recommended if most of tests require user authentication and for not to require `loginPage` every time.
82
143
83
144
At initialization you were asked to create custom steps file. If you accepted this option you may use `custom_steps.js` file to extend `I`.
84
-
See how `login` method can be added to `I`:
145
+
See how `login` method can be added to `I`:
85
146
86
147
```js
87
148
'use strict';
88
149
// in this file you can append custom step methods to 'I' object
89
150
90
151
module.exports=function() {
91
152
returnrequire('./lib/actor')({
92
-
153
+
93
154
login:function(email, password) {
94
155
this.fillField('Email', email);
95
156
this.fillField('Password', password);
96
-
this.click('Submit');
97
-
}
157
+
this.click('Submit');
158
+
}
98
159
});
99
160
}
100
161
```
101
-
Please notice that instead of `I` you should use `this` in current context.
162
+
Please notice that instead of `I` you should use `this` in current context.
0 commit comments