diff --git a/docs/articles/documentation/test-api/a-z-index.md b/docs/articles/documentation/test-api/a-z-index.md index 3f24e0bde46..e87b165be7f 100644 --- a/docs/articles/documentation/test-api/a-z-index.md +++ b/docs/articles/documentation/test-api/a-z-index.md @@ -23,7 +23,8 @@ This topic lists test API members in alphabetical order. * [Role](authentication/user-roles.md) * [anonymous](authentication/user-roles.md) * [Selector](selecting-page-elements/selectors.md#creating-selectors) - * [addCustomDOMProperties](selecting-page-elements/selectors.md#adding-custom-properties-to-element-state) + * [addCustomDOMProperties](selecting-page-elements/selectors.md#custom-properties) + * [addCustomMethods](selecting-page-elements/selectors.md#custom-methods) * [child](selecting-page-elements/selectors.md#child) * [count](selecting-page-elements/selectors.md#check-if-an-element-exists) * [exists](selecting-page-elements/selectors.md#check-if-an-element-exists) diff --git a/docs/articles/documentation/test-api/selecting-page-elements/selectors.md b/docs/articles/documentation/test-api/selecting-page-elements/selectors.md index b651e57f419..0d81dce570e 100644 --- a/docs/articles/documentation/test-api/selecting-page-elements/selectors.md +++ b/docs/articles/documentation/test-api/selecting-page-elements/selectors.md @@ -38,7 +38,9 @@ This topic contains the following sections. * [Define Action Targets](#define-action-targets) * [Define Assertion Actual Value](#define-assertion-actual-value) * [Selector Timeout](#selector-timeout) -* [Adding Custom Properties to Element State](#adding-custom-properties-to-element-state) +* [Extending Selectors](#extending-selectors) + * [Custom Properties](#custom-properties) + * [Custom Methods](#custom-methods) * [Calling Selectors from Node.js Callbacks](#calling-selectors-from-nodejs-callbacks) * [Limitations](#limitations) @@ -686,11 +688,13 @@ DOM node or the timeout exceeds. Note that you can additionally require that the node returned by the selector is visible. To do this, use the [visibilityCheck](selector-options.md#optionsvisibilitycheck) option. -## Adding Custom Properties to Element State +## Extending Selectors -TestCafe allows you to extend [element state](#obtain-element-state) with custom properties calculated on the client side. +TestCafe allows you to extend [element state](#obtain-element-state) with custom properties and methods executed on the client side. -To do this, use the selector's `addCustomDOMProperties` method. +### Custom Properties + +To add custom properties, use the selector's `addCustomDOMProperties` method. ```text Selector().addCustomDOMProperties({ @@ -728,6 +732,43 @@ test('Check Label HTML', async t => { }); ``` +### Custom Methods + +To add custom methods, use the `addCustomMethods` method. + +```text +Selector().addCustomMethods({ + method1: fn1, + method2: fn2, + /* ... */ +}); +``` + +Parameter | Type | Description +----------------------------- | -------- | ----------- +`method1`, `method2`, ... | String | Method names. +`fn1`, `fn2`, ... | Function | Functions that contain method code. Executed on the client side in the browser. + +Functions that contain method code (`fn1`, `fn2`, ...) take the following parameters. + +Parameter | Type | Description +----------------------- | -------- | ----------- +`node` | Object | The DOM node. +`param1`, `param2`, ... | Any | Method parameters. + +The `addCustomMethods` function also adds the specified methods to the [element state](#obtain-element-state) returned by the selector. + +**Example** + +```js +const myTable = Selector('.my-table').addCustomMethods({ + getCellText: (table, rowIndex, columnIndex) => + table.rows[rowIndex].cells[columnIndex].innerText +}); + +await t.expect(myTable.getCellText(1, 1)).contains('hey!'); +``` + ## Calling Selectors from Node.js Callbacks Selectors need access to the [test controller](../test-code-structure.md#test-controller) to be executed.