Skip to content

Commit 99e9bde

Browse files
updated PO docs (#59)
1 parent 82d4c46 commit 99e9bde

File tree

1 file changed

+55
-0
lines changed

1 file changed

+55
-0
lines changed

docs/Guides/page-object.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,58 @@ When I click '@some exact text in Collection'
7575
When I click '/^some regexp$/ in Collection'
7676
```
7777

78+
## Ignore hierarchy
79+
In case if child element and parent component doesn't have hierarchy dependency
80+
it's possible to pass extra parameter _ignoreHierarchy_ parameter to start traverse from root
81+
82+
```javascript
83+
class ComponentThatDescribesNotWellDesignedDOMTree {
84+
selector = '.container';
85+
//ignoreHierarchy will ignore component selector .container and start traverse from root
86+
ChildItem = $('.child-item', { ignoreHierarchy: true });
87+
}
88+
```
89+
90+
## Optional selector property
91+
If selector property is not provided for Component then parent element will be returned
92+
93+
```javascript
94+
class ParentComponent {
95+
selector = '.container';
96+
ChildComponent = $(new ChildComponent());
97+
}
98+
99+
class ChildComponent {
100+
//Element will be searched in parent .container element
101+
Element = $('.someElement');
102+
}
103+
```
104+
105+
## Immediate option
106+
In order, you don't need to retry query for elements exists you can pass { immediate: true } option
107+
```javascript
108+
When('I wait {string} not to be present', async function (alias) {
109+
const element = await po.getElement(alias, { immediate: true }); // in case if element not found dummy not existing element be returned
110+
await element.waitForExist({ reverse: true });
111+
});
112+
```
113+
114+
## Dynamic selectors
115+
In case you need to generate selector based on some data you can use dynamic selectors
116+
117+
e.g
118+
```javascript
119+
const { Selector } = require('@qavajs/po');
120+
121+
class Component {
122+
selector = '.container';
123+
Element = $(Selector((index => `div:nth-child(${index})`))); // function should return valid selector
124+
}
125+
```
126+
127+
Then you can pass parameter to this function from Gherkin file
128+
129+
```gherkin
130+
When I click 'Component > Element (2)'
131+
```
132+

0 commit comments

Comments
 (0)