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网别的相干文章!