Laravel Dusk Console 入门：运行 Dusk 视觉测试

Laravel Dusk Console 是一个 Laravel 扩展包，可为您的 Dusk 测试套件提供漂亮的可视化仪表板。这使您可以可视化 Dusk 测试中涉及的各个步骤，并查看每个步骤的 DOM 快照。这对于调试浏览器测试和了解幕后发生的情况非常有用。同时，还可以使用浏览器调试工具来检查DOM快照。

除了可视化面板之外，此扩展还提供了 Laravel Dusk 测试监视器。在 Dusk 测试中进行更改后，测试过程会自动运行。

此扩展包很大程度上受到 JavaScript 前端测试框架 Cypress 的启发。

要查看此扩展包，请访问 GitHub。

Laravel Dusk 是什么？

Laravel Dusk 提供了富有表现力且易于使用的浏览器自动化和测试 API。使用 Laravel Dusk 编写测试用例，就像在真实浏览器中一样。例如，如果你想测试网站上的拖放功能，想要测试 Vue 组件或其他 Javascript 相关功能，你不能使用 Laravels HTTP Test 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 创建的 。您可以在目录tests中找到该文件。

确保使用此扩展包测试用例（测试用例）作为基类，而不是 Laravel Dusk 测试用例。我会告诉你内在的事情。

找到此行：

use Laravel\Dusk\TestCase as BaseTestCase;

替换为以下内容：

use BeyondCode\DuskDashboard\Testing\TestCase as BaseTestCase;

完成。

现在您可以使用以下命令启动 Laravel Dusk 控制台并运行测试。

php artisan dusk:dashboard

这样的界面将显示在您的面前：

开始测试

只需按“开始测试”按钮即可运行 Laravel Dusk 测试并在测试时观察应用程序的输出和行为。

接下来，您将看到 Dusk 测试生成的各种事件出现在控制台上。

启动 Dusk 测试的另一种方法是简单地编辑测试文件并保存它。 Laravel Dusk 控制台有一个内置的文件监视器。

调试测试步骤

您可以通过单击列表中出现的测试操作来调试和检查测试操作。单击后，您将看到一个 DOM 图像，该图像表示记录此操作时 HTML 页面的状态。如果此行为以某种方式操纵 DOM，您还可以单击“之前”和“之后”按钮在发生“之前”或“之后”的 DOM 快照之间切换。

这是点击“注册”按钮的一个小示例：

检查 XHR 请求

有时，查看有关运行测试时发生的 XHR 请求的其他信息很有用。例如：您的网站上有另一个按钮可以向服务器发出 GET 请求。

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

XHR 请求检查默认未启用，因为它需要您修改浏览器功能。

要启用 XHR 请求日志记录，请打开您的 。在该文件中，有一个方法 driver 可以为不同的测试操作设置 WebDriver。由于此包需要对此驱动程序的功能进行一些调整，因此需要使用 $this->enableNetworkLogging 调用来封装对象 DesiredCapability。

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。

另外，到目前为止，这个扩展包也已经作为稳定版本发布了。

接下来，我向 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/')
            ))
        );
        $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 快照，而且还想在某个操作发生之前记录 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(':'.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 提供支持，用于显示传入事件、过滤等。您可以在此处查看起始页的代码。