ui自动化测试测试报告_您需要了解的有关UI测试的所有信息

朱雀 2023-02-25 03:56 140阅读 0赞

ui自动化测试测试报告

让我们从一个问题开始。 用户在网站上进行互动的第一件事是什么？ 接口，当然。 网站的外观是在用户身上产生“第一印象”的第一件事。 交互式Web应用程序可以为用户带来成败，这就是为什么越来越多的人选择对其Web应用程序进行UI测试的原因。

用户在网站上看到和玩的内容都属于用户界面类别。 这是网站和用户进行交互的空间。 因此，当您在每个星期天在Amazon的**Play and Win**部分中单击滚轮，并且滚轮旋转以奖励奖品时，它便与用户互动。 他们可以使用简单的“单击并查看”功能来完成此操作，但是他们知道用户体验的重要性。

在过去的十年中，UI / UX变得越来越重要。 随着我们利基市场中竞争者数量的增加，我们需要确保保持领先地位，并为用户提供最佳的用户体验。 而且，随着Web应用程序捆绑了许多功能，这些功能有时可能非常复杂。 这就是为什么使该过程对用户更平滑和直观变得至关重要的原因。 否则，它们可能会使您的应用程序因复杂性而感到沮丧。 这就是UI变得如此重要并因此进行UI测试的原因！

在本文中，我将详细讨论UI测试及其重要性。 我还将分享有关UI测试方法的一些细节以及一些重要的[UI测试][UI]工具

## 那么，什么是UI测试？ ##

用户界面测试或UI测试是一种测试类型，通过该测试，我们检查Web应用程序的UI是否工作正常或是否存在任何妨碍用户行为且不符合书面规格的缺陷。 例如，对于UI测试，我们可以在文本字段上执行测试，该文本字段将接受用户的输入，或者将鼠标悬停在其上方时下拉列表的下拉菜单。

了解用户将如何在用户和网站之间进行交互以执行UI测试至关重要。 换句话说，通过执行UI测试，测试人员尝试模仿用户的行为，以查看用户将如何与网站进行交互，并查看网站的运行情况是否如预期的那样，并且没有缺陷。 用户界面中的小缺陷（例如CTA按钮中的问题）可能会导致您的网站访问者无法填写潜在客户表单，从而从不进行转换。 谁知道，如果这是最终可以提高您的投资回报率的用户。

网站包含许多来自CSS，JavaScript和许多其他语言的不同Web元素。 UI测试捕获这些元素，并对它们执行测试和声明。 它主要关注网站的结构和视觉部分，因为这些是用户关注的，而不是数据如何存储在数据库中。 由于UI测试涵盖了用户交互部分，并且网站元素可以连接到屏幕，键盘，鼠标或用户用于与网站进行交互的任何其他组件，因此最终要进行[UI测试][UI 1]

以下测试方案将帮助您了解对于UI测试很重要的组件。 在这种测试情况下，我试图在BookMyShow（一个用于预订电影和活动票的热门网站）上预订3张电影票。 当我选择E-13座位时，它会自动选择3个座位，如下所示：

![format_png][]

他们被连续选择，这很棒，因为大多数预订票的人都会坐在一起。 现在，如果我选择F-23而不是E-13，让我们看看会发生什么。

![format_png 1][]

注意，由于应用程序希望人们想坐在一起，因此自动取消选择E-13，下一个选择是F-22。

当我选择E-13作为下一个座位时，应用程序将只选择该座位。 这是一个主要问题，因为应用程序可以像第一步那样选择E-13之后自动选择E-13、14、15。

![format_png 2][]

这些类型的功能失败可能会损害用户体验，并可能使他们视线受挫。 因此，执行UI测试变得至关重要。

## UI测试是否与GUI测试一样？ ##

GUI（图形用户界面）和UI（用户界面）在前端测试领域通常被视为两个相似的概念。 但是，从更深层次来看，事实并非如此。 UI测试是一个广阔的领域，GUI测试可以视为UI测试的子集。 GUI测试包括图形界面的测试，例如元素的颜色，用户可见的元素的功能等。而UI测试还包括界面的非图形部分，例如命令行阅读器或通过用户将与GUI进行交互。 UI测试和GUI测试被视为相似的原因是因为如今，UI测试的许多组件都不再经常使用。 因此，从某种意义上说，今天的UI测试领域中使用的主要是GUI测试

![format_png 3][]

## 手动或自动，走哪条路？ ##

与其他任何类型的测试一样，UI测试也可以手动或通过自动化执行。 手动测试要求测试人员在每个元素上手动执行每个测试。 例如，测试输入字段将需要针对任何差异一次又一次地键入不同的值。 乍一看，如果网站UI的组件较少，那么最好通过手动过程进行UI测试，该过程可以轻松，快速地完成。 虽然它是正确的，应该针对一个简单而基本的网站进行，但不应该成为复杂网站的方法。 当今具有丰富用户界面的网站使手动UI测试非常低效，耗时且容易出错。 想象一下，如果在输入中填充了五个输入框和五个下拉菜单，那么您将不得不手动输入值的时间。 太高了

**那么，为什么要进行UI测试自动化呢？**

*  **速度** ：速度是第一位。 时间是每家公司的主要资源，自动化测试可以节省很多时间。 Selenium Automation测试要求我们只编写一次测试，然后一次又一次地运行它们，而不会以不同的值和不同的方案进行任何干预。
 *  **准确性** ：只要测试编写正确，Selenium Automation测试就可以帮助我们执行测试而没有任何错误。 手动测试的主要缺点是容易发生人为错误。
 *  **透明度** ：Selenium Automation测试还有助于快速生成报告，并在测试完成后立即与团队共享。 另一方面，手动测试需要时间来提取结果并手动报告结果以通过软件或手动生成报告

同样，在执行UI测试时，确保Web应用程序不存在任何[跨浏览器兼容性][Link 1]问题也同样重要。 由于每个浏览器都使用不同的浏览器引擎，并且可能不支持相同CSS功能。 因此，确保我们的UI在所有主要浏览器上无缝呈现非常重要。 在不同的浏览器上进行测试称为跨浏览器测试，它可以帮助测试人员在所有主要浏览器和设备（包括手机，平板电脑，演员表等）的多种组合下测试其网站。

与上述区域类似，也可以以两种方式（手动和自动化）执行跨浏览器测试。 但是，成千上万的人或团队无法进行手动测试。 这需要自动化。 自动化是人类告诉计算机的方式，“我正在将这些信息交给您，请像往常一样做魔术”。 跨浏览器的自动化测试是通过脚本完成的，并在多个浏览器上运行它们。 测试的数量和语言取决于测试人员。

Selenium是进行自动跨浏览器测试的最佳方法。 出色的学习曲线可帮助测试人员快速轻松地进行Selenium测试。 为了轻松进行测试，建议使用与Selenium集成并且可以通过拖放功能提供许多功能的在线跨浏览器测试平台。

在下一个测试场景中，我将演示跨浏览器测试在UI测试中的重要性。 此测试是使用在线跨浏览器测试工具[LambdaTest进行的][LambdaTest] 。 为了执行UI测试，我使用了一个简单的网页来演示zoom属性。 假设您决定建立一个网站，其中一个主要元素是一个框，当鼠标悬停时该框会缩放。 您可以通过使用CSS的zoom属性来实现此功能。 但是，由于您使用的是Google Chrome浏览器作为默认浏览器，因此缩放效果非常好。 也许您在IE，Edge或Safari中进行了测试，并且在那儿也能正常工作。 看起来像这样

![aHR0cHM6Ly93d3cuamF2YWNvZGVnZWVrcy5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMjAvMDMvZXpnaWYuY29tLXZpZGVvLXRvLWdpZi5naWY][]

但是现在，当您在Firefox浏览器中检查网站时，您会注意到该框无法缩放：

![format_png 4][]

<!DOCTYPE HTML>  <html> 
         <head> 
             <title>UI Testing Sample</title> 
             <style> 
                 p { 
                     font-size: 24px; 
                     color: firebrick; 
                 } 
                 #zooming{ 
                     padding: 50px; 
                     background-color: cadetblue; 
                     width: 100px; 
                     height: 100px;                 
                 } 
                 #zooming:hover{ 
                     zoom : 1.5 
                 } 
             </style>     
         </head>     
         <body style= "background-color: antiquewhite" > 
             <p>This page demonstrates the importance of cross browser Testing in UI Testing</p> 
             <br> 
             <center> 
             <div id= "zooming" >             
             </div> 
             </center>     
         </body>   </html>

## UI测试工具 ##

要测试您网站的用户界面，可以在线使用一些不错的工具：

*  **Grunt** ：Grunt是基于Java的Selenium自动化UI测试工具。 它提供了许多插件，可轻松执行任务。
 *  **Karma** ：Karma是一个Javascript运行器工具，可帮助进行UI测试。 它也可以用于运行Jasmine测试。 Karma随附了用于运行测试的有用工具和功能。

## UI测试有哪些技术？ ##

需要测试技术才能知道问题的答案：“如何执行测试？ 在以下描述的各种技术中，遵循各种过程。 一旦确定了要遵循的测试技术的类型，只需遵循该概念并生成结果就变得更加容易。

### 探索性测试 ###

探索性测试不需要预先计划，测试人员只需根据经验和各种其他参数（例如先前的测试结果）创建测试。 这些参数可能因项目而异。 [探索性测试][Link 2]为[测试人员][Link 2]提供了非常灵活和开放的机会。 UI测试中的探索性测试有助于识别隐藏的测试用例，因为UI在不同机器上的行为可能不同。 测试人员可以利用自动化功能，同时解决[探索性测试难题，][Link 3]以对不同数据运行案例。 探索性测试也可以手动高效地执行。

### 脚本测试 ###

如果探索性测试在没有任何计划的情况下执行测试，则脚本化测试与此相反。 在编写脚本并事先确定测试用例之后，才进行脚本测试。 作为脚本化测试的第一步，测试人员定义脚本，这些脚本表示测试人员的条目和预期的输出。 然后分析结果并相应报告。 与探索性测试类似，测试人员可以继续执行自动脚本化测试或手动脚本化测试。 尽管由于大量的代码行和项目的复杂性，今天还是建议在脚本化测试中进行自动化测试

### 用户体验测试 ###

UI测试中的用户体验测试技术可以通过将构建的项目提供给最终用户来完成。 最终用户可以像我们所有人一样使用产品，并提供其反馈，然后可以通过测试团队将其传达给开发人员。 这些公司有时还会向最终用户发布该产品的Beta版本，以根据广阔的地理位置收集反馈。 这创建了一个很棒的测试环境

很难解码用户体验测试是一种探索性测试，因为用户不知道要测试什么以及如何进行测试，即没有预定义的计划。 不用说，它是手动完成的。 还可以在部分产品上进行[用户体验][Link 4]测试，以检查大量屏幕和不同位置上的UI，而无需开发整个项目。 这有助于公司以与整个项目相同的强度来测试较小的组件，从而最终提高产品质量。

## 您的UI性能如何重要？ ##

网站的平均大小随着时间的推移而增加。 如今，单个网站中的页面从几页到几百页，现在比以往任何时候都更大。 不仅如此，一个页面包含数百个元素来创建完整的网站。 这在从中获取网站的服务器上造成了巨大的负担。 较慢的网站并不是任何Web开发人员的好兆头。 测试它也属于UI测试的范畴，并且性能肯定可以提高。

显而易见，后端系统的50％的改进使网站加载速度仅提高10％，而[网站][Link 5]的50％ [的][Link 5]改进使网站加载速度提高了[40％。][Link 5] [。][Link 5] [这使UI测试成为改善网站整体性能的必要过程。][Link 5] [速度的提高绝对比其他网站更具优势。][Link 5] [想知道如何实现？][Link 5] [在线上有大量软件可用于执行UI测试，例如YSlow和PageSpeed。][Link 5]

[  
][Link 5] [UI测试对编织在一起以创建用户界面的元素执行检查。][Link 5] [一次又一次地编写测试并手动执行它们变得多余了。][Link 5] [这就是为什么世界正在朝着UI测试自动化迈进的原因。][Link 5] [由于复杂性和项目规模的增加，UI测试自动化的作用在过去几年中已显着提高。][Link 5]

[另请阅读：17个您的网站失败的UI设计错误][17_UI]

## 总而言之 ##

简而言之，UI测试要求测试人员对网站进行测试，就像模仿用户的行为一样。 结合所有可能性和排列方式，测试人员需要确保该网站与所有元素如预期般无缝运行。 另外，由于没有一个浏览器是相同的，因此需要执行[跨浏览器测试][Link 6]以确保您的网站在所有主要浏览器上都能无缝运行。 UI测试自动化将进一步帮助您在竞争者中获得更多优势，并使用户沉迷于Web应用程序。 AS那就是所有人！

**保持安全愉快的测试！**

[![format_png 5][]][format_png 5 1]

> 翻译自: [https://www.javacodegeeks.com/2020/04/all-you-need-to-know-about-ui-testing.html][https_www.javacodegeeks.com_2020_04_all-you-need-to-know-about-ui-testing.html]

ui自动化测试测试报告

[UI]: https://www.lambdatest.com/smart-visual-ui-testing
[UI 1]: https://www.lambdatest.com/support/visual-ui-testing
[format_png]: /images/20230209/659335fa48df47e8b33a2d34f0d99953.png
[format_png 1]: /images/20230209/c83142dcb0654e1891d0c49d1c74291a.png
[format_png 2]: /images/20230209/3c1982e078034f8ba796cb5ec9a0d73c.png
[format_png 3]: /images/20230209/01bd3e43590749d38b5cd57cee96d614.png
[Link 1]: https://www.lambdatest.com/feature
[LambdaTest]: https://www.lambdatest.com
[aHR0cHM6Ly93d3cuamF2YWNvZGVnZWVrcy5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMjAvMDMvZXpnaWYuY29tLXZpZGVvLXRvLWdpZi5naWY]: /images/20230209/7f232f294b2142558dce8f5a78294e0f.png
[format_png 4]: /images/20230209/37ba5d43082c42e0b557d68857cefb0d.png
[Link 2]: https://www.lambdatest.com/blog/exploratory-testing-all-about-discovery/
[Link 3]: https://www.lambdatest.com/blog/overcoming-the-challenges-faced-in-exploratory-testing/
[Link 4]: https://www.lambdatest.com/blog/13-common-mistakes-that-happens-during-usability-testing/
[Link 5]: https://www.guru99.com/frontend-testing.html#6
[17_UI]: https://www.lambdatest.com/blog/top-17-ui-design-mistakes-that-leads-to-failure-of-your-website/
[Link 6]: https://www.lambdatest.com/
[format_png 5]: /images/20230209/3e2e1b8b3984443d92f2d5957a8ec974.png
[format_png 5 1]: https://accounts.lambdatest.com/register/
[https_www.javacodegeeks.com_2020_04_all-you-need-to-know-about-ui-testing.html]: https://www.javacodegeeks.com/2020/04/all-you-need-to-know-about-ui-testing.html