The CSS selector that this interactor uses to find matching elements
Call this InteractorConstructor to initialize a button Interactor. The button interactor can be used to interact with buttons on the page and to assert on their state.
The button is located by the visible text on the button.
await Button('Submit').click();
await Button('Submit').is({ disabled: true });
await Button({ id: 'submit-button', disabled: true }).exists();
title: string – Filter by titleid: string – Filter by idvisible: boolean – Filter by visibility. Defaults to true. See isVisible.disabled: boolean – Filter by whether the button is disabled. Defaults to false.focused: boolean – Filter by whether the button is focused. See focused.click(): Interaction – Click on the buttonfocus(): Interaction – Move focus to the buttonblur(): Interaction – Move focus away from the buttonCall this InteractorConstructor to initialize a checkbox Interactor. The checkbox interactor can be used to interact with checkboxes on the page and to assert on their state.
The checkbox is located by the text of its label.
await CheckBox('Accept').check();
await CheckBox('Accept').is({ disabled: true });
await CheckBox({ id: 'accept', disabled: true }).exists();
title: string – Filter by titleid: string – Filter by idvisible: boolean – Filter by visibility. Defaults to true. See isVisible.valid: boolean – Filter by whether the checkbox is valid.checked: boolean – Filter by whether the checkbox is checked.indeterminate: boolean - Filter by whether the checkbox has indeterminate state.disabled: boolean – Filter by whether the checkbox is disabled. Defaults to false.focused: boolean – Filter by whether the checkbox is focused. See focused.click(): Interaction – Click on the checkboxfocus(): Interaction – Focus the checkboxblur(): Interaction – Blur the checkboxcheck(): Interaction – Check the checkbox if it is not checkeduncheck(): Interaction – Uncheck the checkbox if it is checkedtoggle(): Interaction – Toggle the checkboxUse this InteractorConstructor as a base for creating interactors which work with form fields. This allows you to use field labels as locators, and also provides some basic filters which are convenient for most form fields.
Locates the form field by its label.
const PasswordField = FormField.extend<HTMLInputElement>('password field')
.selector('input[type=password'])
.filters({
value: (element) => element.value,
placeholder: (element) => element.placeholder,
})
title: string – Filter by titleid: string – Filter by idvisible: boolean – Filter by visibility. Defaults to true. See isVisible.focused: boolean – Filter by whether the form field is focused. See focused.valid: boolean – Filter by whether the form field is valid.disabled: boolean – Filter by whether the form field is disabled. Defaults to false.click(): Interaction – Click on the form fieldfocus(): Interaction – Move focus to the form fieldblur(): Interaction – Move focus away from the form fieldUse this InteractorConstructor as a base for creating interactors which work with HTML elements. This provides some basic functionality which is convenient for most HTML elements.
const Link = HTML.extend<HTMLLinkElement>('link')
.selector('a[href]')
.filters({
href: (element) => element.href
})
classList: string[] — Filter by the list of classes found in element's classNameclassName: string — Filter by element's classNametitle: string – Filter by titleid: string – Filter by idtext: string – Filter by the text content of this element.visible: boolean – Filter by visibility. Defaults to true. See isVisible.focused: boolean – Filter by whether the element is focused. See focused.click(): Interaction – Click on the elementfocus(): Interaction – Move focus to the elementblur(): Interaction – Move focus away from the elementCall this InteractorConstructor to initialize a heading Interactor.
The heading interactor can be used to assert on the state of headings on the page,
represented by the h1 through h6 tags.
Call this InteractorConstructor to initialize a link Interactor. The link interactor can be used to interact with links on the page and to assert on their state.
The link is located by its text.
await Link('Home').click();
await Link('Home').has({ href: '/' });
await Link({ id: 'home-link', href: '/' }).exists();
title: string – Filter by titleid: string – Filter by idhref: string – The value of the href attribute that the link points tovisible: boolean – Filter by visibility. Defaults to true. See isVisible.focused: boolean – Filter by whether the link is focused. See focused.click(): Interaction – Click on the linkfocus(): Interaction – Focus the linkblur(): Interaction – Blur the linkCall this InteractorConstructor to initialize an Interactor
for select boxes with multiple select. The multi select interactor can be
used to interact with select boxes with the multiple attribute and to
assert on their state.
See Select for an interactor for single select boxes.
The multi select is located by the text of its label.
await MultiSelect('Language').select('English');
await MultiSelect('Language').select('German');
await MultiSelect('Language').deselect('Swedish');
await MultiSelect('Language').has({ values: ['English', 'German'] });
title: string – Filter by titleid: string – Filter by idvalid: boolean – Filter by whether the select box is valid.values: string[] – Filter by the text of the selected options.visible: boolean – Filter by visibility. Defaults to true. See isVisible.disabled: boolean – Filter by whether the select box is disabled. Defaults to false.focused: boolean – Filter by whether the select box is focused. See focused.click(): Interaction – Click on the multi selectfocus(): Interaction – Move focus to the multi selectblur(): Interaction – Move focus away from the multi selectchoose(text: string): Interaction – Choose the option with the given text from the multi select. Will deselect all other selected options.select(text: string): Interaction – Add the option with the given text to the selection.deselect(text: string): Interaction – Remove the option with the given text from the selection.This Interactor can be used to assert on global properties of the page. When using the BigTest test runner, it can also be used for interacting with the page itself, for example through nagivation.
await Page.has({ title: 'Welcome to my app!' });
Navigation, for BigTest test runner only:
await Page.visit('/archive');
title: string – the title of the documenturl: string – the URL of the documentvisit(path: string): Interaction – visit the given path in the test frame, BigTest runner only.Call this InteractorConstructor to initialize a radio button Interactor. The radio button interactor can be used to interact with radio buttons on the page and to assert on their state.
The radio button is located by the text of its label.
await RadioButton('Public').click();
await RadioButton('Private').is({ disabled: true });
await RadioButton({ id: 'privacy-public', disabled: true }).exists();
title: string – Filter by titleid: string – Filter by idvisible: boolean – Filter by visibility. Defaults to true. See isVisible.valid: boolean – Filter by whether the radio button is valid.checked: boolean – Filter by whether the radio button is checked.disabled: boolean – Filter by whether the radio button is disabled. Defaults to false.focused: boolean – Filter by whether the radio button is focused. See focused.click(): Interaction – Click on the radio buttonchoose(): Interaction – Click on the radio buttonfocus(): Interaction – Focus the radio buttonblur(): Interaction – Blur the radio buttonCall this InteractorConstructor to initialize an Interactor for select boxes. The select interactor can be used to interact with select boxes and to assert on their state.
For interacting with multiple select boxes, see MultiSelect.
The select box is located by the text of its label.
await Select('Language').select('English');
await Select('Language').has({ value: 'English' });
title: string – Filter by titleid: string – Filter by idvalid: boolean – Filter by whether the select box is valid.value: string – Filter by the text of the selected option.visible: boolean – Filter by visibility. Defaults to true. See isVisible.disabled: boolean – Filter by whether the select box is disabled. Defaults to false.focused: boolean – Filter by whether the select box is focused. See focused.click(): Interaction – Click on the select boxfocus(): Interaction – Move focus to the select boxblur(): Interaction – Move focus away from the select boxchoose(text: string): Interaction – Choose the option with the given text from the select box.Call this InteractorConstructor to initialize a text field Interactor. The text field interactor can be used to interact with text
fields on the page and to assert on their state. A text field is any input
tag with a text-like interface, so input fields with e.g. email or number
types are also considered text fields, as is any input field with an unknown
type.
The text field is located by the text of its label.
await TextField('Email').fillIn('jonas@example.com');
await TextField('Email').has({ value: 'jonas@example.com' });
await TextField({ id: 'email-field', disabled: true }).exists();
title: string – Filter by titleid: string – Filter by idvisible: boolean – Filter by visibility. Defaults to true. See isVisible.value: string – Filter by the text field's current value.placeholder: string – Filter by the text field's placeholder attribute.valid: boolean – Filter by whether the text field is valid.disabled: boolean – Filter by whether the text field is disabled. Defaults to false.focused: boolean – Filter by whether the text field is focused. See focused.click(): Interaction – Click on the text fieldfocus(): Interaction – Move focus to the text fieldblur(): Interaction – Move focus away from the text fieldfillIn(value: string): Interaction – Fill in the text field with the given value. See fillIn.Helper function for blur action, performs element.blur() on the selected element.
Can be used with object property value shorthand in your interactor actions.
actions: {
focus,
}
Create a custom interactor with the given name.
let Paragraph = createInteractor('paragraph').selector('p');
Note the double function call!
The type of DOM Element that this interactor operates on. By specifying the element type, actions and filters defined for the interactor can be type checked against the actual element type.
You will need to call the returned builder to create an interactor.
Fill in text into an element by emulating how a user would do it, first focusing the element, then filling in the text letter by letter, generating the appropriate keyboard events.
The element to fill in text in
The text value to fill in
Helper function for focus action, performs element.focus() on the selected element.
Can be used with object property value shorthand in your interactor actions.
actions: {
focus,
}
Helper function for focused filters, returns whether the given element is focused.
Generated using TypeDoc
A function which returns a string value for a matched element, which can be used to locate a specific instance of this interactor. The
valueparameter of an InteractorConstructor must match the value returned from the locator function.