findByAltText<E extends Element> method
Null safety
- dynamic text,
- {bool exact = true,
- NormalizerFn normalizer( )?,
- Duration? timeout,
- Duration interval = defaultAsyncCallbackCheckInterval,
- QueryTimeoutFn? onTimeout,
- MutationObserverOptions mutationObserverOptions = defaultMutationObserverOptions}
Returns a future with a single ImageElement, InputElement or AreaElement value with the given text
as the value of the alt
attribute, defaulting to an exact
match after waiting 1000ms
(or the specified timeout
duration).
If there is a specific condition you want to wait for other than the DOM node being on the page, wrap
a non-async query like getByAltText or queryByAltText in a waitFor
function.
Throws if exactly one element is not found.
Prefer using ByRole
queries
for ImageElements and ByLabelText
queries
for InputElements and AreaElements when possible in order to query for elements
in a way that most reflects how the user would interact with them.
Related: findAllByAltText
Example
The example below demonstrates the usage of the
getByAltText
query. However, the example is also relevant forgetAllByAltText
,queryByAltText
,queryAllByAltText
,findByAltText
andfindAllByAltText
.Read more about the different types of queries to gain more clarity on which one suits your use-cases best.
<img alt="Incredibles 2 Poster" src="/incredibles-2.png" />
import 'package:react/react.dart' as react;
import 'package:react_testing_library/matchers.dart' show isInTheDocument;
import 'package:react_testing_library/react_testing_library.dart' as rtl;
import 'package:test/test.dart';
main() {
test('', () {
// Render the DOM shown in the example snippet above
final view = rtl.render(
react.img({'alt': 'Incredibles 2 Poster', 'src': '/incredibles-2.png'}),
);
expect(view.getByAltText(RegExp(r'incredibles.*? poster')), isInTheDocument);
});
}
NOTE:
render()
supports React vDom elements / custom components created using either the react or over_react packages.The examples shown here use the
react
package since thereact_testing_library
does not have a direct dependency onover_react
- but both libraries are fully supported.
Options
text
This argument can be set to a String
, RegExp
, or a Function
which returns true
for a match and false
for a mismatch.
See the JS TextMatch
docs for more details
and examples.
exact
Defaults to true
; matches full strings, case-sensitive. When false
, matches substrings and is
not case-sensitive. It has no effect on regex or function arguments. In most cases using a regex
instead of a string gives you more control over fuzzy matching and should be preferred over exact: false
.
normalizer
An optional function which overrides normalization behavior.
Before running any matching logic against text in the DOM, DOM Testing Library automatically normalizes that text. By default, normalization consists of trimming whitespace from the start and end of text, and collapsing multiple adjacent whitespace characters into a single space.
If you want to prevent that normalization, or provide alternative normalization
(e.g. to remove Unicode control characters), you can provide a normalizer
function.
This function will be given a string and is expected to return a normalized version of that string.
NOTE: Specifying a value for
normalizer
replaces the built-in normalization, but you can call getDefaultNormalizer to obtain a built-in normalizer, either to adjust that normalization or to call it from your own normalizer.
See the JS TextMatch
precision and
JS TextMatch
normalization docs
for more details and examples.
Async Options
timeout
How long to wait for the node to appear in the DOM before throwing a TestFailure
, defaulting to 1000ms
.
interval
How often the callback is called, defaulting to 50ms
.
onTimeout
Is called if the timeout
duration passes before the node is found in the DOM, and
can be used to customize a TestFailure
message.
mutationObserverOptions
The default values are:
{subtree: true, childList: true, attributes: true, characterData: true}
which will detect additions and removals of child elements (including text nodes) in the container and any of its descendants. It will also detect attribute changes. When any of those changes occur, it will re-run the callback.
Implementation
Future<E> findByAltText<E extends Element>(
/*TextMatch*/ dynamic text, {
bool exact = true,
NormalizerFn Function([NormalizerOptions?])? normalizer,
Duration? timeout,
Duration interval = defaultAsyncCallbackCheckInterval,
QueryTimeoutFn? onTimeout,
MutationObserverOptions mutationObserverOptions = defaultMutationObserverOptions,
}) {
// NOTE: Using our own Dart `waitFor` as a wrapper around `getByAltText` instead of an
// interop like `_jsFindByAltText` to give consumers better async stack traces.
return waitFor(
() => getByAltText(
text,
exact: exact,
normalizer: normalizer,
),
container: getContainerForScope(),
timeout: timeout,
interval: interval,
onTimeout: onTimeout,
mutationObserverOptions: mutationObserverOptions,
);
}