如何指定测试窗口？

Posted 2023-02-23

技术标签:

【中文标题】如何指定测试窗口？【英文标题】：how specify Window for tests? 【发布时间】：2019-05-19 17:30:10 【问题描述】：

我需要测试中的屏幕看起来与物理设备（或模拟器）上的相同。我该怎么做？在我的情况下，设备 ID Iphone SE。

我写了一个将屏幕截图保存到磁盘的测试：

    testWidgets('test', (WidgetTester tester) async 
  final AutomatedTestWidgetsFlutterBinding binding = tester.binding;
  binding.renderView.configuration = TestViewConfiguration(size: Size(640, 1136));
  var widget = Scaffold(
    appBar: AppBar(title: Text('title'),),
    body: Column(children: <Widget>[
      RaisedButton(
        child: Text('button'),
        onPressed: () ,)
    ],),
  );

  var key = new GlobalKey();
  await tester.pumpWidget(
      MaterialApp(home: RepaintBoundary(key: key, child: widget),),
  );

  await tester.pumpAndSettle();
  await tester.runAsync(() async 
    RenderRepaintBoundary boundary = key.currentContext.findRenderObject();
    var image = await boundary.toImage();
    var byteData = await image.toByteData(format: ImageByteFormat.png);
    var pngBytes = byteData.buffer.asUint8List();
    await File('screen.png').writeAsBytes(pngBytes);
  );
);

如果使用带有 devicePixelRatio 的 ViewConfiguration 而不是 TestViewConfiguration，则忽略 devicePixelRatio

如果包装 MaterialApp，MediaQuery 也不起作用

应用栏和按钮比模拟器少

测试屏幕：

但预期（小部件规模）：

【问题讨论】：

您可能希望使用matchesGoldenFile 而不是手动进行屏幕截图 【参考方案1】：

你得到的是块而不是文本，因为 Flutter 使用了一种特定的测试字体 (Ahem)，它的所有字符都只是块。这使得在 Linux (CI) 和其他平台上平等地呈现它们变得更加容易。不知道还有没有其他原因。

我也无法让图像在黄金测试中发挥作用。

https://github.com/flutter/engine/pull/6913 是最近合并的修复程序，允许在测试中加载自定义字体。

当您在真实设备上运行应用程序时，您可以使用 flutter run --use-test-fonts 让 Flutter 使用 Ahem 字体，这样您就可以直观地看到测试的外观。