无头浏览器测试可视化:Laravel Dusk 控制台入门指南

发布于 2019-01-23  约 16 分钟

Laravel Dusk 控制台是一款 Laravel 扩展包,能够为你的 Dusk 测试套件提供漂亮的可视面板。通过它,你可以可视化运行 Dusk 测试时涉及的各个步骤,以及查看每个步骤的 DOM 快照。这对于调试浏览器测试、并搞清楚后台做了什么十分有用。同时,你还可以使用浏览器的调试工具来检查 DOM 快照。

<img src="https://user-gold-cdn.xitu.io...;h=728&f=png&s=505665" class="rm-style">

除了可视面板,此扩展包还提供了 Laravel Dusk 测试监视器。在你对 Dusk 测试进行修改后,便会自动执行测试过程。

该扩展包受到 Javascript 前端测试框架 —— Cypress 的强烈启发。

查看本扩展包,请移步 GitHub

什么是 Laravel Dusk?

Laravel Dusk 提供了富有表现力的、易于使用的浏览器自动化和测试 API。使用 Laravel Dusk编写测试用例,像在真正的浏览器上一样。比如,当你想在网站上测试拖放功能时,想要测试Vue组件或其他与 Javascript 相关功能,那么你无法使用 Laravels HTTP 测试 API 本身进行测试。

我认为 Laravel Dusk 是一个非常棒的软件包并且可以简化浏览器测试。
以下是一个用户注册的示例测试,以便你可以了解 Laravel Dusk 的功能:

public function test_can_register()
{
    $faker = Factory::create();

    $this->browse(function($browser) use ($faker) {
        $password = $faker->password(9);

        $browser->visit('/register')
            ->assertSee('Register')
            ->type('name', $faker->name)
            ->type('email', $faker->safeEmail)
            ->type('password', $password)
            ->type('password_confirmation', $password)
            ->press('Register')
            ->assertPathIs('/home');
    });
}

要了解更多关于 Laravel Dusk 以及如何开始使用自己的浏览器测试的更多信息,请查看 官方文档

使用 Laravel Dusk 控制台

在介绍 Laravel Dusk 控制台内部如何运行之前,让我们先瞄一眼如何在 Laravel 应用内安装并使用这个扩展包。

如下步骤假定你已经按照 官方文档 成功地安装了 Laravel Dusk;或者甚至你已经写好了一些 Dusk 测试。

首先,使用 Composer 安装本扩展包。

composer require --dev beyondcode/dusk-dashboard

接下来,打开 Laravel Dusk 生成的 DuskTestCase.php。你可以在 tests 目录里找到这个文件。

请务必使用本扩展包的测试用例(Test case)作为基类,而不是 Laravel Dusk 的测试用例。稍后我再告诉你内部原理。

找到此行:

use Laravel\Dusk\TestCase as BaseTestCase;

使用如下内容替换:

use BeyondCode\DuskDashboard\Testing\TestCase as BaseTestCase;

搞定。

现在你可以使用如下命令启动 Laravel Dusk 控制台,并执行你的测试了。

php artisan dusk:dashboard

类似这样的界面便会展示在你的面前:

<img src="https://user-gold-cdn.xitu.io...;h=728&f=png&s=287914" class="rm-style">

开始测试

只需按下「Start Tests」按钮,即可运行 Laravel Dusk 测试,并观察到你的应用被测试时的输出,以及所发生的行为。

随后,你便会看到 Dusk 测试产生的各种事件出现在你的控制台上。

file

还有一种启动 Dusk 测试的方法是,只要编辑任意一个测试文件然后保存即可。Laravel Dusk 控制台内置了文件监视器。

调试测试步骤

你可以通过点击展示在列表中的测试行为,来调试和检查它们。点击后,你将会看到 DOM 快照,表示当此行为被记录时的 HTML 页面状态。若此行为以某种方式操作过 DOM,那么你也可以点击 「Before」和「After」按钮在事件发生「之前」或「之后」的 DOM 快照之间进行切换。

如下,一个按下「Register」按钮的小例子:

file

检查XHR请求

有时候,查看运行测试时发生的有关 XHR 请求的其他信息可能会很有用。例如:你网站上又一个按钮,它将对某个服务端执行 GET 请求。

Dusk Dashboard 允许您记录 XHR 事件,并显示响应状态和响应路径。

file

默认情况下 XHR 请求检查不会启用,因为它需要你修改浏览器功能。

要启用 XHR 的请求记录,打开你的  DuskTestCase.php ,在文件里,有个 driver 方法,用于设置不同测试操作的 WebDriver。由于此程序包需要对此驱动程序的功能进行一些调整,因此需要使用 $this->enableNetworkLogging 方法调用来封装  DesiredCapabilities 对象。

protected function driver()
{
    $options = (new ChromeOptions)->addArguments([
        '--disable-gpu',
        '--headless',
        '--window-size=1920,1080',
    ]);

    return RemoteWebDriver::create(
        'http://localhost:9515', $this->enableNetworkLogging(
            DesiredCapabilities::chrome()->setCapability(
            ChromeOptions::CAPABILITY, $options
            )
        )
    );
}

通过添加此功能,该程序包将启用记录 XHR 请求和响应信息所需的功能。

工作原理

基本思路十分简单:运行一个 WebSocket 服务,控制台用户连接到这个 WebSocket 服务,接着 PHPUnit 便会将浏览器事件和失败信息发送至所有 WebSocket 连接。

以下是具体的实现方式:

在内部,此扩展包向你的 Laravel 应用内添加了一个名为 StartDashboardCommand 的命令。当此命令被执行时,就会 启动 一个由 Ratchet 开发的 WebSocket 服务。最初我考虑基于我同 Freek 一起开发的 Laravel Websockets 实现此功能,然而随后就毙了这个想法。原因很简单,此扩展包仅能用作开发依赖项,并且我不需要 Pusher 或 Laravel 广播功能,因为广播是通过 PHPUnit 内部实现的。

译者注:Freek 意指 Freek Van der Herten
另,截至目前,此扩展包也已经发布 v1.0.x 稳定版本。

接下来,我添加两条路由到 WebSocket 服务。

$dashboardRoute = new Route('/dashboard', ['_controller' => new DashboardController()], [], [], null, [], ['GET']);

$this->app->routes->add('dashboard', $dashboardRoute);

$eventRoute = new Route('/events', ['_controller' => new EventController()], [], [], null, [], ['POST']);

$this->app->routes->add('events', $eventRoute);

$dashboardRoute 是一条普通 HTTP 控制器路由,用于输出 Laravel Dusk 控制台的 HTML 视图。

就是这么简单,它只做一件事——返回 HTML 视图:

class DashboardController extends Controller
{
    public function onOpen(ConnectionInterface $connection, RequestInterface $request = null)
    {
        $connection->send(
            str(new Response(
                200,
                ['Content-Type' => 'text/html'],
                file_get_contents(__DIR__.'/../../../resources/views/index.html')
            ))
        );
        $connection->close();
    }
}

$eventRoute 同样是一个 HTTP 路由,但只允许 POST 请求。它被用来在 PHPUnit 和 WebSocket 客户端之间通讯。

同样十分简单,也只做一件事——接收 POST 数据,并广播给所有已连接的 WebSocket 客户端:

class EventController extends Controller
{
    public function onOpen(ConnectionInterface $conn, RequestInterface $request = null)
    {
        try {
            /*
             * 如下即为从 PHPUnit 测试发来的 POST 数据,
             * 发送到已连接的客户端。
             */
            foreach (Socket::$connections as $connection) {
                $connection->send($request->getBody());
            }
            $conn->send(str(new Response(200)));
        } catch (Exception $e) {
            $conn->send(str(new Response(500, [], $e->getMessage())));
        }
        $conn->close();
    }
}

收集浏览器行为

这是整个扩展包最乏味的部分。因为若想收集所有 Laravel Dusk 方法,并将它们广播到 WebSocket 连接,那么必须代理所有的消息再收集它们。

在本扩展包自定义的 TestCase 类里,我们能够重写(override)浏览器实例被创建的过程。那么,此处就是我注入自定义的浏览器(Browser)类的地方。它负责代理现有方法并收集所有行为,同时转发给 WebSocket 连接。

protected function newBrowser($driver)
{
    return new Browser($driver);
}

没什么高端操作。接下来,我原本想直接创建一个新类,传给它 Laravel Dusk 的浏览器类,随后使用 __call 魔术方法代理所有的方法。这能够省下一大堆代码,但也会引出两个问题:

用户无法使用 IDE 自动完成、方法提示功能。

对我来说有点忍不了,我认为这是个非常重要的特性 —— 尤其是对于测试工具来说。开发者并不了解 API 的输入和输出,因此需要 IDE 的提示。

另一个问题是,我不仅仅想在浏览器行为发生后记录 DOM 快照,在某些特定的行为发生前,同样想记录快照。

所以这就是我为何不得不像下面这样,代理所有 Laravel Dusk 方法:

/** @inheritdoc */
public function assertTitle($title)
{
    $this->actionCollector->collect(__FUNCTION__, func_get_args(), $this);

    return parent::assertTitle($title);
}

好了,这样我便能收集并记录各个行为,且依然维持着 IDE 自动完成功能。棒棒哒!

现在你能看到这里的 actionCollector 是 PHPUnit 和 WebSocket 客户端之间的桥梁。它收集获得的信息,并用例如测试名称和 WebSocket POST 推送的端点数据来丰富它:

protected function pushAction(string $name, array $payload)
{
    try {
        $this->client->post('http://127.0.0.1:'.StartDashboardCommand::PORT.'/events', [
            RequestOptions::JSON => [
                'channel' => 'dusk-dashboard',
                'name' => $name,
                'data' => $payload,
            ],
        ]);
    } catch (\Exception $e) {
        // Dusk-Dashboard 服务器可能是关闭的。不必惊慌。
    }
}

它由 try-catch 包裹来保证即使在 Dusk Dashboard 服务器关闭时 Laravel Dusk 也能正常运行。

UI 界面

最后,值得注意的是,此扩展包在它的面板界面里也有很多说道。它由 TailwindCSS 和 Vue 驱动来展示到来的事件以及过滤它们等等。你可以在这  查看起始页面的代码。

差不多就这些了。

更多翻译文章请见 PHP / Laravel 开发者社区 https://laravel-china.org/top...
阅读 1.2k发布于 2019-01-23

推荐阅读
PHP / Laravel / 全栈
用户专栏

PHP 和 Laravel 的精华文章分享。

4330 人关注
182 篇文章
专栏主页
目录