这是我们的博客系列的下一篇文章，我们将介绍Matomo (Piwik)平台的功能如何为你的插件编写单元测试)．这次您将学习如何在Matomo中编写UI测试。对于本教程，您需要具备JavaScript和Matomo平台的基本知识。
什么是UI测试?
有些人可能知道“CSS测试”或“截图测试”下的UI测试。当我们谈到UI测试时，我们指的是自动测试，它捕获URL的屏幕截图，然后将结果与预期的图像进行比较。如果图像不完全相同，测试将失败。欲了解更多信息，请阅读我们的博客文章用户界面测试．
UI测试有什么好处?
我们使用它们来测试我们的PHP控制器，Twig模板，CSS，并间接测试我们的JavaScript。我们通常不会为控制器编写单元或集成测试。例如，我们使用UI测试来确保安装、登录和更新过程按预期工作。我们还对大多数页面、报告、设置等进行了测试。这提高了我们产品的质量，节省了我们大量的时间，因为编写和维护这样的测试很容易。所有UI测试都在上面执行特拉维斯在每次提交后进行比较我们期待的截图．
开始
在这篇文章中，我们假设您已经通过git安装了Matomo 2.11.0或更高版本，设置了开发环境并创建了一个插件。如果没有，请访问Matomo发展区在哪里可以找到教程设置Matomo和其他帮助你的指南开发插件．
接下来你需要安装执行UI测试所需的包．
让我们创建一个UI测试
我们开始使用Matomo控制台创建一个新的UI测试:
./console生成:test——testtype UI该命令将要求您输入创建的测试应该属于的插件的名称。我将使用插件名称“widgetise”。接下来，它将询问您测试的名称。在这里，您通常输入要测试的页面或报告的名称。在本例中，我将使用名称“WidgetizePage”。现在应该有一个文件UI插件/ Widgetize /测试/ / WidgetizePage_spec.js其中已经包含了一个例子，让你很容易开始:
description ("WidgetizePage"， function () {var generalParams = 'idSite=1&period=day&date=2010-01-03';它('应该通过它的模块和动作加载一个简单的页面'，函数(done) {var screenshotName = 'simplePage';//将图像保存在"processed-ui-screenshots/WidgetizePageTest_simplePage.png"中。捕获(函数(页面){var urlToTest = "?"+ generalParams + "&module=Widgetize&action=index";page.load (urlToTest);},完成);});})；这里发生了什么?
此示例声明了一组新的规格通过调用方法描述(名称、回调)并在其中通过调用方法创建一个新的规范(描述、函数)．在规范中，我们加载了一个URL，并在加载后截取了整个页面的截图。捕获的屏幕截图将保存在定义的screenshotName．您可能已经注意到我们将UI测试写入BDD风格。
只捕获页面的一部分
最好不要总是捕获整个页面。例如，许多页面都包含一个菜单，如果您更改了该菜单，那么所有的截图测试都会失败。为了避免这种情况，您可以对菜单进行单独的测试。若要仅捕获页面的一部分，只需指定jQuery选择器然后调用方法captureSelector而不是捕获：
var contentSelector = '#selector1， .selector2 .selector3';//只有两个选择器的内容在截图中是可见的expect.screen ('page_partial').to.be。captureSelector(contentSelector, function (page) {page.load(urlToTest);},完成);隐藏的内容
火花线有一个已知的问题，它可以随机地使测试失败。此外，版本号或日期不时更改也可能导致测试失败而不会出现实际错误。为了避免这种情况，你可以通过CSS防止元素在截图中显示，因为我们添加了一个名为外的到超文本标记语言元素。
.uiTest .version{可见性:隐藏}运行测试
要运行以前生成的测试，我们将使用该命令测试:run-ui：
./console测试:run-ui WidgetizePage第一次运行测试后，您将注意到一个新文件夹UI插件/ PLUGINNAME /测试/ / processed-ui-screenshots在你的插件中。如果一切正常，那么每个截图都会有一张图片。如果您对结果满意，就可以将文件复制到expected-ui-screenshots文件夹，否则你必须调整你的测试，直到你得到你想要的结果。从现在开始，无论何时执行测试，都会将新捕获的屏幕截图与预期的图像进行比较。
修改测试
在某些情况下，UI测试会失败，例如由于预期的CSS更改。要修复测试，您所要做的就是从文件夹中复制捕获的屏幕截图processed-ui-screenshots到文件夹expected-ui-screenshots．
在Travis上执行UI测试
如果你还没有生成.travis.yml你可以通过执行以下命令来实现:
./控制台生成:travis-yml——plugin PLUGINNAME接下来你必须激活Travis为您的存储库．
先进的功能
创建一个UI测试不是很容易吗?我们甚至没有创建一个文件!当然，如果你愿意，你还可以做得更多。例如，您可以在运行测试之前指定要插入的fixture，这在插件需要自定义数据时非常有用。你也可以控制浏览器因为它是由人类通过点击，移动鼠标，输入文本等。如果您想了解更多功能，请查看我们的现有的测试用例．
如果您对我们的api或我们在开发者专区的指南有任何反馈，请随时联系我们发给我们．
