Flutter密码TextField切换可见性测试：无法找到文本数据

我明白你遇到的问题了——当使用obscureText时，TextField里的内容并不是以常规的Text组件渲染的，所以直接用find.text找不到掩码或明文。这是因为Flutter内部用EditableText处理输入框内容，它的文本显示逻辑和普通Text不同。下面是具体的解决方法：

核心思路 #

我们需要直接定位到TextField内部的EditableText组件，通过它的状态（比如obscureText属性）或者关联的RenderEditable对象来验证密码的显示/隐藏状态，而不是去查找表面的文本内容。

修改后的测试代码 #

testWidgets('should show an eye that obscures/unobscures the typed values', (WidgetTester tester) async {
  // buildWidget just wraps target in a MediaQuery/Directionality/Material
  Widget field = buildWidget(PasswordField(onChanged: (_) {}));
  String testPW = 'passwordtotest';
  
  await tester.pumpWidget(field);
  expect(find.byType(TextField), findsOneWidget);

  // 输入测试密码
  await tester.enterText(find.byType(TextField), testPW);
  await tester.pump();

  // 1. 验证初始状态：密码隐藏
  final editableText = tester.widget<EditableText>(
    find.descendant(
      of: find.byType(TextField),
      matching: find.byType(EditableText),
    ),
  );
  expect(editableText.obscureText, isTrue);
  // 同时验证输入的文本确实被正确保存
  expect(editableText.controller.text, equals(testPW));

  // 2. 点击切换按钮，更新状态
  await tester.tap(find.byType(IconButton));
  await tester.pumpAndSettle(); // 确保状态更新完成

  // 3. 验证切换后：密码可见
  final updatedEditableText = tester.widget<EditableText>(
    find.descendant(
      of: find.byType(TextField),
      matching: find.byType(EditableText),
    ),
  );
  expect(updatedEditableText.obscureText, isFalse);
});

额外的验证方式（可选） #

如果你想更贴近用户视觉体验验证，可以通过RenderEditable对象检查实际渲染的文本内容：

// 初始隐藏状态下，检查渲染的文本是否是掩码字符
final renderEditable = tester.renderObject<RenderEditable>(
  find.descendant(
    of: find.byType(TextField),
    matching: find.byType(EditableText),
  ),
);
expect(renderEditable.plainText, equals('•' * testPW.length));

// 切换后，检查渲染的文本是明文
await tester.tap(find.byType(IconButton));
await tester.pumpAndSettle();
expect(renderEditable.plainText, equals(testPW));

关键说明 #

• find.descendant：用来定位TextField内部的EditableText组件，这是实际处理输入文本的核心组件。
• pumpAndSettle：点击按钮后使用它确保所有状态更新和动画完成，避免测试因状态未同步而失败。
• 不需要查找表面的TextSpan或掩码文本：因为Flutter在处理obscureText时，只是在渲染层替换字符，底层的controller文本始终是原始输入值，我们只需要验证obscureText的布尔状态即可确认功能正常。

内容的提问来源于stack exchange，提问作者kqcef