LaravelDusk控制台是一个Laravel扩展，它为您的Dusk测试套件提供了一个漂亮的可视化仪表板。有了它，您可以可视化运行Dusk测试所涉及的各个步骤，以及查看每个步骤的DOM快照。这对于调试浏览器测试和弄清楚幕后发生的事情很有用。同时，您还可以使用浏览器的调试工具来检查DOM快照。这个扩展包除了可视化面板，还提供LaravelDusk测试监视器。对Dusk测试进行修改后，测试过程将自动进行。这个扩展包受到Javascript前端测试框架-Cypress的强烈启发。要查看此扩展包，请移至GitHub。什么是Laravel黄昏？LaravelDusk提供了一个富有表现力、易于使用的浏览器自动化和测试API。使用LaravelDusk编写测试用例，就像在真实的浏览器上一样。例如，当你想测试你网站的拖拽功能，想测试Vue组件，或者其他Javascript相关的功能，那么你就不能使用LaravelsHTTP测试API本身来测试。我认为LaravelDusk是一个很棒的包，可以简化浏览器测试。下面是一个用户注册测试示例，这样您就可以了解LaravelDusk可以做什么：publicfunctiontest_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');});}要了解有关LaravelDusk的更多信息以及如何开始您自己的浏览器测试，请查看官方文档。使用LaravelDusk控制台在了解LaravelDusk控制台如何在内部工作之前，让我们看一下如何在Laravel应用程序中安装和使用此扩展。以下步骤假设你已经按照官方文档成功安装了LaravelDusk；甚至您已经编写了一些Dusk测试。首先，使用Composer安装扩展。composerrequire--devbeyondcode/dusk-dashboard接下来，打开LaravelDusk生成的DuskTestCase.php。您可以在测试目录中找到此文件。请务必使用本扩展包的测试用例（Testcase）作为基类，而不是LaravelDusk的测试用例。稍后我会告诉你内部情况。找到这一行：使用Laravel\Dusk\TestCase作为BaseTestCase；将其替换为以下内容：使用BeyondCode\DuskDashboard\Testing\TestCase作为BaseTestCase；完毕。现在您可以启动LaravelDusk控制台并使用以下命令执行测试。phpartisandusk:dashboard一个类似这样的界面会显示在你的面前：StartTesting只需按下“开始测试”按钮即可运行LaravelDusk测试并在测试时观察应用程序的输出和行为。然后你会看到来自Dusk测试的各种事件出现在你的控制台上。另一种开始Dusk测试的方法是简单地编辑任何测试文件并保存它。LaravelDusk控制台内置了一个文件观察器。调试测试步骤您可以通过单击列表中显示的测试操作来调试和检查测试操作。单击后，您将看到代表记录此操作时HTML页面状态的DOM快照。如果此行为以某种方式操纵DOM，您还可以单击“之前”和“之后”按钮在事件“之前”或“之后”的DOM快照之间切换。下面是按下“注册”按钮的一个小例子：检查XHR请求有时，查看有关运行测试时发生的XHR请求的附加信息可能很有用。示例：您网站上的另一个按钮将向服务器执行GET请求。DuskDashboard允许您记录XHR事件并显示响应状态和响应路径。默认情况下不启用XHR请求检查，因为它需要您修改浏览器功能。要启用XHR请求日志记录，请打开你的DuskTestCase.php，在文件中，有一个驱动程序方法，用于为不同的测试操作设置WebDriver。由于此包需要对此驱动程序的功能进行一些调整，因此需要使用$this->enableNetworkLogging方法调用来包装DesiredCapabilities对象。protectedfunctiondriver(){$options=(newChromeOptions)->addArguments(['--disable-gpu','--headless','--window-size=1920,1080',]);returnRemoteWebDriver::create('http://localhost:9515',$this->enableNetworkLogging(DesiredCapabilities::chrome()->setCapability(ChromeOptions::CAPABILITY,$options)));}通过添加此功能，packagewill启用记录XHR请求和响应信息所需的功能。工作原理基本思想非常简单：运行WebSocket服务，控制台用户连接到该WebSocket服务，然后PHPUnit将浏览器事件和失败消息发送到所有WebSocket连接。下面是它的实现方式：在内部，这个包向你的Laravel应用程序添加了一个名为StartDashboardCommand的命令。执行该命令时，将启动一个由Ratchet开发的WebSocket服务。最初我考虑基于我用Freek开发的LaravelWebsockets实现这个功能，但后来打消了这个想法。原因很简单，这个扩展包只能作为开发依赖，我不需要Pusher或者Laravel的广播功能，因为广播是通过PHPUnit在内部实现的。译者注：Freek意为FreekVanderHerten。此外，截至目前，该扩展包还发布了v1.0.x稳定版。接下来，我向WebSocket服务添加两条路由。$dashboardRoute=newRoute('/dashboard',['_controller'=>newDashboardController()],[],[],null,[],['GET']);$this->app->routes->add('dashboard',$dashboardRoute);$eventRoute=newRoute('/events',['_controller'=>newEventController()],[],[],null,[],['POST']);$this->app->routes->add('events',$eventRoute);$dashboardRoute是一个普通的HTTP控制器路由，它输出LaravelDusk控制台的HTML视图。就这么简单，它只做一件事——返回HTML视图：-Type'=>'text/html'],file_get_contents(__DIR__.'/../../../resources/views/index.html'))));$连接->关闭();}}$eventRoute也是HTTP路由，但只允许POST请求。它用于PHPUnit和WebSocket客户端之间的通信。它也很简单，它只做一件事——接收POST数据并将其广播给所有连接的WebSocket客户端：以下是从PHPUnit测试发送的POST数据，*发送到连接的客户端。*/foreach(Socket::$connectionsas$connection){$connection->send($request->getBody());}$conn->send(str(newResponse(200)));}catch(Exception$e){$conn->send(str(newResponse(500,[],$e->getMessage())));}$conn->close();}}收集浏览器行为这是整个扩展包中最繁琐的部分。因为如果你想收集所有LaravelDusk方法并将它们广播到WebSocket连接，你必须代理所有消息并收集它们。在这个扩展包的自定义TestCase类中，我们可以覆盖（override）创建浏览器实例的过程。所以，这里是我注入自定义浏览器类的地方。它负责代理现有方法并在转发到WebSocket连接时收集所有操作。protectedfunctionnewBrowser($driver){returnnewBrowser($driver);}没有高端操作。接下来，我原本只想创建一个新类，将LaravelDusk浏览器类传递给它，然后使用__call魔术方法委托所有方法。这样可以节省很多代码，但是也带来了两个问题：用户不能使用IDE的自动补全和方法提示功能。这对我来说有点太多了，我认为这是一个非常重要的特性——尤其是对于测试工具而言。开发者不知道API的输入输出，所以需要IDE的提示。另一个问题是我不只是想在浏览器操作发生之后记录DOM快照，而且还想在某些特定操作发生之前记录DOM快照。所以这就是为什么我必须像这样代理所有LaravelDusk方法：returnparent::assertTitle($title);}好吧，这样我就可以收集和记录操作并仍然保持IDE自动完成。惊人的！现在可以看到这里的actionCollector是PHPUnit和WebSocket客户端之间的桥梁。它收集获得的信息，并用测试名称和WebSocketPOST推送的端点等数据丰富它：protectedfunctionpushAction(string$name,array$payload){try{$this->client->post('http://127.0.0.1:'.StartDashboardCommand::PORT.'/events',[RequestOptions::JSON=>['channel'=>'dusk-dashboard','name'=>$name,'data'=>$有效载荷,],]);}catch(\Exception$e){//Dusk-Dashboard服务器可能已关闭。不要恐慌。它被包裹在一个try-catch中，以保持LaravelDusk运行，即使在DuskDashboard服务器关闭时也是如此。UI最后，值得注意的是，该扩展程序在其面板界面中也有很多话要说。它由TailwindCSS和Vue提供支持，用于显示传入事件、过滤它们等。您可以在此处查看起始页的代码。就是这样。更多翻译文章请查看PHP/Laravel开发者社区https://laravel-china.org/top...
