作为一个开源的PHP框架, Laravel的创建是为了构建应用程序,同时也优先考虑测试,由称为PHPUnit的开箱即用的测试包帮助。然而, 虽然PHPUnit是在PHP中进行单元测试的最流行和最高效的软件包之一, 但PHPUnit不能测试JavaScript功能, 因此需要一个专门的JavaScript测试包.
通常情况下, 开发者可以使用Selenium来测试JavaScript, 但设置和学习使用它是相当有挑战性的.所以, Laravel的开发者决定提供一个更简单的选择:Dusk.
Dusk是一个Laravel软件包,可以对Laravel应用程序进行端到端(E2E)测试。通过在浏览器中运行测试来提供客户端测试, Dusk允许开发人员看到客户端功能的实时测试, 模仿用户如何使用它们.
建立在ChromeDriver和PHP WebDriver之上, Dusk也为应用程序提供了浏览器自动化,同时消除了ChromeDriver和PHP WebDriver单独需要的复杂步骤。
专门为Laravel用户定制,Dusk对JavaScript和AJAX的支持提供了Symfony BrowserKit组件无法支持的JavaScript功能,而且它比Selenium更容易使用。而且有了Dusk,应用程序中的重复任务现在可以自动化了。
在这篇文章中, 我们将在一个应用程序中安装Laravel Dusk,并用它来运行一些浏览器测试,看看它是如何工作的,以及它提供的好处。
为什么要测试一个应用程序?
在构建一个应用程序后,在发货前,开发人员必须运行各种测试,以确保应用程序的功能如预期的那样运作。但即使在发货后,为改进应用程序而增加的新功能也必须进行测试。
通过运行E2E测试,开发人员可以通过模拟用户使用应用程序,确保新添加的功能不会破坏原有的功能。
安装和设置Dusk
要开始使用Dusk, 在你喜欢的目录下创建一个新的Laravel项目:
laravel new project-name
接下来, 移动到你的新项目的目录中:
cd project-name
你可以通过运行以下命令用Composer将Dusk添加到其中:
composer require --dev laravel/dusk
注意,Dusk是一个开发工具,绝对不能添加到你的生产环境中。
使用if 语句在app\Providers\AppServiceProvider.php 中注册服务提供者,该语句仅使其可用于开发。
use Laravel\Dusk\DuskServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
if ($this->app->environment('local', 'testing')) {
$this->app->register(DuskServiceProvider::class);
}
}
}
通过导入DuskServiceProvider ,并在一个if 语句中实现它,这可以确保DuskServiceProvider 只在你的本地环境中用于测试目的。
通过运行以下程序完成你项目中的Dusk安装。
php artisan dusk:install
这将在你的tests 目录中创建一个Browser 文件夹。该文件夹内的ExampleTest.php 文件包含一个你可以运行或编辑的测试实例。
你还必须指定Dusk可以测试你的应用程序的浏览器URL。通常情况下, [http://localhost:8000](http://localhost:8000)是在本地环境中使用的.导航到你的.env 文件,并确保你的APP_URL 键指向你指定的URL。
如果你不想弄乱你的主数据库,你可以创建一个它的复制品用于测试;只需在你的根目录下创建一个名为.env.dusk.local 的文件。
每当你运行测试时,你的主.env 文件将被备份,而.env.dusk.local 将被重命名为.env 并被使用。测试结束后,这个过程会反过来,所以你可以访问你的主.env 文件。
使用Dusk创建和运行测试
首先,让我们看看Dusk安装时附带的测试例子,ExampleTest.php 。
<?php
namespace Tests\Browser;
use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class ExampleTest extends DuskTestCase
{
/**
* A basic browser test example.
*
* @return void
*/
public function testBasicExample()
{
$this->browse(function (Browser $browser) {
$browser->visit('/')
->assertSee('Laravel');
});
}
}
在另一个命令窗口中运行php artisan serve 。你的应用程序必须正在运行,并且可以在localhost:8000 ,这样Dusk才能对其进行测试。
要执行ExampleTest.php ,请运行以下命令。
php artisan dusk
这里,Browser 类导入并创建一个实例。
Browser 类包含许多有用的方法,以在网络浏览器中进行各种操作。例如,visit 方法在浏览器中打开它所提供的URL。由于 [http://localhost:8000](http://localhost:8000)是你的应用程序的默认URL,如果没有任何东西作为参数传递给visit ,它就会打开这个默认URL。
接下来,assertSee 方法检查一个页面上的文本是否与提供的参考文本相同。
在ExampleTest.php ,visit ,打开你的应用程序的主页,assertSee ,检查 "Laravel "这个词是否出现在你的主页上,而browse 方法调用执行这些任务的函数。
把断言看作是简单的检查, 你可以在你的应用程序上运行, 看看哪些是存在的, 哪些是不存在的.在这里查看Laravel Dusk断言的完整列表.
当测试成功后, 你的CLI会显示一个简单的 "OK "信息.
Dusk还带有一个有用的调试功能.如果你运行一个测试并且失败了, 失败的测试的图片会保存到screenshots 文件夹中.例如,试着检查一段不在你主页上的文字。
public function testBasicExample()
{
$this->browse(function (Browser $browser) {
$browser->visit('/')
->assertSee('exampleText');
});
}
在这里,你可以看到提供给assertSee 的文本是否在页面的某个地方。因为它不在,所以测试失败,并将它的截图保存在tests\Browser\screenshots 目录中。
随着你对Dusk基本测试的理解, 你现在可以测试Laravel的内置认证系统.
用Dusk测试Laravel的认证系统
因为你需要一个数据库来保存新的用户信息, 创建一个数据库并将其细节添加到你的.env 文件中:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=testDB
DB_USERNAME=root
DB_PASSWORD=
使用Laravel Jetstream的认证脚手架, 通过运行以下命令将Jetstream添加到你的应用程序。
composer require laravel/jetstream
Jetstream提供了两个前端堆栈的选择:Inertia.js和Livewire.在这个例子中,使用Livewire,因为它是基于Vue.js的,并提供注册、登录和仪表盘功能。
php artisan jetstream:install livewire
为了完成你的Livewire设置,运行以下内容。
npm install && npm run dev
在创建了一些包含你的认证系统的表设计的迁移文件后,通过运行以下程序在你的数据库中生成所需的表。
php artisan migrate
现在,利用注册、登录和仪表盘功能,运行你的应用程序并检查它们。
php artisan serve
接下来,用Dusk测试这些功能,运行下面的命令来创建一个新的Dusk测试。
php artisan dusk:make AuthTest
导航到你的tests\Browser 目录内新创建的AuthTest.php 文件。你必须同时测试你的注册和登录功能。
创建一个测试,注册一个新用户,导航到仪表板,注销,然后用下面的命令重新登录。
public function testExample()
{
$this->browse(function ($browser) {
//We'll test the register feature here
$browser->visit('/')
->clickLink('Register')
->value('#name', 'Samson')
->value('#email', 'samson@test.com')
->value('#password', '00000000')
->value('#password_confirmation', '00000000')
->click('button[type="submit"]')
//We'll test the login feature here
->press('Samson');
if ($browser->seeLink('Log Out')) {
$browser->clickLink('Log Out')
->clickLink('Login')
->value('#email', 'samson@test.com')
->value('#password', '00000000')
->click('button[type="submit"]');
}
});
}
在这里,你要指示Dusk访问你的应用程序的主页,搜索一个显示文本为Register 的链接,然后点击它。这将把你带到Jetstream提供的注册页面。
value() 函数提供了不同文本框的CSS选择器作为第一个参数。第二个参数是将数值填入文本框。
click('button[type="submit"]') 点击注册按钮,将你提供的值提交给数据库。在这之后,你会被重定向到仪表板。
就这样,注册成功了!现在是时候注销和测试登录功能了。
在仪表板的右上方,有一个下拉列表,上面有一个注销链接。Jetstream用一个按钮来做下拉菜单;用Dusk的方法来点击这个按钮,请使用press() 。
首先,指示Dusk找到以你的名字为显示文本的按钮并点击它。接下来,使用if 语句来检查下拉列表中是否有注销链接。clickLink 点击该链接并重定向到欢迎页面。
clickLink('Login') 选择登录链接并重定向到登录页面。与注册过程类似,使用value() ,填写表格。click('button[type="submit"]') ,点击LOG IN按钮,重新登录到仪表板。
为了执行测试,运行以下命令。
php artisan dusk
注意,Dusk默认使用无头模式在谷歌浏览器中运行自动化测试,这意味着它通过CLI而不是GUI工作。这意味着Dusk运行浏览器测试,但你不会看到它们被执行。
使用无头模式的一个好处是,它比使用GUI浏览器运行测试更快。然而,如果你想看到你的测试在Chrome浏览器中被执行,你可以禁用无头模式。导航到tests/DuskTestCase.php ,注释掉以下几行。
'--disable-gpu',
'--headless',
现在,如果你运行Dusk测试,你会看到它们在你的Chrome浏览器上执行。
结论
最后,你已经来到了本教程的结尾!如果你需要你创建的测试的代码,你可以在GitHub上找到它。要了解更多关于Dusk的信息,以及你可以用它来做什么样的测试,请查看Dusk的官方文档。
The postLaravel Dusk browser testing and automationappeared first onLogRocket Blog.