Question

我需要测试中的屏幕与物理设备（或模拟器）上的屏幕相同。我该怎么做？就我而言，设备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);
  });
});

如果将ViewConfiguration与devicePixelRatio一起使用，而不是TestViewConfiguration，则devicePixelRatio忽略

如果包装MaterialApp，

MediaQuery也无法工作

应用栏和按钮比模拟器少

测试的

屏幕：

但预期（小部件比例）：

Answer 1

您得到的是块而不是文本，因为Flutter使用了一种特定的测试字体（Ahem），该字体的所有字符都只是块。
这使得更容易在Linux（CI）和其他平台上平均渲染它们。我不知道是否还有其他原因。

我也无法使图像在黄金测试中工作。

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

在真实设备上运行应用程序时，您可以使用flutter run --use-test-fonts来使Flutter使用Ahem字体，以便可视化测试的外观。

如何指定测试窗口？

1 个答案: