Skip to content

Commit 0d354e4

Browse files
AlexGalichenkoAlexGalichenko
authored
V2 (#86)
* added v2 docs * updated standalone installation
1 parent 56b3625 commit 0d354e4

30 files changed

+8957
-1845
lines changed

‎docs/Guides/page-object.mdx renamed to ‎docs/Guides/page-object-v1.mdx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ sidebar_position: 2
55
import Tabs from '@theme/Tabs';
66
import TabItem from '@theme/TabItem';
77

8-
# Page Object
8+
# Page Object v1
99
Framework provides capability to call getElement method from po object that resolves plain-english selector and return element or array of elements.
1010
<Tabs>
1111
<TabItem value="js" label="JavaScript" default>
1212
```javascript
1313
const { When } = require('@cucumber/cucumber');
14-
const { po } = require('@qavajs/po');
14+
const { po } = require('@qavajs/steps-wdio/po'); // or @qavajs/steps-playwright/po
1515

1616
When(/^click '(.+)'$/, async function (alias) {
1717
const element = await po.getElement(alias);
@@ -23,7 +23,7 @@ Framework provides capability to call getElement method from po object that reso
2323
<TabItem value="ts" label="TypeScript">
2424
```typescript
2525
import { When } from '@cucumber/cucumber';
26-
import { po } from '@qavajs/po';
26+
import { po } from '@qavajs/steps-wdio/po'; // or @qavajs/steps-playwright/po
2727

2828
When(/^click '(.+)'$/, async function (alias: string) {
2929
const element = await po.getElement(alias);
@@ -55,7 +55,7 @@ Each not top-level component should have selector property or be inherited from
5555
* playwright - @qavajs/po-playwright
5656
* testcafe - @qavajs/po-testcafe
5757
*/
58-
const { $, $$, Component } = require('@qavajs/po');
58+
const { $, $$, Component } = require('@qavajs/steps-wdio/po'); // or @qavajs/steps-playwright/po
5959

6060
class MultipleComponent extends Component {
6161
ChildItem = $('div');
@@ -84,7 +84,7 @@ Each not top-level component should have selector property or be inherited from
8484
* playwright - @qavajs/po-playwright
8585
* testcafe - @qavajs/po-testcafe
8686
*/
87-
import { $, $$, Component } from '@qavajs/po';
87+
import { $, $$, Component } from '@qavajs/steps-wdio/po'; // or @qavajs/steps-playwright/po
8888

8989
class MultipleComponent extends Component {
9090
ChildItem = $('div');
@@ -170,7 +170,7 @@ In case you need to generate selector based on some data you can use dynamic sel
170170
<Tabs>
171171
<TabItem value="js" label="JavaScript" default>
172172
```javascript
173-
const { Selector } = require('@qavajs/po');
173+
const { Selector } = require('@qavajs/steps-wdio/po'); // or @qavajs/steps-playwright/po
174174

175175
class Component {
176176
selector = '.container';
@@ -180,7 +180,7 @@ In case you need to generate selector based on some data you can use dynamic sel
180180
</TabItem>
181181
<TabItem value="ts" label="TypeScript">
182182
```typescript
183-
import { Selector } from '@qavajs/po';
183+
import { Selector } from '@qavajs/steps-wdio/po'; // or @qavajs/steps-playwright/po
184184

185185
class Component {
186186
selector = '.container';
@@ -204,7 +204,7 @@ Playwright example:
204204
<Tabs>
205205
<TabItem value="js" label="JavaScript" default>
206206
```javascript
207-
const { NativeSelector } = require('@qavajs/po-playwright');
207+
const { NativeSelector } = require('@qavajs/steps-playwright/po');
208208

209209
class Component {
210210
selector = '.container';
@@ -214,7 +214,7 @@ Playwright example:
214214
</TabItem>
215215
<TabItem value="ts" label="TypeScript">
216216
```typescript
217-
import { NativeSelector } from '@qavajs/po-playwright';
217+
import { NativeSelector } from '@qavajs/steps-playwright/po';
218218

219219
class Component {
220220
selector = '.container';
@@ -229,7 +229,7 @@ WDIO example:
229229
<Tabs>
230230
<TabItem value="js" label="JavaScript" default>
231231
```javascript
232-
const { NativeSelector } = require('@qavajs/po');
232+
const { NativeSelector } = require('@qavajs/steps-wdio/po');
233233

234234
class Component {
235235
selector = '.container';
@@ -239,7 +239,7 @@ WDIO example:
239239
</TabItem>
240240
<TabItem value="ts" label="TypeScript">
241241
```typescript
242-
import { NativeSelector } from '@qavajs/po-playwright';
242+
import { NativeSelector } from '@qavajs/steps-wdio/po';
243243

244244
class Component {
245245
selector = '.container';

‎docs/Guides/page-object-v2.mdx

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
---
2+
sidebar_position: 2
3+
---
4+
5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
8+
# Page Object v2
9+
qavajs provides flexible page object model that resolves plain-english selector and return element or array of elements.
10+
11+
<Tabs>
12+
<TabItem value="js" label="JavaScript" default>
13+
```javascript
14+
const { When } = require('@cucumber/cucumber');
15+
16+
// playwright
17+
When('click {playwrightLocator}'/, async function (locator) {
18+
await locator.click();
19+
});
20+
21+
// wdio
22+
When('click {wdioLocator}'/, async function (locator) {
23+
await locator().click();
24+
});
25+
```
26+
</TabItem>
27+
<TabItem value="ts" label="TypeScript">
28+
```typescript
29+
import { When } from '@cucumber/cucumber';
30+
31+
// playwright
32+
When('click {playwrightLocator}'/, async function (locator) {
33+
await locator.click();
34+
});
35+
36+
// wdio
37+
When('click {wdioLocator}'/, async function (locator) {
38+
await locator().click();
39+
});
40+
```
41+
</TabItem>
42+
</Tabs>
43+
44+
```gherkin
45+
When click 'Product > Add To Cart'
46+
```
47+
48+
## Create page object
49+
50+
Entry point of page object is class defined as _pageObject_ property in config
51+
<Tabs>
52+
<TabItem value="js" label="JavaScript" default>
53+
```javascript
54+
const { locator } = require('@qavajs/steps-playwright/po'); // @qavajs/steps-wdio/po
55+
56+
class App {
57+
SimpleLocator = locator('.single-element');
58+
TemplateLocator = locator.template(text => `.class:has-text("${text}")`);
59+
NativeLocator = locator.native(({ browser, context, page, argument }) => page.getByText('some text'));
60+
Component = locator('.container').as(SingleComponent);
61+
}
62+
63+
class SingleComponent {
64+
ChildItem = locator('.child-item');
65+
}
66+
67+
module.exports = App;
68+
```
69+
</TabItem>
70+
<TabItem value="ts" label="TypeScript">
71+
```typescript
72+
import { locator } from '@qavajs/steps-playwright/po'; // @qavajs/steps-wdio/po
73+
74+
class App {
75+
SimpleLocator = locator('.single-element');
76+
TemplateLocator = locator.template(text => `.class:has-text("${text}")`);
77+
NativeLocator = locator.native(({ browser, context, page, argument }) => page.getByText('some text'));
78+
Component = locator('.container').as(SingleComponent);
79+
}
80+
81+
class SingleComponent {
82+
ChildItem = locator('.child-item');
83+
}
84+
85+
export default App;
86+
```
87+
</TabItem>
88+
</Tabs>
89+
90+
Usage in feature file
91+
92+
```gherkin
93+
Feature: Page Object Demo
94+
95+
Scenario: Interact with element
96+
When I click 'Simple Locator'
97+
98+
```
99+
100+
## Template locator
101+
In case you need to generate selector based on some data you can use dynamic selectors
102+
103+
<Tabs>
104+
<TabItem value="js" label="JavaScript" default>
105+
```javascript
106+
const { locator } = require('@qavajs/steps-playwright/po'); // @qavajs/steps-wdio/po
107+
108+
class Component {
109+
Element = locator.template(index => `div:nth-child(${index})`); // function should return valid selector
110+
}
111+
```
112+
</TabItem>
113+
<TabItem value="ts" label="TypeScript">
114+
```typescript
115+
import { locator } from '@qavajs/steps-playwright/po'; // @qavajs/steps-wdio/po
116+
117+
class Component {
118+
Element = locator.template(index => `div:nth-child(${index})`); // function should return valid selector
119+
}
120+
```
121+
</TabItem>
122+
</Tabs>
123+
124+
Then you can pass parameter to this function from Gherkin file
125+
126+
```gherkin
127+
When I click 'Component > Element (2)'
128+
```
129+
130+
## Working with collections
131+
Unlike qavajs v1, there is no built-in collection selectors. Instead you can define own way to get some certain
132+
element from collection using template locator.
133+
134+
```typescript
135+
import { locator } from '@qavajs/steps-playwright/po'; // @qavajs/steps-wdio/po
136+
137+
class App {
138+
ElementByIndex = locator.template(index => `xpath=//div[${index}]`);
139+
ElementByInnerText = locator.template(text => `div:has-text("${text}")`);
140+
}
141+
```
142+
143+
```gherkin
144+
When I click 'Element By Index (1)'
145+
When I click 'Element By Inner Text (some text)'
146+
```
147+
148+
## Native framework locator
149+
It is also possible to use driver-built capabilities to return element. You can pass handler that has access to
150+
current `page`, `browser`, `context`, `argument` to handler;
151+
152+
Playwright example:
153+
<Tabs>
154+
<TabItem value="js" label="JavaScript" default>
155+
```javascript
156+
const { locator } = require('@qavajs/steps-playwright/po');
157+
158+
class Component {
159+
Element = locator.native(({ page }) => page.getByText(`some text`)));
160+
}
161+
```
162+
</TabItem>
163+
<TabItem value="ts" label="TypeScript">
164+
```typescript
165+
import { locator } from '@qavajs/steps-playwright/po';
166+
167+
class Component {
168+
Element = locator.native(({ page }) => page.getByText(`some text`)));
169+
}
170+
```
171+
</TabItem>
172+
</Tabs>

‎docs/StandaloneSolutions/cypress.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ npm install cypress
1111
```
1212

1313
```
14-
npm install @qavajs/cypress @qavajs/cypress-runner-adapter @qavajs/memory @qavajs/po-cypress
14+
npm install @qavajs/cypress @qavajs/cypress-runner-adapter @qavajs/memory
1515
```
1616

1717
## Configuration

‎docs/StandaloneSolutions/playwright.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ npm init playwright
1111
```
1212

1313
```shell
14-
npm install @cucumber/cucumber @qavajs/playwright @qavajs/playwright-runner-adapter @qavajs/memory @qavajs/po-playwright
14+
npm install @cucumber/cucumber @qavajs/playwright @qavajs/playwright-runner-adapter @qavajs/memory
1515
```
1616

1717
## Configuration

‎docs/Steps-v1/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Steps v1",
3+
"position": 20,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Steps v1"
7+
}
8+
}

‎docs/Steps/accessibility.md renamed to ‎docs/Steps-v1/accessibility-v1.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
sidebar_position: 7
33
---
44

5-
# @qavajs/steps-accessibility
5+
# @qavajs/steps-accessibility v1
66
Steps to perform accessibility checks using axe library.
77
Library can work on top of playwright and webdriverio drivers
88

99
## Installation
1010
```
11-
npm install @qavajs/steps-accessibility
11+
npm install @qavajs/steps-accessibility@1
1212
```
1313

1414
## Config

‎docs/Steps/api.md renamed to ‎docs/Steps-v1/api-v1.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
sidebar_position: 3
33
---
44

5-
# @qavajs/steps-api
5+
# @qavajs/steps-api v1
66
Step library to work with API
77

88
## Installation
99
```
10-
npm install @qavajs/steps-api
10+
npm install @qavajs/steps-api@1
1111
```
1212

1313
## Configuration

‎docs/Steps/files.md renamed to ‎docs/Steps-v1/files-v1.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
sidebar_position: 5
33
---
44

5-
# @qavajs/steps-files
5+
# @qavajs/steps-files v1
66
Step library to work with file system
77

88
## Installation
99
```
10-
npm install @qavajs/steps-files
10+
npm install @qavajs/steps-files@1
1111
```
1212

1313
## Configuration

‎docs/Steps/gmail.md renamed to ‎docs/Steps-v1/gmail-v1.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
sidebar_position: 8
33
---
44

5-
# @qavajs/steps-gmail
5+
# @qavajs/steps-gmail v1
66
Step library to test emails via gmail client
77

88
## Installation
99
```
10-
npm install @qavajs/steps-gmail
10+
npm install @qavajs/steps-gmail@1
1111
```
1212

1313
## Configuration

‎docs/Steps/lighthouse.md renamed to ‎docs/Steps-v1/lighthouse-v1.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
sidebar_position: 8
33
---
44

5-
# @qavajs/steps-lighthouse
5+
# @qavajs/steps-lighthouse v1
66
Steps to perform lighthouse audit.
77
Library can work on top of playwright and webdriverio drivers
88

99
## Installation
1010
```
11-
npm install @qavajs/steps-lighthouse
11+
npm install @qavajs/steps-lighthouse@1
1212
```
1313

1414
## Configuration

‎docs/Steps/memory.md renamed to ‎docs/Steps-v1/memory-v1.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
sidebar_position: 4
33
---
44

5-
# @qavajs/steps-memory
5+
# @qavajs/steps-memory v1
66
Steps to work with memory module
77
## Installation
88
```
9-
npm install @qavajs/steps-memory
9+
npm install @qavajs/steps-memory@1
1010
```
1111

1212
## Configuration

0 commit comments

Comments
 (0)