Widget testing TextFormField obscureText value

Issue

I cannot seem to find a way to widget test whether a TextFormField has obscureText set true or false.

I know that TextFormField is a wrapper around TextField, and obscureText is a property of TextField, but cannot think of a way to access obscureText within my test.

So, when I try to access obscureText I get the message: The getter ‘obscureText’ isn’t defined for the type ‘TextFormField’

Anyone know how to test obscureText property for a TextFormField?

  testWidgets(
    'show and hide password fields',
    (
      WidgetTester tester,
    ) async {
      await tester.pumpWidget(
        materialWrapper(
          child: emailSignUpScreen,
        ),
      );
      final Finder passwordTextFormField = find.byKey(
        const Key(
          'passwordTextFormField',
        ),
      );
      final TextFormField input =
          tester.widget<TextFormField>(passwordTextFormField);
      expect(input.obscureText, true);
    },
  );

Solution

TextFormField uses EditableText to obscure it, you can just do:

final passwordTextFormField = find.descendant(
  of: find.byKey(const Key('passwordTextFormField')),
  matching: find.byType(EditableText),
);
final input = tester.widget<EditableText>(passwordTextFormField);
expect(input.obscureText, isTrue);

Answered By – Tomek PolaƄski

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *