GUI测试的自动化技术:Laravel Dusk
GUI测试的自动化技术可能是你最熟悉的,也是发展时间最长、应用最广的自动化测试技术。它的核心思想是,基于页面元素识别技术,对页面元素进行自动化操作,以模拟实际终端用户的行为并验证软件功能的正确性。
目前,GUI自动化测试主要分为两大方向,传统Web浏览器和移动端原生应用(Native App)的GUI自动化。虽然二者采用的具体技术差别很大,但是用例设计的思路类似。
- 对于传统Web浏览器的GUI自动化测试,业内主流的开源方案采用Selenium;本文介绍的 Laravel Dusk也类似。
- 对于移动端原生应用,通常采用主流的Appium,它对iOS环境集成了XCUITest,对Android环境集成了UIAutomator和Espresso。
开始前注意的问题
Chrome Driver安装不成功
详细的安装教程可以参考官网:https://laravel.com/docs/8.x/dusk#introduction。如果在安装过程中遇到Chrome Driver长时间不响应,可通过代理的方式解决:
php artisan dusk:install --proxy=localhost:8001
在执行php artisan dusk:install时加上--proxy选项。
Laravel Dusk默认是无头浏览器,是一种没有界面的浏览器。
无头浏览器,是一个特殊的浏览器,可以把它简单地想象成是运行在内存中的浏览器。它拥有完整的浏览器内核,包括JavaScript解析引擎、渲染引擎等。
与普通浏览器最大的不同是,无头浏览器执行过程中看不到运行的界面,但是你依然可以用GUI测试框架的截图功能截取它执行中的页面。
构建一个Laravel Dusk自动化测试用例
以一个最简单的GUI自动化用例的开发为例。
测试需求非常简单:访问网站主页,并验证页面的标题与域名相对应。
如果访问的是ainicheng.com,那么页面的标题就应该包含“爱你城”。
具体步骤是:
- 打开Chrome浏览器,输入网址“ainicheng.com”;
- 验证搜索结果页面的标题是否是“爱你城”。
明确了GUI测试的具体步骤后,我们就可以用PHP代码,基于Laravel Dusk实现这个测试用例了。
这里,我要用到Chrome浏览器,所以需要先下载Chrome Driver并将其放入环境变量。这一步通过`php artisan dusk:install`即可完成。
接着创建一个测试方法:
public function testIndex()
{
/*
* 这个方法返回的是域名与title的映射关系,如
* [['ainicheng.com'=>'爱你城'], ['diudie.com'=>'丢碟']]
*/
$siteInfos = self::getSiteInfos();
foreach ($siteInfos as $url=>$title){
$this->browse(function (Browser $browser) use ($url,$title) {
$url = 'https://'.$url;
info($url);
$browser->visit($url)
->assertSee($title)
->assertDontSee('很抱歉,你访问的页面不存在')
->assertDontSee('服务器内部错误,崩溃啦');
});
}
}
现在,可以尝试运行这个方法,看看会执行哪些操作。
- 这段代码会自动在你的电脑上打开Chrome浏览器;
- 在URL栏自动输入“ainicheng.com”;
- 返回搜索结果页面;
- 进行断言:(1)title是否匹配。(2)是否为自定义的404或500页面。
- Chrome浏览器自动退出。
以上这些步骤都是由自动化测试代码自动完成的。
测试报告
为了分析测试用例的执行过程与结果,出现了基于图片的GUI测试报告。也就是说,GUI自动化测试框架会对错误页面进行截图。如下图:
截图存放在screenshots目录下:
我们也可以在console目录下查看GUI测试用例的执行日志。如果想更好的Review错误信息,可以通过:
https://github.com/beyondcode/dusk-dashboard
如何与CI/CD集成
如果需要在持续部署环节加上GUI自动化测试,怎么做
- 通过第三方插件:chilio/laravel-dusk-ci
- 搭建一个docker容器
问题
- Laravel Dusk运行速度太慢,待测试的网站数近120个,所有的运行时间X120。解决思路:
- 缩短单个用例的执行时间。不可行。
- 增加同一时间的测试任务数,可行。目前正在寻求解决方案。
写下、记下、留下