3

我需要测试中的屏幕看起来与物理设备（或模拟器）上的相同。我该怎么做？在我的情况下，设备 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 也不起作用

appbar 和 button 少于模拟器

测试屏幕： 测试屏幕

但预期（小部件规模）： 模拟器画面

4

1 回答 1

1

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

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

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

当您在真实设备上运行应用程序时，您可以使用flutter run --use-test-fontsFlutter 使用该字体，这样您就可以可视化测试的外观。Ahem

相关问题

我不知道以这种方式加载的字体是否适用于黄金测试（它们可能仍然无法与图像类似）

如果您想指定不同的屏幕尺寸，请参阅（未测试我自己）如何在不同的屏幕尺寸上测试 Flutter 小部件？

不确定这个建议是否还有任何价值。我发现它非常有限，上面的建议可能效果更好）在 Flutter Widget 测试中，如何将 media.orientation 设置为纵向？

于 2018-12-19T09:17:08.893 回答