hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - PHP框架 - Laravel - 正文 请牢记本站网址www.sosophp.cn

Laravel Dusk控制台的初学引见(代码示例)【laravel框架】,laravel,php

2019-11-29Laravel搜搜PHP网64°c
A+ A-
本篇文章给人人带来的内容是关于Laravel Dusk掌握台的初学引见(代码示例),有肯定的参考价值,有须要的朋侪可以参考一下,愿望对你有所协助。

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

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
Laravel Dusk控制台的初学引见(代码示例)【laravel框架】,laravel,php

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: