Консоль Laravel Dusk-это пакет расширения Laravel, который предоставляет красивую визуальную панель для вашего набора тестов Dusk. С его помощью вы можете визуализировать шаги, связанные с запуском теста Dusk, и просматривать моментальные снимки DOM каждого шага. Это очень полезно для отладки тестов браузера и выяснения того, что сделал фон. В то же время вы можете использовать средства отладки браузера для проверки моментальных снимков DOM.
В дополнение к визуальной панели, этот пакет расширений также предоставляет тестовый монитор Laravel Dusk. После изменения теста Dusk процесс тестирования выполняется автоматически.
Этот пакет расширений сильно вдохновлен Cypress, фреймворком для тестирования Javascript.
Чтобы просмотреть этот пакет расширений, пожалуйста, перейдите на GitHub.
Что такое Laravel Dusk?
Laravel Dusk предоставляет выразительный, простой в использовании интерфейс автоматизации браузера и тестирования API. Используйте Laravel Dusk для написания тестовых примеров, как в реальных браузерах. Например, когда вы хотите протестировать функции перетаскивания на веб-сайте, вы хотите протестировать компоненты Vue или другие функции, связанные с Javascript, поэтому вы не можете тестировать с помощью самого API HTTP-тестирования Laravels.
Я думаю, что 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, созданный Dusk. php 。 Вы можете пройти тесты Найти этот файл в каталоге.
Обязательно используйте тестовые случаи для этого пакета расширений( Тестовый случай ) в качестве базовых классов, а не Laravel Dusk. Я расскажу вам о внутреннем принципе позже.
Найдите эту поездку:
use Laravel\Dusk\TestCase as BaseTestCase;
Заменить следующим:
use BeyondCode\DuskDashboard\Testing\TestCase as BaseTestCase;
Выясни это.
Теперь вы можете запустить консоль Laravel Dusk с помощью следующих команд и выполнить свои тесты.
php artisan dusk:dashboard
Такие интерфейсы будут отображаться перед вами:
Начните тестирование
Просто нажмите кнопку “Начать тесты”, чтобы запустить тест Laravel Dusk и понаблюдать за выводом вашего приложения, когда оно будет протестировано и что произойдет.
Впоследствии вы увидите, как на вашей консоли появятся различные события, сгенерированные тестом Dusk.
Еще один способ начать тест Dusk-отредактировать любой текстовый файл и сохранить его. Консоль Laravel Dusk имеет встроенный файловый монитор.
Этапы отладки и тестирования
Вы можете отладить и проверить их, нажав на поведение теста, отображаемое в списке. После нажатия вы увидите снимок DOM, показывающий состояние HTML-страницы при записи этого поведения. Если это поведение каким-то образом повлияло на DOM, вы также можете нажать кнопки “До” и “После”, чтобы переключаться между снимками DOM “до” или “после” при возникновении события.
Вот небольшой пример нажатия кнопки Регистрация:
Проверьте запросы XHR
Иногда может быть полезно просмотреть другую информацию о запросах XHR, возникающих при выполнении тестов. Например, на вашем веб-сайте есть еще одна кнопка, которая будет выполнять запросы GET на сервере.
Панель мониторинга Dusk позволяет записывать события XHR и отображать статус ответа и пути ответа.
По умолчанию проверка запросов XHR не включена, поскольку для этого требуется изменить функциональность браузера.
Чтобы включить ведение журнала запросов XHR, откройте свой DuskTestCase.php В документе есть один. драйвер Метод настройки WebDriver для различных тестовых операций. Поскольку этот пакет требует некоторых изменений в функциональности драйвера, его необходимо использовать $this->enableNetworkLogging Вызовы методов для инкапсуляции желаемых возможностей Объекта.
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.
Ниже приведены конкретные способы реализации:
Внутренне этот пакет расширения добавляет имя к вашему приложению ярлыка Команда панели запуска Заказ. Когда эта команда выполняется, запускается служба WebSocket, разработанная Ratchet. Сначала я думал о реализации этой функции на основе веб-сайтов Laravel, которые я разработал с Freek, но затем я убил эту идею. Причина проста. Этот пакет расширения может использоваться только в качестве зависимости от разработки, и мне не нужен Pusher или Laravel broadcasting, потому что вещание реализовано внутри через PHPUnit.
Фрик означает Фрик Ван дер Хертен. Кроме того, до сих пор этот пакет расширений также выпускал стабильную версию версии 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);$$Маршрут панели мониторинга Это обычная маршрутизация HTTP – контроллера, которая выводит HTML-представление консоли Laravel Dusk.
Все так просто. Он делает только одно — возвращается в представление 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();
}
}$$маршрут события Это также маршрутизация HTTP, но разрешен только POST Запрос. Он используется для связи между PHPUnit и клиентами WebSocket.
Аналогично, очень просто сделать только одно – получать данные POST и передавать их всем подключенным клиентам WebSocket:
class EventController extends Controller
{
public function onOpen(ConnectionInterface $conn, RequestInterface $request = null)
{
try {
/*
* The following is POST data from the PHPUnit test.
* Send to the connected client.
*/
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 В классах, мы можем переписать( переопределить ) Процесс создания экземпляров браузера. Итак, вот где я вводлю пользовательские браузеры( Браузер ) класса мест. Он отвечает за проксирование существующих методов и сбор всех моделей поведения при пересылке их в соединения WebSocket.
protected function newBrowser($driver)
{
return new Browser($driver);
}Здесь нет высококлассных операций. Затем я хотел напрямую создать новый класс, передать его в класс браузера Laravel Dusk и использовать его позже. __вызов Магические методы представляют все методы. Это экономит много кода, но также вызывает две проблемы:
Пользователи не могут использовать IDE для автоматического завершения функции запроса метода.
Я этого не вынесу. Я думаю, что это очень важная функция, особенно для инструментов тестирования. Разработчики не понимают ввода и вывода API, поэтому им нужны подсказки IDE.
Другая проблема заключается в том, что я хочу записывать не только моментальные снимки после того, как происходит поведение браузера, но и моментальные снимки до того, как произойдет определенное поведение.
Так вот почему я должен использовать все методы Laravel Dusk следующим образом:
/** @inheritdoc */
public function assertTitle($title)
{
$this->actionCollector->collect(__FUNCTION__, func_get_args(), $this);
return parent::assertTitle($title);
}Итак, я могу собирать и записывать все действия и по-прежнему поддерживать функцию автоматического завершения IDE. Классно!
Теперь вы можете увидеть это здесь. сборщик действий Это мост между PHPUnit и клиентом WebSocket. Он собирает полученную информацию и обогащает ее данными конечных точек, такими как имена тестов и push-сообщения WebSocket:
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) {
// The Dusk-Dashboard server may be closed. Don't panic.
}
}Он завернут в try-catch, чтобы гарантировать, что Laravel Dusk работает даже при выключении сервера Dusk Dashboard.
Интерфейс пользовательского интерфейса
Наконец, стоит отметить, что этот пакет расширений может многое сказать в своем интерфейсе панели. Он управляется CSS и Vue с попутным ветром, чтобы показывать предстоящие события, фильтровать их и так далее. Вы можете увидеть код для начальной страницы здесь.
Вот и все.