docs/queries/bydisplayvalue.mdx
import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'
getByDisplayValue, queryByDisplayValue, getAllByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue
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'
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, { label: 'React', value: 'react', }, { label: 'Angular', value: 'angular', }, { label: 'Cypress', value: 'cypress', }, ] }> <TabItem value="native">
import {screen} from '@testing-library/dom'
const lastNameInput = screen.getByDisplayValue('Norris')
import {render, screen} from '@testing-library/react'
render(<MyComponent />)
const lastNameInput = screen.getByDisplayValue('Norris')
import {render, screen} from '@testing-library/angular'
await render(MyComponent)
const lastNameInput = screen.getByDisplayValue('Norris')
cy.findByDisplayValue('Norris').should('exist')
textarea tags<textarea id="messageTextArea" />
document.getElementById('messageTextArea').value = 'Hello World'
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, { label: 'React', value: 'react', }, { label: 'Angular', value: 'angular', }, { label: 'Cypress', value: 'cypress', }, ] }> <TabItem value="native">
import {screen} from '@testing-library/dom'
const messageTextArea = screen.getByDisplayValue('Hello World')
import {render, screen} from '@testing-library/react'
render(<MyComponent />)
const messageTextArea = screen.getByDisplayValue('Hello World')
import {render, screen} from '@testing-library/angular'
await render(MyComponent)
const messageTextArea = screen.getByDisplayValue('Hello World')
cy.findByDisplayValue('Hello World').should('exist')
select tagsIn 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>
<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, { label: 'React', value: 'react', }, { label: 'Angular', value: 'angular', }, { label: 'Cypress', value: 'cypress', }, ] }> <TabItem value="native">
import {screen} from '@testing-library/dom'
const selectElement = screen.getByDisplayValue('Alaska')
import {render, screen} from '@testing-library/react'
render(<MyComponent />)
const selectElement = screen.getByDisplayValue('Alaska')
import {render, screen} from '@testing-library/angular'
await render(MyComponent)
const selectElement = screen.getByDisplayValue('Alaska')
cy.findByDisplayValue('Alaska').should('exist')
TextMatch options