本文来安利大家 XamlTreeDump 库，通过这个库可以将 XAML 树上的元素转换为 json 字符串，可以用来进行 UI 单元测试

开始之前先通过 NuGet 工具安装 XamlTreeDump 库

假定咱有 UI 界面代码如下

<page x:class="WholebaycarNowawnawka.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:WholebaycarNowawnawka" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d" background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <grid> <textblock>欢迎访问我博客 https://blog.lindexi.com 里面有大量 UWP WPF 博客</textblock> </grid></page>

可以在后台代码使用 VisualTreeDumper.DumpTree 方法获取 json 字符串

 public MainPage() { InitializeComponent(); Loaded += MainPage_Loaded; } private void MainPage_Loaded(object sender, RoutedEventArgs e) { var xaml = VisualTreeDumper.DumpTree(this, null, Array.Empty<string>(), new AttachedProperty[0]); }

上面代码拿到的 xaml 字符串如下

{ "XamlType": "WholebaycarNowawnawka.MainPage", "Background": "#FFFFFFFF", "BorderBrush": null, "BorderThickness": "0,0,0,0", "Clip": null, "CornerRadius": "0,0,0,0", "FlowDirection": "LeftToRight", "Foreground": "#FF000000", "HorizontalAlignment": "Stretch", "Margin": "0,0,0,0", "Padding": "0,0,0,0", "RenderSize": [1200, 900], "VerticalAlignment": "Stretch", "Visibility": "Visible", "children": [ { "XamlType": "Windows.UI.Xaml.Controls.Grid", "Background": null, "BorderBrush": null, "BorderThickness": "0,0,0,0", "Clip": null, "CornerRadius": "0,0,0,0", "FlowDirection": "LeftToRight", "HorizontalAlignment": "Stretch", "Margin": "0,0,0,0", "Padding": "0,0,0,0", "RenderSize": [1200, 900], "VerticalAlignment": "Stretch", "Visibility": "Visible", "children": [ { "XamlType": "Windows.UI.Xaml.Controls.TextBlock", "Clip": null, "FlowDirection": "LeftToRight", "Foreground": "#FF000000", "HorizontalAlignment": "Stretch", "Margin": "0,0,0,0", "Padding": "0,0,0,0", "RenderSize": [1200, 900], "Text": "欢迎访问我博客 https://blog.lindexi.com 里面有大量 UWP WPF 博客", "VerticalAlignment": "Stretch", "Visibility": "Visible" } ] } ]}

详细请看 asklar/XamlTreeDump: A UWP library to produce and compare XAML tree dumps useful for visual end-to-end testing

本文所有代码放在 github 和 gitee 欢迎小伙伴访问