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 测试发生的种种事宜出如今你的掌握台上。
另有一种启动 Dusk 测试的要领是，只需编辑恣意一个测试文件然后保留即可。Laravel Dusk 掌握台内置了文件监视器。
调试测试步骤
你可以经由历程点击展现在列表中的测试行动，来调试和搜检它们。点击后，你将会看到 DOM 快照，示意当此行动被纪录时的 HTML 页面状况。若此行动以某种体式格局操纵过 DOM，那末你也可以点击 「Before」和「After」按钮在事宜发作「之前」或「以后」的 DOM 快照之间举行切换。
以下，一个按下「Register」按钮的小例子：
搜检XHR要求
有时候，检察运转测试时发作的有关 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 也能一般运转。
UI 界面
末了，值得注意的是，此扩大包在它的面板界面里也有许多说道。它由 TailwindCSS 和 Vue 驱动来展现到来的事宜以及过滤它们等等。你可以在这 这 检察起始页面的代码。
差不多就这些了。
以上就是Laravel Dusk掌握台的初学引见（代码示例）的细致内容，更多请关注ki4网别的相干文章！
