ByAltText

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

getByAltText, queryByAltText, getAllByAltText, queryAllByAltText, findByAltText, findAllByAltText

API

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

This will return the element (normally an ) that has the given `alt` text. Note that it only supports elements which accept an `alt` attribute or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) (since we don't know if a custom element implements `alt` or not): [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), <input>, and <area> (intentionally excluding <applet> as it's deprecated).

<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 incrediblesPosterImg = screen.getByAltText(/incredibles.*? poster/i)

import {render, screen} from '@testing-library/react'

render(<MyComponent />)
const incrediblesPosterImg = screen.getByAltText(/incredibles.*? poster/i)

import {render, screen} from '@testing-library/angular'

await render(MyComponent)
const incrediblesPosterImg = screen.getByAltText(/incredibles.*? poster/i)

cy.findByAltText(/incredibles.*? poster/i).should('exist')

Options

TextMatch options