在进行网页测试时，确保重要页面上的样式一致性至关重要。本文将介绍如何使用测试框架来断言页面的各个部分，如字体大小、字体族、元素位置等。将通过一系列示例代码，展示如何提取HTML属性、使用注解器、进行视觉捕获、验证HTML样式以及进行图像比较等技巧。
为了验证网页状态，需要能够提取不同HTML元素的属性。可以通过Attributes集合访问这些属性，并使用LINQ查询来选择它们。需要添加System.Linq的using语句。
using System.Linq;
[TestMethod]
public void ExtractIndividualHtmlAttribute()
{
manager.ActiveBrowser.NavigateTo(
"http://automatetheplanet.com/healthy-diet-menu-generator/"
);
HtmlImage healthyBurgerImage =
manager.ActiveBrowser.Find.ByXPath(
"/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);
}
以上代码展示了如何通过LINQ查询提取特定HTML元素的属性值。
注解器可以在浏览器窗口中显示测试框架正在执行的操作，并突出显示它正在操作的UI元素。这对于视频记录测试执行或捕获测试失败状态的页面非常有用。
[TestMethod]
public void PlayWithAnnotator()
{
manager.ActiveBrowser.NavigateTo(
"http://automatetheplanet.com/healthy-diet-menu-generator/"
);
HtmlImage healthyBurgerImage = manager.ActiveBrowser.Find.ByXPath(
"/html/body/div[1]/div[3]/section/article/div/div[2]/a/img"
);
HtmlInputCheckBox additionalSugarCheckbox =
manager.ActiveBrowser.Find.ById(
"ninja_forms_field_18"
);
additionalSugarCheckbox.Check(
isChecked: true,
invokeOnChange: true,
invokeOnClickChanged: true
);
Annotator annotator = new Annotator(manager.ActiveBrowser);
annotator.Annotate(
healthyBurgerImage.GetRectangle(),
"This is the most healthy meal EVER! Honestly!"
);
}
通过上述代码，展示了如何添加自定义消息并标记重要元素。
可以通过窗口的GetBitmap方法生成浏览器可见部分的位图图像。该方法有一个重载版本，接受一个元素并仅捕获该元素。可以使用Bitmap类的Save方法将图像保存到磁盘。需要引用System.Drawing。
[TestMethod]
public void VisualCapturing()
{
manager.ActiveBrowser.NavigateTo(
"http://automatetheplanet.com/healthy-diet-menu-generator/"
);
HtmlDiv mainArticleDiv =
manager.ActiveBrowser.Find.ByXPath(
"/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);
}
以上代码展示了如何捕获浏览器的可视部分以及特定元素的图像，并将其保存到磁盘。
通过AssertStyle方法，可以验证视觉元素的各种属性，如字体大小、背景颜色、字体样式或字体族。对于大型公司来说，视觉品牌至关重要，作为测试自动化工程师，应该确保至少在最相关的页面上进行断言。
[TestMethod]
public void VerifyHtmlStyles()
{
manager.ActiveBrowser.NavigateTo(
"http://automatetheplanet.com/healthy-diet-menu-generator/"
);
HtmlImage healthyBurgerImage = manager.ActiveBrowser.Find.ByXPath(
"/html/body/div[1]/div[3]/section/article/div/div[2]/a/img"
);
HtmlControl mainHeadline =
manager.ActiveBrowser.Find.ByXPath(
"/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
);
}
以上代码展示了如何验证HTML元素的样式属性。
可以使用测试框架的PixelMap类来比较图像。可以通过Image静态类将预期图像加载为Bitmap。Compare PixelMap的方法接受第二个参数——容差百分比。
[TestMethod]
public void ImageComparison()
{
manager.ActiveBrowser.NavigateTo(
"http://automatetheplanet.com/healthy-diet-menu-generator/"
);
HtmlDiv mainArticleDiv =
manager.ActiveBrowser.Find.ByXPath(
"/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));
}