摘要：通過添加此功能，該程序包將啟用記錄請求和響應信息所需的功能。是一條普通控制器路由，用于輸出控制臺的視圖。收集瀏覽器行為這是整個擴展包最乏味的部分。

Laravel Dusk 控制臺是一款 Laravel 擴展包，能夠為你的 Dusk 測試套件提供漂亮的可視面板。通過它，你可以可視化運行 Dusk 測試時涉及的各個步驟，以及查看每個步驟的 DOM 快照。這對于調試瀏覽器測試、并搞清楚后臺做了什么十分有用。同時，你還可以使用瀏覽器的調試工具來檢查 DOM 快照。

除了可視面板，此擴展包還提供了 Laravel Dusk 測試監視器。在你對 Dusk 測試進行修改后，便會自動執行測試過程。

該擴展包受到 Javascript 前端測試框架 —— Cypress 的強烈啟發。

查看本擴展包，請移步 GitHub 。

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 應用內安裝并使用這個擴展包。

如下步驟假定你已經按照?官方文檔?成功地安裝了 Laravel Dusk；或者甚至你已經寫好了一些 Dusk 測試。

首先，使用 Composer 安裝本擴展包。

composer require --dev beyondcode/dusk-dashboard

接下來，打開 Laravel Dusk 生成的 DuskTestCase.php。你可以在 tests 目錄里找到這個文件。

請務必使用本擴展包的測試用例（Test case）作為基類，而不是 Laravel Dusk 的測試用例。稍后我再告訴你內部原理。

找到此行：

use LaravelDuskTestCase as BaseTestCase;

使用如下內容替換：

use BeyondCodeDuskDashboardTestingTestCase as BaseTestCase;

搞定。

現在你可以使用如下命令啟動 Laravel Dusk 控制臺，并執行你的測試了。

php artisan dusk:dashboard

類似這樣的界面便會展示在你的面前：

只需按下「Start Tests」按鈕，即可運行 Laravel Dusk 測試，并觀察到你的應用被測試時的輸出，以及所發生的行為。

隨后，你便會看到 Dusk 測試產生的各種事件出現在你的控制臺上。

還有一種啟動 Dusk 測試的方法是，只要編輯任意一個測試文件然后保存即可。Laravel Dusk 控制臺內置了文件監視器。

你可以通過點擊展示在列表中的測試行為，來調試和檢查它們。點擊后，你將會看到 DOM 快照，表示當此行為被記錄時的 HTML 頁面狀態。若此行為以某種方式操作過 DOM，那么你也可以點擊 「Before」和「After」按鈕在事件發生「之前」或「之后」的 DOM 快照之間進行切換。

如下，一個按下「Register」按鈕的小例子：

有時候，查看運行測試時發生的有關 XHR 請求的其他信息可能會很有用。例如：你網站上又一個按鈕，它將對某個服務端執行 GET 請求。

Dusk Dashboard 允許您記錄 XHR 事件，并顯示響應狀態和響應路徑。

默認情況下 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 也能正常運行。

最后，值得注意的是，此擴展包在它的面板界面里也有很多說道。它由 TailwindCSS 和 Vue 驅動來展示到來的事件以及過濾它們等等。你可以在這?這 查看起始頁面的代碼。

差不多就這些了。

更多翻譯文章請見 PHP / Laravel 開發者社區 https://laravel-china.org/top...