https://github.com/qavajs/po-testcafe
library for plain-english access to testcafe page object
https://github.com/qavajs/po-testcafe
qa test-automation testing
Last synced: 11 months ago
JSON representation
library for plain-english access to testcafe page object
- Host: GitHub
- URL: https://github.com/qavajs/po-testcafe
- Owner: qavajs
- License: mit
- Created: 2023-04-24T13:14:18.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-24T16:27:44.000Z (about 3 years ago)
- Last Synced: 2025-07-05T06:02:14.489Z (12 months ago)
- Topics: qa, test-automation, testing
- Language: TypeScript
- Size: 318 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## @qavajs/po-testcafe
This library provides the ability to create hierarchical page objects and access elements using plain-english selectors.
Works on top of testcafe.
`npm install @qavajs/po-testcafe`
## Usage
Lib provides getElement method that resolves plain-english selector and return testcafe selector.
```javascript
const { po } = require('@qavajs/po-testcafe');
When(/^click '(.+)'$/, async function (alias) {
const element = await po.getElement(alias);
await element.click();
});
```
```gherkin
When click '#1 of Multiple Component > Child Item'
```
Lib provides capability to get single element from collection by index (#index of Collection) or inner text (#text in Collection).
## Create page object
Lib provides two methods $ and $$ that allow registering elements and collections.
An element can be defined in form of webdriverIO selector or as an instance of the component class.
Each not top-level component should have selector element in form of webdriverIO selector.
```javascript
const { $, $$ } = require('@qavajs/po-testcafe');
class MultipleComponent {
selector = '.list-components li';
ChildItem = $('div');
}
class SingleComponent {
selector = '.container';
ChildItem = $('.child-item');
}
class App {
SingleElement = $('.single-element');
List = $$('.list li');
SingleComponent = $(new SingleComponent());
MultipleComponents = $$(new MultipleComponent());
}
module.exports = new App();
```
## Register PO
Before using po object need to be initiated and hierarchy of elements needs to be registered
The best place to do it is cucumber-js Before hook
```javascript
const { po } = require('@qavajs/po-testcafe');
const pos = require('./app.js');
Before(async function() {
po.init({ timeout: 10000 });
po.register(pos); // pos is page object hierarchy
});
```
## Ignore hierarchy
In case if child element and parent component doesn't have hierarchy dependency
it's possible to pass extra parameter _ignoreHierarchy_ parameter to start traverse from root
```javascript
class ComponentThatDescribesNotWellDesignedDOMTree {
selector = '.container';
//ignoreHierarchy will ignore component selector .container and start traverse from root
ChildItem = $('.child-item', { ignoreHierarchy: true });
}
```
## Optional selector property
If selector property is not provided for Component then parent element will be returned
```javascript
class ParentComponent {
selector = '.container';
ChildComponent = $(new ChildComponent());
}
class ChildComponent {
//Element will be searched in parent .container element
Element = $('.someElement');
}
```