Laravel Dusk浏览器测试和自动化

446 阅读7分钟

作为一个开源的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.phpvisit ,打开你的应用程序的主页,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.jsLivewire.在这个例子中,使用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提供的注册页面。

Laravel Register Page

value() 函数提供了不同文本框的CSS选择器作为第一个参数。第二个参数是将数值填入文本框。

click('button[type="submit"]') 点击注册按钮,将你提供的值提交给数据库。在这之后,你会被重定向到仪表板。

就这样,注册成功了!现在是时候注销和测试登录功能了。

在仪表板的右上方,有一个下拉列表,上面有一个注销链接。Jetstream用一个按钮来做下拉菜单;用Dusk的方法来点击这个按钮,请使用press()

Log Out Link Button

首先,指示Dusk找到以你的名字为显示文本的按钮并点击它。接下来,使用if 语句来检查下拉列表中是否有注销链接。clickLink 点击该链接并重定向到欢迎页面。

clickLink('Login') 选择登录链接并重定向到登录页面。与注册过程类似,使用value() ,填写表格。click('button[type="submit"]') ,点击LOG IN按钮,重新登录到仪表板。

LOG IN Button

为了执行测试,运行以下命令。

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.