背景
1.自动生成断言能力是自动化测试中很重要的一环节。断言本身可复杂可简单，当然复杂断言还是需人工生成，但是页面一些基础可见性断言还是有迹可循的。当我们获取到页面所有元素信息时，则可以自动加一些元素断言。
2.当页面中有2个widget一模一样时（大小、类型、标识），如何区分和找到我们想要测试的widget呢？
一种方案是根据控件坐标和大小来尽量确认，但是难免有偏差范围不准确和适配问题。
另一种方案是根据widget树中的位置来标识控件的索引值index（XCTest的作法）。
所以我们也需要获取页面的所有元素才能确定该widget的index值。
方案
如何获取页面的所有元素呢？
1.根据flutter三棵树的特质，我们只要确定了页面的起点element，之后深度优先遍历记录树的节点，即可获取到页面所有的widget，之后再过滤出我们需要的widget和信息。
2.页面的起点是Scaffold吗，答案是否定的。我们最常见的是走Navigator.push()的方式，其本质也是add了OverLay图层。但是还有一种是直接insert OverLay的方式添加图层到最顶层，其中并没有添加Scaffold元素，常见场景：ActionSheet。所以我们需要找出页面OverLay的起点Element。
分析
首先，我们知道widget树大概是这样的。
MyApp -> WidgetApp -> Navigator
我们进入Navigator看源码：
@override
Widget build(BuildContext context) {
return HeroControllerScope.none(
child: Listener(
onPointerDown: _handlePointerDown,
onPointerUp: _handlePointerUpOrCancel,
onPointerCancel: _handlePointerUpOrCancel,
child: AbsorbPointer(
absorbing: false, // it's mutated directly by _cancelActivePointers above
child: FocusScope(
node: focusScopeNode,
autofocus: true,
child: Overlay(
key: _overlayKey,
initialEntries: overlay == null ? _allRouteOverlayEntries.toList(growable: false) : const <OverlayEntry>[],
),
),
),
),
);
}
NavigatorState的child是一个Overlay，里面有个initialEntries数组。
再看下数组里放了什么？
Iterable<OverlayEntry> get _allRouteOverlayEntries sync* {
for (final _RouteEntry entry in _history)
yield* entry.route.overlayEntries;
}
这里是从_history里获取_RouteEntry中的route的overlayEntries。这里先放着_history。我们再看Overlay里头有什么。
@override
Widget build(BuildContext context) {
// This list is filled backwards and then reversed below before
// it is added to the tree.
final List<Widget> children = <Widget>[];
bool onstage = true;
int onstageCount = 0;
for (int i = _entries.length - 1; i >= 0; i -= 1) {
final OverlayEntry entry = _entries[I];
if (onstage) {
onstageCount += 1;
children.add(_OverlayEntryWidget(
key: entry._key,
entry: entry,
));
if (entry.opaque)
onstage = false;
} else if (entry.maintainState) {
children.add(_OverlayEntryWidget(
key: entry._key,
entry: entry,
tickerEnabled: false,
));
}
}
return _Theatre(
skipCount: children.length - onstageCount,
children: children.reversed.toList(growable: false),
);
}
OverlayState返回了一个_Theatre，里面逆序添加了children数组，children里面放了一个个_OverlayEntryWidget。这里skipCount用于计数当前离屏的页面个数。这里还有2个属性opaque和maintainState来决定是否计数。
在_entries在倒序for循环的时候：
1.在遇到 entry.opaque 为 ture 时，后续的 OverlayEntry就添加不进children中；
2.entry.maintainState为true才会被添加到队列，否则在页面切换时，可能会被mount / unmount掉。
_Theater是什么呢？它是一个剧院舞台，特殊的Stack结构，里面的页面一部分onStage会进行绘制，一部分offStage则会跳过。
回归上面的_history数组，当调用Navigtor.push时，做了三件事：
1.会将传入的Route组装成一个_RouteEntry添加进数组。
2.通知overlay更新。
3.取消当前活跃的点。
Future<T> push<T extends Object>(Route<T> route) {
_history.add(_RouteEntry(route, initialState: _RouteLifecycle.push));
_flushHistoryUpdates();
_afterNavigation(route);
return route.popped;
}
这里重点讲下第二步，调用_RouteEntry的handlePush函数，通知观察者，并重新刷新overlay。
void _flushHistoryUpdates({bool rearrangeOverlay = true}) {
int index = _history.length - 1;
_RouteEntry next;
_RouteEntry entry = _history[index];
_RouteEntry previous = index > 0 ? _history[index - 1] : null;
final List<_RouteEntry> toBeDisposed = <_RouteEntry>[];
while (index >= 0) {
switch (entry.currentState) {
...
case _RouteLifecycle.push:
case _RouteLifecycle.pushReplace:
case _RouteLifecycle.replace:
entry.handlePush(
navigator: this,
previous: previous?.route,
previousPresent: _getRouteBefore(index - 1, _RouteEntry.isPresentPredicate)?.route,
isNewFirst: next == null,
);
if (entry.currentState == _RouteLifecycle.idle) {
continue;
}
break;
...
}
index -= 1;
next = entry;
entry = previous;
previous = index > 0 ? _history[index - 1] : null;
}
// Informs navigator observers about route changes.
_flushObserverNotifications();
// Now that the list is clean, send the didChangeNext/didChangePrevious
// notifications.
_flushRouteAnnouncement();
// Announces route name changes.
if (widget.reportsRouteUpdateToEngine) {
final _RouteEntry lastEntry = _history.lastWhere(
_RouteEntry.isPresentPredicate, orElse: () => null);
final String routeName = lastEntry?.route?.settings?.name;
if (routeName != _lastAnnouncedRouteName) {
SystemNavigator.routeUpdated(
routeName: routeName,
previousRouteName: _lastAnnouncedRouteName
);
_lastAnnouncedRouteName = routeName;
}
}
// Lastly, removes the overlay entries of all marked entries and disposes
// them.
for (final _RouteEntry entry in toBeDisposed) {
for (final OverlayEntry overlayEntry in entry.route.overlayEntries)
overlayEntry.remove();
entry.dispose();
}
if (rearrangeOverlay)
overlay?.rearrange(_allRouteOverlayEntries);
}
再看下_RouteEntry的.handlePush函数做了啥：调用route.install()和添加observer观察者。
void handlePush({ @required NavigatorState navigator, @required bool isNewFirst, @required Route<dynamic> previous, @required Route<dynamic> previousPresent }) {
final _RouteLifecycle previousState = currentState;
route._navigator = navigator;
route.install();
if (previousState == _RouteLifecycle.replace || previousState == _RouteLifecycle.pushReplace) {
navigator._observedRouteAdditions.add(
_NavigatorReplaceObservation(route, previousPresent)
);
} else {
navigator._observedRouteAdditions.add(
_NavigatorPushObservation(route, previousPresent)
);
}
}
这里调用了具体route.install()函数，我们进入ModalRoute里查看，最终调用了父类OverlayRoute的install函数，根据子类创建overlayEntries添加到数组里。
@override
void install() {
_overlayEntries.addAll(createOverlayEntries());
super.install();
}
回到ModalRoute，发现这里创建了2个OverlayEntry，这就解释了为何每次push进一个new page都会获取到2个新创建的_OverlayEntryWidget。
@override
Iterable<OverlayEntry> createOverlayEntries() sync* {
yield _modalBarrier = OverlayEntry(builder: _buildModalBarrier);
yield _modalScope = OverlayEntry(builder: _buildModalScope, maintainState: maintainState);
}
个人理解barrier作用如下：
1、屏蔽作用，比如点击事件无法穿透page，动画间的影响。
2、通过点击外部，dismiss掉dialog。
3、发挥opaque属性作用，遮挡低层。
Widget _buildModalBarrier(BuildContext context) {
...
barrier = IgnorePointer(
...
child: barrier,
);
if (semanticsDismissible && barrierDismissible) {
barrier = Semantics(
sortKey: const OrdinalSortKey(1.0),
child: barrier,
);
}
return barrier;
}
整体结构图：
至此我们确定了页面的起始element是_OverlayEntryWidget，然后根据页面图层布局关系，最上层元素即为当前显示的Overlay。但是它是私有类型，我们该如何去获取所有的该元素呢？
实现
由于Navigator的唯一性，所以我们可以先获取Navigator对象，再根据子节点深度层序遍历获取_Theater的所有children对象，则数组最后一个元素为我们需要的当前图层的起始点。接下来只需要从该节点进行树的深度遍历即可获取所有元素。
List<Element> findAllPagesOfRootElement(BuildContext context) {
assert(context != null);
var navigatorNode = _traversalDescendants((context as Element), (node) {
return !(node.element.widget is Navigator);
});
var overlayNode = _traversalDescendants(navigatorNode.element, (node) {
return !(node.element.widget is Overlay);
});
var elements = _getDescendantsWithDepth(overlayNode.element, FindPageRootDepth);
return elements;
}
/*
说明：根据深度参数层序遍历树
parma：root：起始节点，depth：遍历层级
return：某一层所有节点
*/
List<Element> _getDescendantsWithDepth(Element root, int depth, {bool onstage = false}) {
List<Element> nodes = List<Element>();
if (depth < 1) return nodes;
ElementNode curNode;
int curDepth = 1;
List<Element> childElements = List<Element>();
Queue<ElementNode> nodeQueues = Queue<ElementNode>();
nodeQueues.addLast(ElementNode(root, null));
while (nodeQueues.isNotEmpty) {
curNode = nodeQueues.removeFirst();
if (curDepth != depth) {
//继续添加子节点
//debug模式可下使用
if (onstage) {
curNode.element.debugVisitOnstageChildren((e) {
childElements.add(e);
});
} else {
curNode.element.visitChildElements((e) {
childElements.add(e);
});
}
} else {
nodes.add(curNode.element);
}
//表示当前层级遍历结束
if (nodeQueues.isEmpty) {
curDepth++;
//子树遍历顺序从左到右添加到队列里
for (int i = childElements.length; --i >= 0;) {
nodeQueues.addFirst(ElementNode(childElements[i], curNode));
}
childElements.clear();
}
}
return nodes;
}
扩展
1.在观察driver源码时，发现其遍历树时只寻找了当前界面可见元素，并没有遍历所有节点。那么是如何做到的呢？跟随源码发现了系统自带的一个api。
static Iterable<Element> _reverseChildrenOf(Element element, bool skipOffstage) {
assert(element != null);
final List<Element> children = <Element>[];
if (skipOffstage) {
element.debugVisitOnstageChildren(children.add);
} else {
element.visitChildren(children.add);
}
return children.reversed;
}
Element有暴露debugVisitOnstageChildren接口，让子类Offstage和Overlay等类去实现该函数。所以我们如果不仅仅需要页面所有元素，还需要获取当前屏幕所有可见元素时(比如toast透明弹窗的情况，只获取toast所有元素肯定是不够的，还需要底下可见部分的元素)，可直接遍历api即可获取所有可见元素。
网友评论