Laravel (5.7) Тестирование браузера (Laravel Dusk)

Laravel Dusk по умолчанию используется для тестирования браузеров в laravel, это руководство даст вам подробное объяснение того, что это такое, и как вы можете использовать его для выполнения различных тестов в вашем браузере.

Вступление

Laravel Dusk предлагает выразительный, простой в использовании браузерный API-интерфейс для тестирования и автоматизации. По умолчанию Laravel Dusk не требует от вас установки JDK или Selenium на ваш компьютер. Скорее Dusk использует отдельную установку ChromeDriver. Однако вы также можете использовать любой другой драйвер, совместимый с Selenium.

Монтаж

Чтобы начать работу с Dusk, добавьте в ваш проект зависимость laravel / dusk composer:

composer require --dev laravel/dusk

php artisan dusk:install

Каталог Browser создается в вашем каталоге тестов и содержит пример теста. Затем вы должны установить переменную окружения APP_URL в вашем файле .env. Это значение должно соответствовать URL-адресу, который вы используете для доступа к своему приложению в браузере.

Если вы хотите запустить свои тесты, вы должны использовать команду dusk Artisan. Команда dusk примет любой аргумент, который также принят командой phpunit:

php artisan dusk

Если у вас были неудачные тесты в последний раз, когда вы запускали команду dusk, вы можете сэкономить время, повторно выполнив неудачные тесты, используя команду dusk: fails:

php artisan dusk:fails

Использование других браузеров

Dusk использует Google Chrome по умолчанию и отдельную установку ChromeDriver для запуска всех ваших тестов браузера. Однако вы можете запустить свой собственный сервер Selenium, а затем запустить свои тесты для любого браузера.

Первое, что вам нужно для начала, это открыть файл tests / DuskTestCase.php, который является базовым тестовым примером Dusk для вашего приложения. Внутри файла вы можете удалить вызов метода startChromeDriver. Это останавливает Dusk от автоматического запуска ChromeDriver:

/**
 * Prepare for Dusk test execution.
 *
 * @beforeClass
 * @return void
 */
public static function prepare()
{
    // static::startChromeDriver();
}

Затем вы можете изменить метод драйвера для подключения к URL-адресу и порту по вашему выбору. Кроме того, вы можете изменить «желаемые возможности», которые должны быть переданы в WebDriver:

/**
 * Create the RemoteWebDriver instance.
 *
 * @return \Facebook\WebDriver\Remote\RemoteWebDriver
 */
protected function driver()
{
    return RemoteWebDriver::create(
        'http://localhost:4444/wd/hub', DesiredCapabilities::phantomjs()
    );
}

Начиная

Генерация тестов

Если вы хотите сгенерировать тест Dusk, вы должны использовать команду dusk: make Artisan. Сгенерированный тест помещается в каталог tests / Browser:

php artisan dusk:make LoginTest

Запуск тестов

Если вы хотите запустить тесты вашего браузера, вы должны использовать команду dusk Artisan:

php artisan dusk

Если при последнем запуске команды dusk у вас были неудачные тесты, вы можете сэкономить время, повторно выполнив неудачные тесты, используя команду dusk: fails:

php artisan dusk:fails

Команда dusk примет любой аргумент, который обычно принимается исполнителем тестов PHPUnit, это позволяет вам запускать тесты только для данной группы и т. Д .:

php artisan dusk --group=foo

Запуск ChromeDriver вручную

По умолчанию Dusk автоматически пытается запустить ChromeDriver. Если это не работает для вашей конкретной системы, вы можете вручную запустить ChromeDriver перед запуском команды dusk. В случае, если вы решите запустить ChromeDriver вручную, закомментируйте следующую строку вашего файла tests / DuskTestCase.php:

/**
 * Prepare for Dusk test execution.
 *
 * @beforeClass
 * @return void
 */
public static function prepare()
{
    // static::startChromeDriver();
}

Кроме того, если вы запускаете ChromeDriver на порту, кроме 9515, вы должны изменить метод драйвера того же класса:

/**
 * Create the RemoteWebDriver instance.
 *
 * @return \Facebook\WebDriver\Remote\RemoteWebDriver
 */
protected function driver()
{
    return RemoteWebDriver::create(
        'http://localhost:9515', DesiredCapabilities::chrome()
    );
}

Обработка окружающей среды

Если вы хотите заставить Dusk использовать собственный файл среды при запуске тестов, то создайте файл .env.dusk. {Environment} в корневом каталоге вашего проекта. Например, если вы запускаете команду dusk из локальной среды, создайте файл .env.dusk.local.

Когда вы запускаете тесты, Dusk создает резервную копию вашего файла .env и переименовывает вашу среду Dusk в .env. После завершения тестов ваш файл .env будет восстановлен.

Создание браузеров

Чтобы начать с этим, давайте напишем тест, который проверяет, что мы можем войти в наше приложение. После того, как мы сгенерируем тест, мы теперь можем изменить его, чтобы перейти на страницу входа в систему, ввести некоторые учетные данные для входа и затем нажать кнопку «Войти». Мы создаем экземпляр браузера, вызывая метод browse:

<?php
namespace Tests\Browser;
use App\User;
use Tests\DuskTestCase;
use Laravel\Dusk\Chrome;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class ExampleTest extends DuskTestCase
{
    use DatabaseMigrations;
    /**
     * A basic browser test example.
     *
     * @return void
     */
    public function testBasicExample()
    {
        $user = factory(User::class)->create([
            'email' => '[email protected]',
        ]);
        $this->browse(function ($browser) use ($user) {
            $browser->visit('/login')
                    ->type('email', $user->email)
                    ->type('password', 'secret')
                    ->press('Login')
                    ->assertPathIs('/home');
        });
    }
}

Как видно из приведенного выше примера, метод browse примет обратный вызов. Экземпляр браузера автоматически передается в этот обратный вызов Dusk и является основным объектом, который используется для взаимодействия с вами и будет делать заявления против вашего приложения.

Создание нескольких браузеров

Есть моменты, когда вам нужно несколько браузеров, чтобы правильно выполнить тест. Например, вам может потребоваться несколько браузеров для тестирования экрана чата, который взаимодействует с веб-сокетами. Чтобы создать несколько браузеров, «попросите» более одного браузера в сигнатуре обратного вызова, который передается методу обзора:

$this->browse(function ($first, $second) {
    $first->loginAs(User::find(1))
          ->visit('/home')
          ->waitForText('Message');
    $second->loginAs(User::find(2))
           ->visit('/home')
           ->waitForText('Message')
           ->type('message', 'Hey Taylor')
           ->press('Send');
    $first->waitForText('Hey Taylor')
          ->assertSee('Jeffrey Way');
});

Изменение размера окна браузера

Вы можете использовать метод изменения размера, чтобы настроить размер окна браузера:

$browser->resize(1920, 1080);

Метод максимизации, который можно использовать для максимизации окна браузера:

$browser->maximize();

Макросы браузера

Если вы хотите определить собственный метод браузера, который вы можете использовать повторно в различных тестах, вы можете использовать метод макроса в классе Browser. Как правило, вы должны вызывать этот метод из метода загрузки поставщика услуг:

<?php
namespace App\Providers;
use Laravel\Dusk\Browser;
use Illuminate\Support\ServiceProvider;
class DuskServiceProvider extends ServiceProvider
{
    /**
     * Register the Dusk's browser macros.
     *
     * @return void
     */
    public function boot()
    {
        Browser::macro('scrollToElement', function ($element = null) {
            $this->script("$('html, body').animate({ scrollTop: $('$element').offset().top }, 0);");
            return $this;
        });
    }
}

Функция макроса примет имя в качестве первого аргумента, а Closure - в качестве второго. Закрытие макроса выполняется при вызове макроса как метода в реализации браузера:

$this->browse(function ($browser) use ($user) {
    $browser->visit('/pay')
            ->scrollToElement('#credit-card-details')
            ->assertSee('Enter Credit Card Details');
});

Аутентификация

Чаще всего страницы, которые вы будете тестировать, требуют аутентификации. Вы можете использовать метод loginAs компании Dusk, чтобы избежать взаимодействия с экраном входа в систему во время каждого теста. Метод loginAs принимает идентификатор пользователя или экземпляр модели пользователя:

$this->browse(function ($first, $second) {
    $first->loginAs(User::find(1))
          ->visit('/home');
});

Миграция базы данных

В случае, когда ваш тест требует миграций, таких как приведенный выше пример аутентификации, никогда не используйте черту RefreshDatabase. Черта RefreshDatabase будет использовать транзакции базы данных, которые не будут применяться к HTTP-запросам. Скорее, вы должны использовать черту DatabaseMigrations:

<?php
namespace Tests\Browser;
use App\User;
use Tests\DuskTestCase;
use Laravel\Dusk\Chrome;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class ExampleTest extends DuskTestCase
{
    use DatabaseMigrations;
}

Взаимодействие с элементами

Dusk Selectors

Одна из самых сложных частей написания тестов Dusk - выбор хороших селекторов CSS для взаимодействия с элементами. Со временем изменения внешнего интерфейса могут привести к тому, что селекторы CSS, такие как следующие, будут нарушать ваши тесты:

// HTML...
<button>Login</button>
// Test...
$browser->click('.login-page .container div > button');

Селекторы Dusk позволяют вам сосредоточиться на написании эффективных тестов, а не вспоминать селекторы CSS. Если вы хотите определить селектор, вы должны добавить атрибут dusk к вашему HTML-элементу. Затем добавьте к селектору префикс @, чтобы управлять вложенным элементом в тесте Dusk:

// HTML...
<button dusk="login-button">Login</button>
// Test...
$browser->click('@login-button');

Нажатие на ссылки

Если ваш тест включает нажатие на ссылку, используйте метод clickLink в экземпляре браузера. Метод clickLink щелкает ссылку с заданным отображаемым текстом:

$browser->clickLink($linkText);

Текст, значения и атрибуты

Получение и установка значений

Laravel Dusk предоставляет нам несколько методов взаимодействия с текущим отображаемым текстом, значением и атрибутами элементов на странице. Например, чтобы получить «значение» элемента, соответствующего данному селектору, вы должны использовать метод value:

// Retrieve the value...
$value = $browser->value('selector');
// Set the value...
$browser->value('selector', 'value');

Получение текста

Метод text можно использовать для извлечения отображаемого текста элемента, который соответствует данному селектору:

$text = $browser->text('selector');

Получение атрибутов

Наконец, метод атрибута можно использовать для извлечения атрибута элемента, соответствующего данному селектору:

$attribute = $browser->attribute('selector', 'value');

Использование форм

Ввод значений

Dusk предоставляет нам различные методы взаимодействия с формами и элементами ввода. Сначала давайте рассмотрим пример ввода текста в поле ввода:

$browser->type('email', '[email protected]');

Обратите внимание, что хотя метод примет его в случае необходимости, мы не обязаны передавать селектор CSS в метод типа. В случае, если CSS-селектор не предусмотрен, Dusk будет искать поле ввода, которое имеет заданный атрибут name. Наконец, Dusk пытается найти текстовую область с заданным атрибутом имени.

Если вы хотите добавить текст в поле без очистки его содержимого, вы можете использовать метод добавления:

$browser->type('tags', 'foo')
        ->append('tags', ', bar, baz');

Вы можете очистить значение ввода, используя метод clear:

$browser->clear('email');

Dropdowns

Чтобы выбрать значение из выпадающего списка, вы можете использовать метод выбора. Как и метод type, метод select не требует полного селектора CSS. Когда вы передаете значение методу select, вы должны передать значение основного параметра, а не отображаемый текст:

$browser->select('size', 'Large');

Вы можете выбрать случайную опцию, пропустив второй параметр:

$browser->select('size');

Флажки

Если вы хотите «проверить» поле флажка, вы можете использовать метод проверки. Как и многие другие методы, связанные с вводом, полный селектор CSS не требуется. Если точное совпадение селектора не может быть найдено, Dusk будет искать флажок с соответствующим атрибутом имени:

$browser->check('terms');
$browser->uncheck('terms');

Радио-кнопки

Если вы хотите «выбрать» опцию радио-кнопки, вы можете использовать радио-метод. Как и многие другие методы, связанные с вводом, полный селектор CSS не требуется. Если точное совпадение селектора не может быть найдено, Dusk будет искать радио, которое имеет соответствующие атрибуты name и value:

$browser->radio('version', 'php7');

Вложение файлов

Метод присоединения может использоваться, чтобы прикрепить файл к элементу ввода файла. Как и многие другие методы, связанные с вводом, полный селектор CSS не требуется. Если точное совпадение селектора не может быть найдено, Dusk будет искать входной файл, который имеет соответствующий атрибут name:

$browser->attach('photo', __DIR__.'/photos/me.png');

Использование клавиатуры

Метод keys позволит вам предоставить более сложные последовательности ввода для данного элемента, чем обычно разрешается методом type. Например, вы можете удерживать клавиши-модификаторы для ввода значений. В этом случае клавиша Shift будет удерживаться, пока арий вводится в элемент, соответствующий данному селектору. После ввода aryan, mishal будет напечатан без каких-либо клавиш-модификаторов:

$browser->keys('selector', ['{shift}', 'aryan'], 'mishal');

Вы даже можете отправить «горячую клавишу» первичному селектору CSS, который содержит ваше приложение:

$browser->keys('.app', ['{command}', 'j']);

Все ключи-модификаторы заключены в символы {}, и все они соответствуют константам, определенным в классе FacebookWebDriverWebDriverKeys, который можно найти на GitHub.

Используя мышь

Нажав на элементы

Метод click может использоваться для «щелчка» элемента, соответствующего данному селектору:

$browser->click('.selector');

Mouseover

Метод mouseover можно использовать, когда вам нужно навести курсор мыши на элемент, соответствующий данному селектору:

$browser->mouseover('.selector');

Перетаскивания

Метод перетаскивания можно использовать для перетаскивания элемента, соответствующего данному селектору, в другой элемент:

$browser->drag('.from-selector', '.to-selector');

Или вы можете перетащить элемент в одном направлении:

$browser->dragLeft('.selector', 10);
$browser->dragRight('.selector', 10);
$browser->dragUp('.selector', 10);
$browser->dragDown('.selector', 10);

Диалоги JavaScript

Dusk предоставляет нам различные методы взаимодействия с диалогами JavaScript:

// Wait for a dialog to appear:
$browser->waitForDialog($seconds = null);
// Assert that a dialog has been displayed and that its message matches the given value:
$browser->assertDialogOpened('value');
// Type the given value in an open JavaScript prompt dialog:
$browser->typeInDialog('Hello World');

Если вы хотите закрыть открытый диалог JavaScript, нажав кнопку ОК:

$browser->acceptDialog();

Если вы хотите закрыть открытый диалог JavaScript, нажмите кнопку «Отмена» (только для диалогового окна подтверждения):

$browser->dismissDialog();

Выбор области видимости

Иногда вы можете захотеть выполнить несколько операций, одновременно просматривая все операции в данном селекторе. Например, вы можете заявить, что некоторый текст существует только внутри таблицы, а затем нажать кнопку в этой таблице. Для этого вы можете использовать метод with. Все операции, выполняемые в рамках обратного вызова, переданного методу with, будут ограничены исходным селектором:

$browser->with('.table', function ($table) {
    $table->assertSee('Hello World')
          ->clickLink('Delete');
});

В ожидании стихии

Когда вы тестируете приложения, которые широко используют JavaScript, иногда возникает необходимость «дождаться» доступности определенных элементов или данных, прежде чем приступать к тестированию. Laravel Dusk делает это подпоркой. Используя различные методы, вы можете подождать, пока элементы будут видны на странице, или даже подождать, пока данное выражение JavaScript не станет истинным.

ждущий

миллисекунды, используйте метод паузы:

$browser->pause(1000);

В ожидании селекторов

Метод waitFor можно использовать для приостановки выполнения теста до тех пор, пока на странице не отобразится элемент, соответствующий данному селектору CSS. По умолчанию это приостанавливает тест максимум на пять секунд, прежде чем выдать исключение. При необходимости вы можете передать пользовательский порог тайм-аута в качестве второго аргумента метода:

// Waits a maximum of five seconds for the selector
$browser->waitFor('.selector');
// Waits a maximum of one second for the selector...
$browser->waitFor('.selector', 1);

Вы также можете подождать, пока данный селектор отсутствует на странице:

$browser->waitUntilMissing('.selector');
$browser->waitUntilMissing('.selector', 1);

Выбор области видимости при наличии

Иногда вам может понадобиться подождать определенного селектора, а затем взаимодействовать с элементом, соответствующим селектору. Например, вы можете подождать, пока модальное окно станет доступным, а затем нажать кнопку «ОК» внутри модального окна. В этом случае можно использовать метод whenAvailable. Все операции с элементами, которые выполняются в рамках данного обратного вызова, будут ограничены исходным селектором:

$browser->whenAvailable('.modal', function ($modal) {
    $modal->assertSee('Hello World')
          ->press('OK');
});

Ожидание текста

Метод waitForText можно использовать для ожидания отображения данного текста на странице:

// Wait a maximum of five seconds for the text...
$browser->waitForText('Hello World');
// Wait a maximum of one second for the text...
$browser->waitForText('Hello World', 1);
// Waiting For Links
// The waitForLink method may be used to wait until the given link text is displayed on the page:
// Wait a maximum of five seconds for the link...
$browser->waitForLink('Create');
// Wait a maximum of one second for the link...
$browser->waitForLink('Create', 1);

Ожидание на странице Расположение

Всякий раз, когда вы делаете утверждение пути, такое как $ browser-> assertPathIs ('/ home'), утверждение может завершиться ошибкой, если window.location.pathname обновляется асинхронно. Вы можете использовать метод waitForLocation, чтобы дождаться, пока местоположение будет заданным значением:

$browser->waitForLocation('/secret');

Вы также можете дождаться местоположения названного маршрута:

$browser->waitForRoute($routeName, $parameters);

Ожидание перезагрузки страницы

В случаях, когда вам нужно сделать утверждения после перезагрузки страницы, вы должны использовать метод waitForReload:

$browser->click('.some-action')
        ->waitForReload()
        ->assertSee('something');

Ожидание выражений JavaScript

Иногда вам может понадобиться приостановить выполнение теста, пока данное выражение JavaScript не станет истинным. Вы можете легко сделать это, используя метод waitUntil. Когда вы передаете выражение этому методу, вам не нужно включать ключевое слово return или конечную точку с запятой:

// Wait a maximum of five seconds for the expression to be true...
$browser->waitUntil('App.dataLoaded');
$browser->waitUntil('App.data.servers.length > 0');
// Wait a maximum of one second for the expression to be true...
$browser->waitUntil('App.data.servers.length > 0', 1);

В ожидании выражений Vue

Следующие методы могут использоваться для ожидания, пока данный атрибут компонента Vue не получит заданное значение:

// Wait until the component attribute contains the given value...
$browser->waitUntilVue('user.name', 'Aryan', '@user');
// Wait until the component attribute doesn't contain the given value...
$browser->waitUntilVueIsNot('user.name', null, '@user');

Ожидание с обратным вызовом

Многие из методов ожидания, которые находятся в сумерках, полагаются на базовый метод waitUsing. Вы можете использовать этот метод напрямую, чтобы дождаться, когда данный обратный вызов вернет true. Метод waitUsing будет принимать максимальное количество секунд ожидания, интервал, с которым следует оценивать Закрытие, Закрытие и необязательное сообщение об ошибке:

$browser->waitUsing(10, 1, function () use ($something) {
    return $something->isReady();
}, "Something wasn't ready in time.");

Делать Vue Утверждения

Dusk даже позволяет нам делать утверждения о состоянии данных компонента Vue. Например, представьте, что наше приложение содержит следующий компонент Vue:

// HTML...
<profile dusk="profile-component"></profile>
// Component Definition...
Vue.component('profile', {
    template: '<div>{{ user.name }}</div>',
    data: function () {
        return {
            user: {
              name: 'Taylor'
            }
        };
    }
});

мы можем утверждать о состоянии компонента Vue следующим образом:

/**
 * A basic Vue test example.
 *
 * @return void
 */
public function testVue()
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
                ->assertVue('user.name', 'Taylor', '@profile-component');
    });
}

Доступные утверждения

Dusk предоставляет вам множество утверждений, которые вы можете сделать против своего заявления. Ниже приведен документированный список всех возможных утверждений:

страницы

Иногда тесты требуют выполнения нескольких сложных действий в последовательности. Это затрудняет чтение и понимание наших тестов. Страницы позволяют нам определять выразительные действия, которые затем могут быть выполнены на данной странице, используя один метод. Страницы также позволяют нам определять ярлыки для общих селекторов для нашего приложения или отдельной страницы.

Создание страниц

Если вы хотите сгенерировать объект страницы, вы должны использовать команду dusk: page Artisan. Все объекты страницы будут помещены в каталог tests / Browser / Pages:

php artisan dusk:page Login

Настройка страниц

Страницы имеют три метода: url, assert и elements по умолчанию. Мы обсудим методы assert и url сейчас. Метод элементов обсуждается ниже более подробно.

Метод URL

Метод url возвращает путь URL, который представляет страницу. Dusk будет использовать этот URL при переходе на страницу в браузере:

/**
 * Get the URL for the page.
 *
 * @return string
 */
public function url()
{
    return '/login';
}

Метод подтверждения

Метод assert может сделать любые утверждения, необходимые для проверки того, что браузер действительно находится на данной странице. Нет необходимости завершать этот метод; однако мы можем сделать эти утверждения, если захотим. Эти утверждения запускаются автоматически при переходе на страницу:

/**
 * Asserts that the browser is on the page.
 *
 * @return void
 */
public function assert(Browser $browser)
{
    $browser->assertPathIs($this->url());
}

Переход к страницам

Как только страница настроена, мы можем перейти к ней, используя метод посещения:

use Tests\Browser\Pages\Login;
$browser->visit(new Login);

Иногда мы уже можем быть на данной странице и должны «загрузить» селекторы и методы страницы в текущий контекст теста. Это часто происходит, когда мы нажимаем кнопку и перенаправляемся на данную страницу без явного перехода к ней. В таком случае мы можем использовать метод on для загрузки страницы:

use Tests\Browser\Pages\CreatePlaylist;
$browser->visit('/dashboard')
        ->clickLink('Create Playlist')
        ->on(new CreatePlaylist)
        ->assertSee('@create');

Сокращенные селекторы

Метод элементов страниц позволяет нам определять быстрые и легко запоминающиеся ярлыки для любого селектора CSS на нашей странице. Например, давайте определим ярлык для поля ввода «email» на странице входа приложения:

/**
 * Get the element shortcuts for the page.
 *
 * @return array
 */
public function elements()
{
    return [
        '@email' => 'input[name=email]',
    ];
}

Теперь мы можем использовать этот сокращенный селектор везде, где мы использовали бы полный CSS-селектор:

$browser->type('@email', '[email protected]');

Глобальные сокращенные отборщики

После установки Dusk базовый класс Page помещается в каталог tests / Browser / Pages. Этот класс содержит метод siteElements, который можно использовать для определения глобальных сокращенных селекторов, которые должны быть доступны на каждой странице вашего приложения:

/**
 * Gets the global element shortcuts for the site.
 *
 * @return array
 */
public static function siteElements()
{
    return [
        '@element' => '#selector',
    ];
}

Методы страницы

Помимо методов по умолчанию, определенных на страницах, вы можете определить дополнительные методы, которые могут использоваться в ваших тестах. Например, давайте представим, что мы создаем приложение для управления музыкой. Обычным действием для одной из страниц приложения может быть создание списка воспроизведения. Вместо того, чтобы переписывать логику для создания списка воспроизведения в каждом тесте, вы можете определить метод createPlaylist для класса страницы:

<?php
namespace Tests\Browser\Pages;
use Laravel\Dusk\Browser;
class Dashboard extends Page
{
    // Other page methods...
    /**
     * Create a new playlist.
     *
     * @param  \Laravel\Dusk\Browser  $browser
     * @param  string  $name
     * @return void
     */
    public function createPlaylist(Browser $browser, $name)
    {
        $browser->type('name', $name)
                ->check('share')
                ->press('Create Playlist');
    }
}

Как только метод определен, вы можете использовать его в любом тесте, который использует страницу. Экземпляр браузера автоматически передается методу страницы:

use Tests\Browser\Pages\Dashboard;
$browser->visit(new Dashboard)
        ->createPlaylist('My Playlist')
        ->assertSee('My Playlist');

Компоненты

Компоненты очень похожи на «объекты страницы» Dusk, но они предназначены для элементов пользовательского интерфейса и функций, которые повторно используются в нашем приложении, таких как панель навигации или окно уведомлений. Следовательно, компоненты не привязаны к конкретным URL-адресам.

Генерация компонентов

Если вы хотите создать компонент, вы должны использовать команду Artisan dusk: component. Новые компоненты Dusk находятся в каталоге test / Browser / Components:

php artisan dusk:component DatePicker

Как вы можете видеть в приведенном выше примере, «средство выбора даты» - это экземпляр компонента, который может существовать в вашем приложении на различных страницах. Может оказаться затруднительным вручную написать логику автоматизации браузера для выбора даты в десятках тестов по всему набору тестов. Скорее, вы можете определить компонент Dusk для представления средства выбора даты, что позволит вам инкапсулировать эту логику в компоненте:

<?php
namespace Tests\Browser\Components;
use Laravel\Dusk\Browser;
use Laravel\Dusk\Component as BaseComponent;
class DatePicker extends BaseComponent
{
    /**
     * Get the root selector for the component.
     *
     * @return string
     */
    public function selector()
    {
        return '.date-picker';
    }
    /**
     * Assert that the browser page contains the component.
     *
     * @param  Browser  $browser
     * @return void
     */
    public function assert(Browser $browser)
    {
        $browser->assertVisible($this->selector());
    }
    /**
     * Get the element shortcuts for the component.
     *
     * @return array
     */
    public function elements()
    {
        return [
            '@date-field' => 'input.datepicker-input',
            '@month-list' => 'div > div.datepicker-months',
            '@day-list' => 'div > div.datepicker-days',
        ];
    }
    /**
     * Select the given date.
     *
     * @param  \Laravel\Dusk\Browser  $browser
     * @param  int  $month
     * @param  int  $day
     * @return void
     */
    public function selectDate($browser, $month, $day)
    {
        $browser->click('@date-field')
                ->within('@month-list', function ($browser) use ($month) {
                    $browser->click($month);
                })
                ->within('@day-list', function ($browser) use ($day) {
                    $browser->click($day);
                });
    }
}

Использование компонентов

После того как вы определили компонент, вы можете легко выбрать дату в окне выбора даты из любого теста. И, если логика, необходимая для выбора даты, изменилась, вам нужно только обновить компонент:

<?php
namespace Tests\Browser;
use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Tests\Browser\Components\DatePicker;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class ExampleTest extends DuskTestCase
{
    /**
     * A basic component test example.
     *
     * @return void
     */
    public function testBasicExample()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->within(new DatePicker, function ($browser) {
                        $browser->selectDate(1, 2018);
                    })
                    ->assertSee('January');
        });
    }
}

Непрерывная интеграция

CircleCI

В случае, когда вы используете CircleCI для запуска ваших тестов Dusk, вы можете использовать этот файл конфигурации в качестве отправной точки. Как и TravisCI, вы будете использовать команду php artisan serve для запуска встроенного веб-сервера PHP:

version: 2
jobs:
    build:
        steps:
            - run: sudo apt-get install -y libsqlite3-dev
            - run: cp .env.testing .env
            - run: composer install -n --ignore-platform-reqs
            - run: npm install
            - run: npm run production
            - run: vendor/bin/phpunit
            - run:
                name: Start Chrome Driver
                command: ./vendor/laravel/dusk/bin/chromedriver-linux
                background: true
            - run:
                name: Run Laravel Server
                command: php artisan serve
                background: true
            - run:
                name: Run Laravel Dusk Tests
                command: php artisan dusk

Codeship

Если вы хотите запускать тесты Dusk на Codeship, вам нужно добавить следующие команды в ваш проект Codeship. Эти команды, перечисленные ниже, являются лишь отправной точкой, и вы можете добавлять дополнительные команды по мере необходимости:

phpenv local 7.2
cp .env.testing .env
mkdir -p ./bootstrap/cache
composer install --no-interaction --prefer-dist
php artisan key:generate
nohup bash -c "php artisan serve 2>&1 &" && sleep 5
php artisan dusk

Heroku CI

Если вы хотите использовать Heroku CI для запуска тестов Dusk, вам нужно добавить следующий пакет сборки Google Chrome и сценарии в файл Heroku app.json:

{
  "environments": {
    "test": {
      "buildpacks": [
        { "url": "heroku/php" },
        { "url": "https://github.com/heroku/heroku-buildpack-google-chrome" }
      ],
      "scripts": {
        "test-setup": "cp .env.testing .env",
        "test": "nohup bash -c './vendor/laravel/dusk/bin/chromedriver-linux > /dev/null 2>&1 &' && nohup bash -c 'php artisan serve > /dev/null 2>&1 &' && php artisan dusk"
      }
    }
  }
}

Трэвис CI

Если вы хотите запустить свои тесты Dusk на Travis CI, вы должны использовать следующую конфигурацию .travis.yml. Поскольку Travis CI не является графической средой, вам нужно будет предпринять некоторые дополнительные шаги для запуска браузера Chrome. Кроме того, вы будете использовать php artisan serve для запуска встроенного веб-сервера PHP:

language: php
php:
  - 7.3
addons:
  chrome: stable
install:
  - cp .env.testing .env
  - travis_retry composer install --no-interaction --prefer-dist --no-suggest
  - php artisan key:generate
before_script:
  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
  - php artisan serve &
script:
  - php artisan dusk

Отрегулируйте значение APP_URL в вашем файле .env.testing:

APP_URL=http://127.0.0.1:8000