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

Laravel Dusk 控制臺(tái)是一款 Laravel 擴(kuò)展包，能夠?yàn)槟愕?Dusk 測(cè)試套件提供漂亮的可視面板。通過(guò)它，你可以可視化運(yùn)行 Dusk 測(cè)試時(shí)涉及的各個(gè)步驟，以及查看每個(gè)步驟的 DOM 快照。這對(duì)于調(diào)試瀏覽器測(cè)試、并搞清楚后臺(tái)做了什么十分有用。同時(shí)，你還可以使用瀏覽器的調(diào)試工具來(lái)檢查 DOM 快照。

除了可視面板，此擴(kuò)展包還提供了 Laravel Dusk 測(cè)試監(jiān)視器。在你對(duì) Dusk 測(cè)試進(jìn)行修改后，便會(huì)自動(dòng)執(zhí)行測(cè)試過(guò)程。

該擴(kuò)展包受到 Javascript 前端測(cè)試框架 —— Cypress 的強(qiáng)烈啟發(fā)。

查看本擴(kuò)展包，請(qǐng)移步 GitHub 。

Laravel Dusk 提供了富有表現(xiàn)力的、易于使用的瀏覽器自動(dòng)化和測(cè)試 API。使用 Laravel Dusk編寫(xiě)測(cè)試用例，像在真正的瀏覽器上一樣。比如，當(dāng)你想在網(wǎng)站上測(cè)試拖放功能時(shí)，想要測(cè)試Vue組件或其他與 Javascript 相關(guān)功能，那么你無(wú)法使用 Laravels HTTP 測(cè)試 API 本身進(jìn)行測(cè)試。

我認(rèn)為 Laravel Dusk 是一個(gè)非常棒的軟件包并且可以簡(jiǎn)化瀏覽器測(cè)試。
以下是一個(gè)用戶(hù)注冊(cè)的示例測(cè)試，以便你可以了解 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");
    });
}

要了解更多關(guān)于 Laravel Dusk 以及如何開(kāi)始使用自己的瀏覽器測(cè)試的更多信息，請(qǐng)查看?官方文檔。

在介紹 Laravel Dusk 控制臺(tái)內(nèi)部如何運(yùn)行之前，讓我們先瞄一眼如何在 Laravel 應(yīng)用內(nèi)安裝并使用這個(gè)擴(kuò)展包。

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

首先，使用 Composer 安裝本擴(kuò)展包。

composer require --dev beyondcode/dusk-dashboard

接下來(lái)，打開(kāi) Laravel Dusk 生成的 DuskTestCase.php。你可以在 tests 目錄里找到這個(gè)文件。

請(qǐng)務(wù)必使用本擴(kuò)展包的測(cè)試用例（Test case）作為基類(lèi)，而不是 Laravel Dusk 的測(cè)試用例。稍后我再告訴你內(nèi)部原理。

找到此行：

use LaravelDuskTestCase as BaseTestCase;

使用如下內(nèi)容替換：

use BeyondCodeDuskDashboardTestingTestCase as BaseTestCase;

搞定。

現(xiàn)在你可以使用如下命令啟動(dòng) Laravel Dusk 控制臺(tái)，并執(zhí)行你的測(cè)試了。

php artisan dusk:dashboard

類(lèi)似這樣的界面便會(huì)展示在你的面前：

只需按下「Start Tests」按鈕，即可運(yùn)行 Laravel Dusk 測(cè)試，并觀察到你的應(yīng)用被測(cè)試時(shí)的輸出，以及所發(fā)生的行為。

隨后，你便會(huì)看到 Dusk 測(cè)試產(chǎn)生的各種事件出現(xiàn)在你的控制臺(tái)上。

還有一種啟動(dòng) Dusk 測(cè)試的方法是，只要編輯任意一個(gè)測(cè)試文件然后保存即可。Laravel Dusk 控制臺(tái)內(nèi)置了文件監(jiān)視器。

你可以通過(guò)點(diǎn)擊展示在列表中的測(cè)試行為，來(lái)調(diào)試和檢查它們。點(diǎn)擊后，你將會(huì)看到 DOM 快照，表示當(dāng)此行為被記錄時(shí)的 HTML 頁(yè)面狀態(tài)。若此行為以某種方式操作過(guò) DOM，那么你也可以點(diǎn)擊 「Before」和「After」按鈕在事件發(fā)生「之前」或「之后」的 DOM 快照之間進(jìn)行切換。

如下，一個(gè)按下「Register」按鈕的小例子：

有時(shí)候，查看運(yùn)行測(cè)試時(shí)發(fā)生的有關(guān) XHR 請(qǐng)求的其他信息可能會(huì)很有用。例如：你網(wǎng)站上又一個(gè)按鈕，它將對(duì)某個(gè)服務(wù)端執(zhí)行 GET 請(qǐng)求。

Dusk Dashboard 允許您記錄 XHR 事件，并顯示響應(yīng)狀態(tài)和響應(yīng)路徑。

默認(rèn)情況下 XHR 請(qǐng)求檢查不會(huì)啟用，因?yàn)樗枰阈薷臑g覽器功能。

要啟用 XHR 的請(qǐng)求記錄，打開(kāi)你的 ?DuskTestCase.php ，在文件里，有個(gè)?driver 方法，用于設(shè)置不同測(cè)試操作的 WebDriver。由于此程序包需要對(duì)此驅(qū)動(dòng)程序的功能進(jìn)行一些調(diào)整，因此需要使用 $this->enableNetworkLogging 方法調(diào)用來(lái)封裝 ?DesiredCapabilities 對(duì)象。

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
            )
        )
    );
}

通過(guò)添加此功能，該程序包將啟用記錄 XHR 請(qǐng)求和響應(yīng)信息所需的功能。

基本思路十分簡(jiǎn)單：運(yùn)行一個(gè) WebSocket 服務(wù)，控制臺(tái)用戶(hù)連接到這個(gè) WebSocket 服務(wù)，接著 PHPUnit 便會(huì)將瀏覽器事件和失敗信息發(fā)送至所有 WebSocket 連接。

以下是具體的實(shí)現(xiàn)方式：

在內(nèi)部，此擴(kuò)展包向你的 Laravel 應(yīng)用內(nèi)添加了一個(gè)名為 StartDashboardCommand 的命令。當(dāng)此命令被執(zhí)行時(shí)，就會(huì) 啟動(dòng) 一個(gè)由 Ratchet 開(kāi)發(fā)的 WebSocket 服務(wù)。最初我考慮基于我同 Freek 一起開(kāi)發(fā)的 Laravel Websockets 實(shí)現(xiàn)此功能，然而隨后就斃了這個(gè)想法。原因很簡(jiǎn)單，此擴(kuò)展包僅能用作開(kāi)發(fā)依賴(lài)項(xiàng)，并且我不需要 Pusher 或 Laravel 廣播功能，因?yàn)閺V播是通過(guò) PHPUnit 內(nèi)部實(shí)現(xiàn)的。

譯者注：Freek 意指 Freek Van der Herten。
另，截至目前，此擴(kuò)展包也已經(jīng)發(fā)布 v1.0.x 穩(wěn)定版本。

接下來(lái)，我添加兩條路由到 WebSocket 服務(wù)。

$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 控制臺(tái)的 HTML 視圖。

就是這么簡(jiǎn)單，它只做一件事——返回 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?同樣是一個(gè) HTTP 路由，但只允許 POST 請(qǐng)求。它被用來(lái)在 PHPUnit 和 WebSocket 客戶(hù)端之間通訊。

同樣十分簡(jiǎn)單，也只做一件事——接收 POST 數(shù)據(jù)，并廣播給所有已連接的 WebSocket 客戶(hù)端：

class EventController extends Controller
{
    public function onOpen(ConnectionInterface $conn, RequestInterface $request = null)
    {
        try {
            /*
             * 如下即為從 PHPUnit 測(cè)試發(fā)來(lái)的 POST 數(shù)據(jù)，
             * 發(fā)送到已連接的客戶(hù)端。
             */
            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();
    }
}

這是整個(gè)擴(kuò)展包最乏味的部分。因?yàn)槿粝胧占?Laravel Dusk 方法，并將它們廣播到 WebSocket 連接，那么必須代理所有的消息再收集它們。

在本擴(kuò)展包自定義的 TestCase 類(lèi)里，我們能夠重寫(xiě)（override）瀏覽器實(shí)例被創(chuàng)建的過(guò)程。那么，此處就是我注入自定義的瀏覽器（Browser）類(lèi)的地方。它負(fù)責(zé)代理現(xiàn)有方法并收集所有行為，同時(shí)轉(zhuǎn)發(fā)給 WebSocket 連接。

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

沒(méi)什么高端操作。接下來(lái)，我原本想直接創(chuàng)建一個(gè)新類(lèi)，傳給它 Laravel Dusk 的瀏覽器類(lèi)，隨后使用 __call 魔術(shù)方法代理所有的方法。這能夠省下一大堆代碼，但也會(huì)引出兩個(gè)問(wèn)題：

用戶(hù)無(wú)法使用 IDE 自動(dòng)完成、方法提示功能。

對(duì)我來(lái)說(shuō)有點(diǎn)忍不了，我認(rèn)為這是個(gè)非常重要的特性 —— 尤其是對(duì)于測(cè)試工具來(lái)說(shuō)。開(kāi)發(fā)者并不了解 API 的輸入和輸出，因此需要 IDE 的提示。

另一個(gè)問(wèn)題是，我不僅僅想在瀏覽器行為發(fā)生后記錄 DOM 快照，在某些特定的行為發(fā)生前，同樣想記錄快照。

所以這就是我為何不得不像下面這樣，代理所有 Laravel Dusk 方法：

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

    return parent::assertTitle($title);
}

好了，這樣我便能收集并記錄各個(gè)行為，且依然維持著 IDE 自動(dòng)完成功能。棒棒噠！

現(xiàn)在你能看到這里的?actionCollector?是 PHPUnit 和 WebSocket 客戶(hù)端之間的橋梁。它收集獲得的信息，并用例如測(cè)試名稱(chēng)和 WebSocket POST 推送的端點(diǎn)數(shù)據(jù)來(lái)豐富它：

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 服務(wù)器可能是關(guān)閉的。不必驚慌。
    }
}

它由 try-catch 包裹來(lái)保證即使在 Dusk Dashboard 服務(wù)器關(guān)閉時(shí) Laravel Dusk 也能正常運(yùn)行。

最后，值得注意的是，此擴(kuò)展包在它的面板界面里也有很多說(shuō)道。它由 TailwindCSS 和 Vue 驅(qū)動(dòng)來(lái)展示到來(lái)的事件以及過(guò)濾它們等等。你可以在這?這 查看起始頁(yè)面的代碼。

差不多就這些了。

更多翻譯文章請(qǐng)見(jiàn) PHP / Laravel 開(kāi)發(fā)者社區(qū) https://laravel-china.org/top...