视觉 UI 自动化验证的 5 个专家技巧和窍门 - 测试框架

• 下载完整源代码

引言

我相信视觉 UI 自动化验证是不应被忽略的。断言最重要的页面上的不同样式是必须的。我将向您展示如何断言页面的各个部分，如字体大小、字体系列、正确的元素位置等等。我将再次使用 测试框架。您可以在我专门介绍测试框架的系列文章中找到更多高级技术。

视觉 UI 自动化验证技巧和窍门

1. 提取单个 HTML 属性

[TestMethod]
public void ExtractIndividualHtmlAttribute()
{
    manager.ActiveBrowser.NavigateTo(
        "http://automatetheplanet.com/healthy-diet-menu-generator/");
    HtmlImage healthyBurgerImage = 
        manager.ActiveBrowser.Find.ByXPath<HtmlImage>(
        "/html/body/div[1]/div[3]/section/article/div/div[2]/a/img");
    string altAttributeValue = 
        healthyBurgerImage.Attributes.Single(x => x.Name == "alt").Value;
    Debug.WriteLine(altAttributeValue);
}

为了验证网页的状态，您应该能够提取不同 HTML 元素的属性。您可以通过 Attributes 集合访问它们，并通过 LINQ 查询选择它们。您需要为 System.Linq 添加一个 using 语句。

官方文档

2. 测试框架注释器

注释器在浏览器窗口中显示 测试框架 正在执行的操作，并突出显示它正在操作的 UI 元素。我发现当测试执行被录制为视频或页面测试失败状态被捕获为图像时，它非常有用。

[TestMethod]
public void PlayWithAnnotator()
{
    manager.ActiveBrowser.NavigateTo(
        "http://automatetheplanet.com/healthy-diet-menu-generator/");
    HtmlImage healthyBurgerImage = manager.ActiveBrowser.Find.ByXPath<HtmlImage>(
        "/html/body/div[1]/div[3]/section/article/div/div[2]/a/img");
    HtmlInputCheckBox additionalSugarCheckbox = 
        manager.ActiveBrowser.Find.ById<HtmlInputCheckBox>("ninja_forms_field_18");
    additionalSugarCheckbox.Check(
        isChecked: true, 
        invokeOnChange: true, 
        invokeOnClickChanged: true);

    // Add rectangle around element + custom message
    Annotator annotator = new Annotator(manager.ActiveBrowser);
    annotator.Annotate(
        healthyBurgerImage.GetRectangle(), 
        "This is the most healthy meal EVER! Honestly!");
}

通过代码的最后一部分，我展示了如何添加自定义消息和标记重要元素。需要 System.Drawing using 语句。

官方文档

3. 视觉捕获

[TestMethod]
public void VisualCapturing()
{
    manager.ActiveBrowser.NavigateTo(
        "http://automatetheplanet.com/healthy-diet-menu-generator/");
    HtmlDiv mainArticleDiv = 
        manager.ActiveBrowser.Find.ByXPath<HtmlDiv>(
        "/html/body/div[1]/div[3]/section/article/div");
    System.Drawing.Bitmap browserImage = manager.ActiveBrowser.Window.GetBitmap();
    System.Drawing.Bitmap divimage =
    manager.ActiveBrowser.Window.GetBitmap(mainArticleDiv.GetRectangle());
    string browserImagePath =
        Path.Combine(
            AppDomain.CurrentDomain.BaseDirectory, 
        string.Concat(Guid.NewGuid().ToString(), @".bmp"));
    browserImage.Save(browserImagePath);
    string mainDivImagePath =
        Path.Combine(
            AppDomain.CurrentDomain.BaseDirectory,
            string.Concat(Guid.NewGuid().ToString(), @".bmp"));
    divimage.Save(mainDivImagePath);
}

您可以通过窗口的 GetBitmap 方法生成浏览器可见部分的位图图像。相同的方法有一个重载，它接受一个元素并仅捕获它。您可以使用 Bitmap 类的 Save 方法将图像保存在磁盘上。您需要引用 System.Drawing。

官方文档

4. 验证 HTML 样式

[TestMethod]
public void VerifyHtmlStyles()
{
    manager.ActiveBrowser.NavigateTo(
            "http://automatetheplanet.com/healthy-diet-menu-generator/");
    HtmlImage healthyBurgerImage = manager.ActiveBrowser.Find.ByXPath<HtmlImage>(
        "/html/body/div[1]/div[3]/section/article/div/div[2]/a/img");
    HtmlControl mainHeadline =
        manager.ActiveBrowser.Find.ByXPath<HtmlControl>("/html/body/div[1]/div[2]/div/h1");
    mainHeadline.AssertStyle().Font(
        HtmlStyleFont.Family, 
        "Lato,sans-serif", 
        HtmlStyleType.Computed, 
        StringCompareType.Exact);
    mainHeadline.AssertStyle().Font(
        HtmlStyleFont.Size, 
        "33px", 
        HtmlStyleType.Computed,
        StringCompareType.Exact);
    mainHeadline.AssertStyle().ColorAndBackground(
        HtmlStyleColorAndBackground.Color, 
        "#000000", 
        HtmlStyleType.Computed, 
        StringCompareType.Exact);
    mainHeadline.AssertStyle().ColorAndBackground(
        HtmlStyleColorAndBackground.BackgroundColor,
        "#FFFFFF", 
        HtmlStyleType.Computed, 
        StringCompareType.Exact);
}

通过 AssertStyle 方法，您可以验证视觉元素的各种属性，如字体大小、背景颜色、字体样式或字体系列。对于大型公司来说，视觉品牌至关重要，作为测试自动化工程师，我们应该确保至少在最相关的页面上对其进行断言。

官方文档

5. 图像比较

[TestMethod]
public void ImageComparison()
{
    manager.ActiveBrowser.NavigateTo(
        "http://automatetheplanet.com/healthy-diet-menu-generator/");
    HtmlDiv mainArticleDiv =
        manager.ActiveBrowser.Find.ByXPath<HtmlDiv>(
        "/html/body/div[1]/div[3]/section/article/div");
    System.Drawing.Bitmap divimage = 
    manager.ActiveBrowser.Window.GetBitmap(mainArticleDiv.GetRectangle());

    Bitmap expectedbmp = (Bitmap)Image.FromFile("mainArticleDivExpected.bmp", true);
    PixelMap expected = PixelMap.FromBitmap(expectedbmp);
    PixelMap actual = PixelMap.FromBitmap(divimage);

    Assert.IsTrue(expected.Compare(actual, 5.0));
}

您可以使用测试框架的 PixelMap 类来比较图像。您可以通过 Image static 类将预期的图像作为 Bitmap 加载。Compare PixelMap 的方法接受第二个参数 - 容差百分比。

官方文档

您可以在官方框架的文档中找到更多代码示例。

• 下载完整源代码

Telerik 测试框架系列

• 使用 Telerik 测试框架进行高级 Web UI 组件自动化
• 10 分钟入门 Telerik Testing Framework C#
• 揭秘：如何创建通用对话框处理程序测试框架

这篇文章 揭秘：如何创建通用对话框处理程序测试框架 首次出现在 Automate The Planet 上。

所有图片均购自 DepositPhotos.com 并且不能被免费下载和使用。
许可协议