rx-page-objects
Advanced tools
#Index
Modules
Namespaces
#encore.rxCharacterCount Members
##encore.rxCharacterCount.main
Returns: rxCharacterCount - Page object representing the first rxCharacterCount object found on the page.
##encore.rxCharacterCount.initialize(rxCharacterCountElement)
Params
WebElement - WebElement to be transformed into an rxCharacterCountElement objectReturns: rxCharacterCount - Page object representing the rxCharacterCount object.
#encore.rxOptionFormTable
Members
##encore.rxOptionFormTable.main
Returns: rxOptionFormTable - Page object representing the first rxOptionFormTable object found on the page.
##encore.rxOptionFormTable.initialize(rxOptionFormTableElement)
Params
WebElement - Web element to become an rxOptionFormTable object.Returns: rxOptionFormTable - Page object representing the rxOptionFormTable object.
#encore.rxSortableColumn
Members
##encore.rxSortableColumn.initialize(rxSortableColumnElement, [repeaterString]) Params
WebElement - WebElement to be transformed into an rxSortableColumn object.String - Repeater string from the table. Required for dataReturns: Page - Page object representing the rxSortableColumn object.
##encore.rxSortableColumn.byTable(tableElement)
Params
WebElement - Web element of the entire <table> node.Returns: Page - rxSortableColumns Page object representing the rxSortableColumns object.
##const: encore.rxSortableColumn.sortDirections
Returns: Object - sortDirections Lookup of integer codes for sort directions from human-readable ones.
Example
var sorts = encore.rxSortableColumn.sorts;
// ...
it('should sort the column ascending by default', function () {
expect(column.currentSortDirection).to.eventually.equal(sorts.ascending);
});
#encore.rxStatusColumn Members
##encore.rxStatusColumn.initialize(rxStatusCellElement) Params
WebElement - Status cell element from a table row.Returns: Page - Page object representing an rxStatusColumn.
##const: encore.rxStatusColumn.statuses
Returns: Object - Lookup of status strings from human-readable statuses.
##const: encore.rxStatusColumn.icons
Returns: Object - Lookup of icon class names from a human-readable version.
##const: encore.rxStatusColumn.colors
Returns: Object - Lookup of color class names from a human-readable class name.
#encore.exercise.rxCharacterCount
rxCharacterCount exercises.
Params
Object - Test options. Used to build valid tests.
string - Fallback selector string to initialize widget with.Number - The total number of characters allowed.Number - The number of remaining characters needed to trigger the "near-limit" class.Boolean - Whether or not the textbox ignores leading and
trailing whitespace when calculating the remaining character count.Boolean - Determines if text over the limit should be highlighted.Example
describe('default exercises', encore.exercise.rxCharacterCount({
cssSelector: '.demo-custom-max-characters', // select one of many widgets on page
maxCharacters: 25,
nearLimit: 12,
ignoreInsignificantWhitespace: false
}));
#encore.exercise.rxPaginate rxPaginate exercises.
Params
Object - Test options. Used to build valid tests.
string - Fallback selector string to initialize pagination widget with.string - Estimated page size in the pagination widget.Array.<number> - 200, 350, 500]] - Page sizes to validate.number - Default page size on page load.number - For testing resizing pagination to invalid items per page.Example
describe('default exercises', encore.exercise.rxPaginate({
cssSelector: '.secondary-info rx-paginate', // select one of many pagination tables
pages: 20 // will exercise full functionality at 6, limited functionality at 2
}));
##rxCharacterCount.comment Get and set the comment's textual content. Will erase the current text when setting new text.
Params
String - The desired comment to be sent via .sendKeys(text).Returns: String - The current comment's text, via .getAttribute('value').
Example
it('should erase all text and replace it with new text on update', function () {
rxCharacterCount.comment = 'Bar';
expect(rxCharacterCount.comment).to.eventually.equal('Bar');
});
##rxCharacterCount.remaining
Returns: Number - The remaining number of characters that can be entered.
##rxCharacterCount.overLimitText
Returns: String - The characters that are over the limit.
##rxCharacterCount.isDisplayed()
Returns: Boolean - Whether the root element is currently displayed.
##rxCharacterCount.isNearLimit()
Returns: Boolean - Whether or not the 'near-limit' class is displayed.
##rxCharacterCount.isOverLimit()
Returns: Boolean - Whether or not the 'over-limit' class is displayed.
#rxForm
Members
##rxForm.currencyToPennies(currencyString)
Transform currencyString (USD) to an integer representing pennies. Built to reverse Angular's 'currency' filter.
If your currency string includes fractions of a penny, that precision will be lost!
Params
string - Raw text as output by Angular's currency filter.Example
encore.rxForm.currencyToPennies('$0.01') == 1
encore.rxForm.currencyToPennies('$0.019') == 1
encore.rxForm.currencyToPennies('$100 CAN') == 10000
encore.rxForm.currencyToPennies('($100 AUS)') == -10000
encore.rxForm.currencyToPennies('($1.011)') == -101
encore.rxForm.currencyToPennies('$1.10') == 110
##rxForm.slowClick(elem)
Equivalent to browser.actions().mouseDown(elem).mouseUp().perform();.
This function should be used when dealing with odd or unusual behavior while interacting with click events
that don't seem to work right. Either the element does not appear to respond to a normal .click() call, or
the element is responding to more than one click event. This typically happens more often in Firefox than
in other browsers. See select for an example of a function that will
slow click an element to achieve consistent behavior.
Params
WebElement - Web element to "slow click".Returns: undefined
##rxForm.dropdown
Members
###dropdown.options
Returns: Array.<string> - The text of each option element in the dropdown.
###dropdown.values
Returns: Array.<string> - The value of each option element in the dropdown.
###dropdown.selectedOption
Returns: option - Page object representing the currently selected option.
###dropdown.optionCount()
Returns: number - The number of options in the dropdown.
###dropdown.optionExists(optionText)
Params
string - The text to check for existence in the dropdown.Returns: boolean - Whether or not the option exists.
###dropdown.select(optionText)
Params
string - Partial or total string matching the desired option to select.Returns: undefined
Example
var dropdown = encore.rxForm.dropdown.initialize($('#country-select'));
dropdown.select('United States');
###dropdown.initialize(selectElement) Params
WebElement - Should be a <select> tag.Returns: dropdown - Page object representing a dropdown.
###dropdown.option
Params
string - Partial or total string matching the desired option to select.Returns: option - Page object representing an option.
Members
####option.text
Returns: string - The text inside of the current option.
####option.value
Returns: string - The "value" attribute from the option html tag.
####option.select()
Selects the option from the dropdown.
Returns: undefined
####option.isSelected()
Returns: Boolean - Whether or no the option is currently the selected option.
##rxForm.checkbox
Members
###checkbox.initialize(checkboxElement) Params
WebElement - Should be an <input> tag.Returns: checkbox - Page object representing a checkbox.
###checkbox.isSelected()
Abstraction over checkboxObject.rootElement.isSelected() to keep things shorter.
Returns: boolean - Whether or not the checkbox is currently selected.
###checkbox.select()
Selects the current checkbox.
Returns: undefined
###checkbox.unselect()
Unselects the current checkbox.
Returns: undefined
##rxForm.radioButton
Members
###radioButton.initialize(radioElement) Params
WebElement - Should be an <input> tag.Returns: radioButton - Page object representing a radio button.
###radioButton.isSelected()
Abstraction over radioObject.rootElement.isSelected() to keep things shorter.
Returns: boolean - Whether or not the radio button is currently selected.
###radioButton.select()
Selects the current radio button.
Returns: undefined
##rxForm.form
Members
###form.fill(reference, formData)
Set value in formData to the page object's current method key.
Aids in filling out form data via javascript objects.
For an example of this in use, see encore-ui's end to end tests.
Params
Object - Context to evaluate under as this (typically, this).Object - Key-value pairs of deeply-nested form items, and their values to fill.Example
yourPage.fill({
aTextbox: 'My Name',
aRadioButton: 'Second Option'
aSelectDropdown: 'My Choice'
aModule: {
hasMethods: 'Can Accept Input Too',
deepNesting: {
might: 'be overkill at this level'
}
}
});
##rxOptionFormTable.emptyMessage
Returns: string | null - The currently displayed empty message label text, or null if not present.
##rxOptionFormTable.selectedRow
Will default to the first selected row if many are selected.
Be certain you have a selected row before calling this, or a
NoSuchElementError will be thrown.
Returns: row - Page object representing a row.
##rxOptionFormTable.columnNames
Returns: Array.<string> - Every column heading's text, as an array.
##rxOptionFormTable.selections
Return a list of row indexes that are currently selected.
Get the row yourself if you need more information about the row's contents.
Returns: Array.<number> - All selected rows' indexes from the rxOptionFormTable.
##rxOptionFormTable.disabledOptions
Return a list of row indexes that are currently disabled.
Returns: Array.<number> - All disabled row indexes from the rxOptionFormTable
##rxOptionFormTable.isEmpty()
Returns: boolean - Whether or not the table's the empty message label is currently present.
##rxOptionFormTable.columnData(columnName, [customFn])
Return the value of the cells found under columnName, using getText by default.
For more control, pass in a customFn.
Params
string - Column name containing the cell elements to be retrieved.function - Special work to be done on the column's cell elements.Returns: * | Array.<string> - Array of return values specified in customFn, or an array of strings from getText()
Example
// three rows, with ['$0.00', '$1.00', '$2.00'] in their cells, respectively.
var penniesData = [0, 100, 200];
var penniesFn = function (cellElements) {
return cellElements.map(function (cellElement) {
return cellElement.getText().then(rxForm.currencyToPennies);
});
};
// without the second argument, each cell will have `.getText()` called on it
expect(optionTable.columnData('Surcharge', penniesFn)).to.eventually.eql(penniesData);
##rxOptionFormTable.unselectAll() Unselects every row in the rxOptionFormTable.
Returns: undefined
##rxOptionFormTable.unselectByColumnText(columnName, columnText)
Unselect a row by the columnName that contains columnText.
This function uses cssContainingText, be certain your column name and text is unique.
Params
string - Name of the column that contains the cell to select.string - Cell text that uniquely identifies the selection.Returns: undefined
##rxOptionFormTable.unselectMany(selections)
Unselect options where each { columnName: columnText } in selections is passed to
unselectByColumnText.
Params
Array.<Object> - Array of single key-value pairs to unselect.Returns: undefined
Example
unselectMany([{ 'Name': 'Item 1' },
{ 'Name': 'Item 2' }]);
##rxOptionFormTable.selectByColumnText(columnName, columnText)
Select a row by the columnName that contains columnText.
This function uses cssContainingText, be certain your column name and text is unique.
Params
string - Name of the column that contains the cell to select.string - Cell text that uniquely identifies the selection.Returns: undefined
##rxOptionFormTable.selectMany(selections)
Select options where each { columnName: columnText } in selections is passed to
selectByColumnText.
Params
Array.<Object> - Array of single key-value pairs to select.Returns: undefined
Example
selectMany([{ 'Name': 'Item 1' },
{ 'Name': 'Item 2' }]);
##rxOptionFormTable.row Params
number - Index of the row in the table.Returns: row - Page object representing a row.
Members
###row.selectInput Since checkboxes are a superset of radio input elements, a checkbox is used.
Returns: checkbox - Page object representing a checkbox.
###row.isSelected()
Returns: boolean - Whether or not the row is currently selected.
###row.isCurrent()
Returns: boolean - Whether or not the row is visually marked as "current".
###row.cell(columnName, [customFn])
Return the value of the cell by columnName, using getText by default.
For more control, pass in a customFn.
The reason columnName is used, as opposed to by binding, is due to some
complexity contained within the getContent function in the rxOptionFormTable directive.
Link to the getContent function.
There are columns that may contain static data (or expressions to be evaluated against $scope)
for every row, and those data items are never bound to $scope. Although the column.keys that are
passed into $scope.getContent that contain angular expressions can be located by binding, there are
cases when plain text or HTML gets passed in. These never get bound to $scope. They can, however,
be located by querying the column name via CSS selector, so that's used instead.
Params
string - Column name to grab the current row's cell under.function - Special work to be done to the resulting cellElement.###row.select() Selects the current row.
Returns: undefined
###row.unselect()
Unselects the current row.
Returns: undefined
#rxSortableColumn
Members
##rxSortableColumn.sort Prefer using sortAscending and sortDescending over this.
##rxSortableColumn.data
Returns: Array - A list of all cell text in this column.
##rxSortableColumn.getDataUsing
Return a list of all cell contents in this column.
Passes all cell elements to customFn, or if undefined, will return just the text of each cell.
The second argument, allByCssSelectorString is used when your column's binding
(which is used by by.repeater().column) is for some reason unreachable by protractor.
A common reason why this wouldn't be the case is because the binding is not used as text
within a web element, but instead used within the tag's attrs. An example of this is illustrated here:
Binding inside of a tag's attributes.
In these cases, you should specify a css selector that will select each element in the column you
care about, since by.binding is not an option.
Params
function - Specific work that must occur to all column cell elements.String - Fallback $$('.all-by-css')-style call to select column cells.Returns: Array - Dependent on the return value of customFn.
Example
var sumCurrency = function (columnElements) {
return columnElements.reduce(function (acc, columnElement) {
return columnElement.getText().then(function (text) {
return acc + encore.rxForm.currencyToPennies(text);
});
}, 0);
};
charges.column('Usage Charges').getDataUsing(sumCurrency).then(function (sum) {
expect(currentUsage.estimate).to.eventually.equal(sum);
});
##rxSortableColumn.currentSortDirection The current sort direction of the column.
- Ascending sort: (1) means the arrow is pointed down. [0-9, a-z]
- Descending sort: (0) means the arrow is pointed up. [z-a, 9-0]
- Not sorted: (-1) means there is no arrow for this column.
Returns: Integer - : 1, 0, or -1 based on direction.
Use sortDirections when testing your columns.
##rxSortableColumn.sortAscending()
Will repeatedly click the sort button until the column is sorted ascending.
Returns: undefined
##rxSortableColumn.sortDescending()
Will repeatedly click the sort button until the column is sorted descending.
Returns: undefined
#rxSortableColumns
Members
##rxSortableColumns.names
Return all column names in tableElement.
If any special work needs to be done, pass in a custom mapFn to getNamesUsing instead.
Returns: Array - : An array of strings representing text in each column in the table.
#rxStatusColumn
Members
##rxStatusColumn.byType Represents the custom defined status type. This has no relation to the tooltip text, the icon chosen, or the color used to represent it.
Returns: String - Status cell's custom defined status type.
##rxStatusColumn.byIcon
Represents the status as summarized by the icon selection alone. Extracted from the font-awesome icon used.
Returns: String - Status cell's font-awesome icon name.
##rxStatusColumn.byColor
Represents the status as summarized by the color selection alone. Extracted from the class name.
Returns: String - Status cell's color class name.
##rxStatusColumn.tooltip
Will appear on hover.
Members
###tooltip.exists Hovers over the current row's status column and returns whether or not a tooltip appears.
Returns: Boolean - Whether or not a tooltip is present.
###tooltip.text
Returns: String - Tooltip text.
FAQs
Midway test page objects for all of the Encore UI components
The npm package rx-page-objects receives a total of 3 weekly downloads. As such, rx-page-objects popularity was classified as not popular.
We found that rx-page-objects demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.