文章概述
本文介绍了什么是视觉测试，功能测试对于视觉测试来说的局限性，视觉测试的重要意义及视觉测试结合python/java两种脚本的案例。
现如今公司不断部署新版本，有些甚至每天都会发布。这种持续部署意味着定期更新或现有代码行正在更改，这可能会导致问题。最轻微的代码更改可能会破坏现有代码结构的功能，从而导致用户体验受到影响。
保持视觉上完美的用户界面对于留住客户很重要。事实上，斯坦福大学的一项研究表明，94%的人表示网页设计会影响他们对网站的第一印象，75%的人会根据视觉元素来判断企业的可信度。
这就是为什么成功的公司将视觉测试纳入其套件的原因。
什么是视觉测试？
视觉测试是一种软件测试方法，用于评估用户界面（UI）或图形用户界面（GUI）的视觉保真度。视觉测试可以解决应用程序的外观问题，并帮助您捕获其他类型的测试可能遗漏的缺陷。这些其他UI测试包括：
·功能测试
·性能测试
许多人认为功能测试足以发现视觉错误，但事实并非如此。功能测试验证您的应用程序是否正常工作，但在捕获视觉缺陷方面做得很差。归根结底，两者对于确保客户满意度都是必不可少的。
功能测试的局限性
功能测试验证UI是否正常工作。例如，如果有人点击“立即付款”，您会希望该链接能够正确地从客户的信用卡中扣款。但是，当您想确保“立即付款”按钮与发票信息正确对齐时，会发生什么情况？通过功能测试来验证这一点需要付出相当大的努力。
以下是功能测试可能遗漏的一些示例：
·逐个像素的差异
·对齐偏移
·页面布局
·渲染问题
·元素重叠
·响应式布局
·字体差异
·色差
那么，如果您尝试通过功能测试来验证这些，会发生什么？为了在发布过程中正确捕获这些更改，您可以开始将冗长的断言相互链接，以期捕获视觉差异。这会给您留下不稳定的脚本，这些脚本很容易损坏，并且很难在发布过程中进行维护。
幸运的是，自动化视觉测试可以解决这些问题。
为什么视觉测试很重要？
视觉测试捕获其他类型的UI测试无法捕获的缺陷。这对于确保应用程序的积极用户体验至关重要。有许多方法可以进行视觉测试，从完全手动到完全自动化。
其中一些可以是：
·手动
·逐像素
·基于DOM
·人工智能驱动
团队可以选择遵循单一方法，也可以将多种类型合并到他们的工作流中。但随着发布频率的增加，找到构建更多自动化的方法非常重要。人工智能驱动的自动化尤其成为运行高效和全面测试的主要驱动力。
为什么你应该在自动化测试中使用人工智能
凯捷最近发布的《世界质量报告》指出，提高客户满意度的关键是帮助SDETS在工作流程中实现更大的灵活性和敏捷性。当然，自动化是实现这一目标的第一步，但有多种方法可以采用自动化。
以前面列出的视觉测试方法为例。自动化可用于逐像素测试、基于DOM的测试和AI驱动的测试。但是，在运行这些测试时，您会发现逐个像素的比较会留下太多的误报。这会导致额外的工作，并且基于DOM的测试会错过UI的关键元素。
只有AI测试足够先进，可以查看GUI的所有元素，同时忽略误报以节省时间。
使用VisualTest实现AI驱动的自动化
在SmartBear，我们的目标是帮助团队发布最高质量的版本。这就是我们构建VisualTest的原因，使QA团队能够轻松地将AI驱动的自动化视觉测试添加到他们现有的selenium和cypress脚本中。
通过向脚本添加单个代码片段，可以使用VisualTest机器学习算法扫描整个网页以查找视觉缺陷，并突出显示所有相关更改。这使您可以在客户发现错误之前有效地识别错误。
VisualTest有一个易于使用的仪表板，只显示相关的更改，这样您就可以专注于重要的事情，而不是浪费时间查看误报。通过一系列自定义工具，您可以：
·选择要查看的差异
·更改视图
·添加评论以更好地进行团队协作
·忽略区域
VisualTest还能够解决更困难的挑战，即无需编写任何其他脚本即可有效捕获延迟加载的内容。
运行回归测试后，您还可以使用BitBar在真实浏览器和设备上快速测试这些视图。
使用BitBar进行可视化测试
VisualTest和BitBar使团队能够运行最全面的自动化UI测试，以实现最佳的端到端结果。在单一平台下，测试人员可以运行自动化的功能和视觉测试，并在数百个真实的浏览器和设备上进行检查，确保无论客户如何找到您，您都能提供最佳的用户体验。
如何开始？
查看Selenium、Java和Python的这些示例。
您可以从发布页面安装SDK，也可以使用本机Java和Python方法下载VisualTest库。若要开始，请在下面的示例脚本中将API_KEY（替换为BitBar API密钥）和PROJECT_TOKEN（替换为VisualTest项目令牌）：
这将使用BitBar浏览器运行selenium测试，并将一些屏幕截图带到VisualTest。
import unittest import time from selenium import webdriver from sbvt.visualtest import VisualTest
API_KEY='BITBAR_API_KEY'
PROJECT_TOKEN='VISUAL_TEST_PROJECT_TOKEN'
class TestDiscoverHomePage(unittest.TestCase):
@classmethod
def setUpClass(cls):
print('----Starting Discover Home Page Test----')
import warnings
#turn off tracemalloc socket warnings
warnings.simplefilter("ignore")
caps={
'platform':'Linux',
'osVersion':'18.04',
'browserName':'firefox',
'version':'latest',
'resolution':'2560x1920',
'bitbar_apiKey':API_KEY,
}
hubUrl='https://us-west-desktop-hub.bitbar.com/wd/hub'
cls.driver=webdriver.Remote(command_executor=hubUrl,
desired_capabilities=caps)
print(
f'Launching webdriver for{caps["platform"]}{caps["osVersion"]}{caps["browserName"]}{caps["version"]}'
)
#load the url
url='https://discover.com'
print(f'Opening URL:{url}')
cls.driver.get(url)
time.sleep(5)
@classmethod
def tearDownClass(self):
print(f'closing webdriver')
self.driver.quit()
def setUp(self):
#create the Visual Test instance
settings={
'projectToken':PROJECT_TOKEN,
}
self.visualTest=VisualTest(self.driver,settings)
def testDiscoverHomePage(self):
print(f'testDiscoverHomePage method running')
#take a fullpage screenshot
print(f'Taking fullpage screenshot')
screenshot=self.visualTest.capture('Home Page')
print(f'Fullpage screenshot result:{screenshot}')
#currently stored locally,but will be uploaded to a server
#where image regression will process to display visual bugs
def testDiscoverProductMenu(self):
print(f'testDiscoverProductMenu method running')
#open products link and take element screenshot
print(f'Finding nav menu element')
menuLink=self.driver.find_element_by_css_selector(
'''#basepage-159a114a2f>div.main-container.mobile-responsive
>div>div>div>div:nth-child(1)>div>div>div
>header>div>div.header-content>div.navbar-wrapper
>div>a'''
)
print(f'Clicking nav menu element')
menuLink.click()
print(f'Finding product menu')
menuEl=self.driver.find_element_by_css_selector(
'''#basepage-159a114a2f>div.main-container.mobile-responsive
>div>div>div>div:nth-child(1)>div>div>div>header
>div>div.header-content>nav'''
)
print(f'Taking element screenshot')
self.visualTest.capture('Product Menu',{'element':menuEl})
if__name__=='__main__':
try:
unittest.main()
except Exception as e:
print(f'Error starting test{e}')
import models.ScreenshotResponse;import models.ScrollMethod;import org.openqa.selenium.remote.DesiredCapabilities;import org.openqa.selenium.remote.RemoteWebDriver;import java.io.IOException;import java.nio.file.Path;import java.nio.file.Paths;import java.util.HashMap;
public class Main{
public static void main(String[]args)throws IOException{
URL hubURL=new URL("https://us-west-desktop-hub.bitbar.com/wd/hub");
DesiredCapabilities capabilities=new DesiredCapabilities();
capabilities.setCapability("platform","Linux");
capabilities.setCapability("osVersion","18.04");
capabilities.setCapability("browserName","firefox");
capabilities.setCapability("version","104");
capabilities.setCapability("resolution","2560x1920");
//Setting the api key
capabilities.setCapability("bitbar_apiKey","");
driver=new RemoteWebDriver(hubURL,capabilities);
driver.get("https://www.smartbear.com");
VisualTest visualTest=new VisualTest(driver,
Main.buildSettings("smartbear"),Main.buildLimits());
try{
ScreenshotResponse result=visualTest.capture(
String.format("Test__%s__%s__2","fullpage","firefox"));
}catch(Exception e){
e.printStackTrace();
}
driver.quit();
}
public static HashMap buildLimits(){
HashMap limits=new HashMap<>();
limits.put("scrollMethod",ScrollMethod.CSS_TRANSLATE);
return limits;
}
public static HashMap buildSettings(String suiteName){
HashMap settings=new HashMap<>();
settings.put("testrun","Testing java");
settings.put("debugImages",true);
settings.put("projectToken","");
Path currentPath=Paths.get(System.getProperty("user.dir"));
Path filePath=Paths.get(currentPath.toString(),
String.format("src/test/resources/screenshots/%s",suiteName));
settings.put("saveTo",filePath.toString());
return settings;
}}
用户对糟糕的数字体验几乎没有耐心。跟上不断增加的发布频率的唯一方法是将更多的自动化整合到您的QA工作流程中。
VisualTest使测试工程师可以轻松做到这一点。只需一行代码，您就可以将AI驱动的自动化添加到您的selenium和cypress脚本中，并确保您的UI始终符合您和您的客户的期望。
文末了，我邀请你进入我们的软件测试学习交流群，大家可以一起探讨交流软件测试，共同学习软件测试技术、面试等软件测试方方面面，了解测试行业的最新趋势，助你快速进阶Python自动化测试/测试开发，稳住当前职位同时走向高薪之路。
最后：
1）关注+私信回复：“测试”，可以免费领取一份10G软件测试工程师面试宝典文档资料。以及相对应的视频学习教程免费分享！
2）关注+私信回复："入群" 就可以邀请你进入软件测试群学习交流~~