Skip to main content

ByDisplayValue

getByDisplayValue, queryByDisplayValue, getAllByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue

API

getByDisplayValue(
// If you're using `screen`, then skip the container argument:
container: HTMLElement,
value: TextMatch,
options?: {
exact?: boolean = true,
normalizer?: NormalizerFn,
}): HTMLElement

Returns the input, textarea, or select element that has the matching display value.

input tags

<input type="text" id="lastName" />
document.getElementById('lastName').value = 'Norris'
import {screen} from '@testing-library/dom'

const lastNameInput = screen.getByDisplayValue('Norris')

textarea tags

<textarea id="messageTextArea" />
document.getElementById('messageTextArea').value = 'Hello World'
import {screen} from '@testing-library/dom'

const messageTextArea = screen.getByDisplayValue('Hello World')

select tags

In case of select, this will search for a <select> whose selected <option> matches the given TextMatch.

<select>
<option value="">State</option>
<option value="AL">Alabama</option>
<option selected value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
import {screen} from '@testing-library/dom'

const selectElement = screen.getByDisplayValue('Alaska')

Options

TextMatch options