getByDisplayValue, queryByDisplayValue, getAllByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue


// 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.

<option value="">State</option>
<option value="AL">Alabama</option>
<option selected value="AK">Alaska</option>
<option value="AZ">Arizona</option>
import { screen } from '@testing-library/dom'
const selectElement = screen.getByDisplayValue('Alaska')


TextMatch options

Last updated on by Alex Krolick