介绍
Laravel Dusk提供了一种优雅的、易于使用的浏览器自动化测试API。
默认情况下,Dusk不要求您在机器上安装JDK或Selenium。
相反,Dusk使用独立的ChromeDriver安装。但是,您可以随意使用任何其他兼容Selenium的驱动程序。
安装
要开始,您应该将Composer依赖项laravel/dusk
添加到项目中:
composer require laravel/dusk
一旦Dusk安装,您应该注册服务提供商。
您应该在您的方法中注册提供商,以限制Dusk的可用环境,因为它暴露了以其他用户身份登录的能力:
Laravel\Dusk\DuskServiceProvider
register
AppServiceProvider
use Laravel\Dusk\DuskServiceProvider;
/**
* Register any application services.
*
* @return void
*/
public function register(){
if ($this->app->environment('local', 'testing')) {
$this->app->register(DuskServiceProvider::class);
}
}
接下来,运行Artisan命令dusk:install
:
php artisan dusk:install
一个Browser
目录将您的中创建tests
目录,将包含一个示例测试。接下来,在.env文件中配置APP_URL
的环境变量。此值应与您用于在浏览器中访问应用程序的URL匹配。
要运行测试,请使用dusk
Artisan命令。dusk
命令接受被phpunit
命令接受的任意参数。
php artisan dusk
使用其他浏览器
默认情况下,Dusk使用Google Chrome和独立的ChromeDriver安装程序来运行浏览器测试。
但是,您可以启动自己的Selenium服务器,并针对你想用的任何浏览器运行测试。
要开始,打开tests/DuskTestCase.php
文件,这是您的应用程序的基础Dusk测试用例。在该文件中,您可以删除对startChromeDriver
方法的调用。这将阻止Dusk自动启动ChromeDriver
:
/**
* Prepare for Dusk test execution.
*
* @beforeClass
* @return void
*/
public static function prepare( ){
// static::startChromeDriver( );
}
接下来,您可以简单地修改driver连接到您选择的URL和端口的方法。
此外,您可以修改应传递给WebDriver的“所需功能”:
/**
* Create the RemoteWebDriver instance.
*
* @return \Facebook\WebDriver\Remote\RemoteWebDriver
*/
protected function driver(){
return RemoteWebDriver::create(
'http://localhost:4444', DesiredCapabilities::phantomjs()
);
}
入门
生成测试
要生成Dusk测试,请使用Artisan命令dusk:make
。
生成的测试将放在tests/Browser
目录中:
php artisan dusk:make LoginTest
运行测试
要运行浏览器测试,请使用dusk
Artisan命令:
php artisan dusk
这个dusk
命令接受通常情况下PHPUnit测试运行器接受的任何参数,允许您仅给指定的组运行测试等:
php artisan dusk --group=foo
手动启动ChromeDriver
默认情况下,Dusk将自动尝试启动ChromeDriver。如果这不适用于您的特定系统,则可以在运行dusk命令之前手动启动ChromeDriver 。
如果您选择手动启动ChromeDriver,您应该注释掉以下tests/DuskTestCase.php
文件中的以下行:
/**
* Prepare for Dusk test execution.
*
* @beforeClass
* @return void
*/
public static function prepare( ){
// static::startChromeDriver( );
}
另外,如果您在9515以外的端口启动ChromeDriver,您应该修改driver同一个类的方法:
/**
* Create the RemoteWebDriver instance.
*
* @return \Facebook\WebDriver\Remote\RemoteWebDriver
*/
protected function driver(){
return RemoteWebDriver::create(
'http://localhost:9515', DesiredCapabilities::chrome()
);
}
环境处理
要在运行测试时强制Dusk使用自己的环境文件,请在项目的根目录中创建一个.env.dusk.{environment}
文件。
例如,如果您将从本地环境启动dusk命令,则应创建一个.env.dusk.local
文件。
运行测试时,Dusk将备份您的.env
文件并重命名您的Dusk环境.env
。
测试完成后,您的.env
文件将被还原。
创建浏览器
我们从写一个验证登录我们应用程序的测试来开始测试。
生成测试后,我们可以修改它,导航到登录页面,输入一些凭据,然后点击“登录”按钮。
要创建浏览器实例,请调用browse
方法:
create([
'email' => '[email protected]',
]);
$this->browse(function ($browser) use ($user) {
$browser->visit('/login')
->type('email', $user->email)
->type('password', 'secret')
->press('Login')
->assertPathIs('/home');
});
}
}
如上例所示,browse
方法接收回调。
浏览器实例将自动被Dusk传递给这个回调,并且是用于与您的应用程序进行交互和断言的主要对象。
创建多个浏览器
有时您可能需要多个浏览器才能正确地进行测试。
例如,可能需要多个浏览器来测试与websockets交互的聊天屏幕。
要创建多个浏览器,只需在提交给browse
方法的回调签名中请求多个浏览器即可 :
$this->browse(function ($first, $second) {
$first->loginAs(User::find(1))
->visit('/home')
->waitForText('Message');
$second->loginAs(User::find(2))
->visit('/home')
->waitForText('Message')
->type('message', 'Hey Taylor')
->press('Send');
$first->waitForText('Hey Taylor')
->assertSee('Jeffrey Way');
});
验证
通常,您将测试的页面需要身份验证。您可以使用Dusk的loginAs
方法,以避免在每次测试期间需要进行登录操作。该loginAs
方法接收用户ID或用户模型实例:
$this->browse(function ($first, $second) {
$first->loginAs(User::find(1))
->visit('/home');
});
互动元素
点击链接
要点击链接,您可以使用浏览器实例上的clickLink
方法。该clickLink方法将单击具有给定显示文本的链接:
$browser->clickLink($linkText);
文本,值和属性
检索和设置值
Dusk提供了几种方法来与页面元素的当前显示文本,值和属性进行交互。
例如,要获取与给定选择器匹配的元素的“值”,请使用以下value
方法:
// Retrieve the value...
$value = $browser->value('selector');
// Set the value...
$browser->value('selector', 'value');
检索文本
text
方法可用于检索与给定选择器匹配的元素的显示文本:
$text = $browser->text('selector');
检索属性
最后,attribute
方法可用于检索与给定选择器匹配的元素的属性:
$attribute = $browser->attribute('selector', 'value');
使用表单
键入值
Dusk提供了与表单和输入元素交互的各种方法。
首先,我们来看一个在输入字段中输入文本的例子:
$browser->type('email', '[email protected]');
请注意,尽管如果需要,该方法可以接收一个 CSS 选择器 ,但我们不需要将CSS选择器传递给type
方法。
如果没有提供CSS选择器,Dusk将搜索具有给定name
属性的输入字段。
最后,Dusk将试图在给定的name属性中找到一个textarea
。
您可以使用以下clear
方法“清除”输入的值:
$browser->clear('email');
下拉列表
要在下拉列表框中选择一个值,您可以使用该select
方法。和type
方法一样,select
方法不需要一个完整的CSS选择器。将值传递给select
方法时,您应该传递底层选项值而不是显示文本:
$browser->select('size', 'Large');
您可以通过省略第二个参数来选择一个随机选项:
$browser->select('size');
(未完待续...)