分享五个 Laravel Dusk 的使用技巧

Laravel

Laravel Dusk 是 Laravel 的一个表达性强、易于使用,且功能强大的浏览器自动化测试工具。通过 Dusk 可以以编程的方式测试 JavaScript 驱动的应用程序。在使用 Dusk 编写测试案例时,我经常遇到一些限制。现在我在本文中将这些情况以及如何克服分享给大家。

1. 填充隐藏字段

在测试某些 JS 组件时 (例如自动完成, 日期选择器等) ,可能需要编写动作模拟操作与这些组件交互。犹豫这些组件中的大多数最终都会将值保存到隐藏字段中。那么将值直接填写到隐藏字段中可能更加方便。这可以防止不稳定的测试,并确保我们不测试自己不拥有/控制的东西(第三方组件)。

尽管 Laravel Dusk 没有为我们提供类似 $browser->fillHidden($field, $value) 的方法, 但我们可以使用 Dusk Browser Macros 来实现。

//将以下代码添加到 serviceprovider.php 中

Browser::macro('fillHidden', function ($name , $value) {
    $this->script("document.getElementsByName('$name')[0].value = '$value'");
    return $this;
});

// 然后你可以像这样使用

/** @test */
public function fill_hidden_fields()
{
    $this->browse(function (Browser $browser) {
        $browser->visit('https://website.com/form')
                ->type('input.name', $name)
                ->type('input.address', $address)
                ->fillHidden('checkin_date', $date)
                ->click('#Submit')
                ->waitForText('Orders');
    });
}

2. 模拟 HTML 地理位置

我曾经不得不测试一个页面,该页面需要 HTML 网站提供地理位置,以便它可以显示一些结果。没有可用的直接模拟方法,因此我不得不重写getCurrentPosition 方法,该方法最终将由页面调用。

/** @test */
public function test_geo_location()
{
    $faker = Faker\Factory::create();
    $latitude = $faker->latitude;
    $longitude = $faker->longitude;

    $this->browse(function (Browser $browser) use($latitude, $longitude) {
        $browser->visit(new Homepage)
            ->assertOnPage();

        $browser->driver->executeScript(
            "window.navigator.geolocation.getCurrentPosition = function(onSuccessCallback) {
                var position = {
                    'coords': { 'latitude': {$latitude}, 'longitude': {$longitude} }
                };
                onSuccessCallback(position);
            }"
        );

        $browser->click('#geolocate-button')
                ->assertSee('Longitude: $longitude')
                ->assertSee('Latitude: Latitude')
    });
}

3. 使用XPath 选择器

有时,我会遇到无法使用 CSS 选择器来定位元素的情况。这些通常发生在动态表格中,或者在我无法修改的第三方js组件中。但是,Laravel Dusk 不直接支持XPath选择器,并且经常需要访问基础 WebDriver 实例。

$browser->driver->findElement( WebDriverBy::xpath("//table[@class='x-grid3-row-table']/tbody/tr/td/div/a[contains(text(),'$value')]") )
                ->click();

这种方法的唯一问题就是 [问题不大] 可能会终端 $browser 链式调用.*

4. 整页截屏

Laravel dusks 为我们提供了失败测试的屏幕截图,这对于了解测试失败的原因非常有帮助。但是,有时错误或有问题的元素可能在屏幕显示区域以外。

要在 Laravel Dusk 中创建完整的屏幕截图,我们必须在我们的 tests \ DuskTestCase.php 中创建一个captureFailuresFor() 方法,它将覆盖最初在 Laravel\Dusk\Concerns\ProvidesBrowser 中定义的一个方法。

protected function captureFailuresFor($browsers)
{
    $browsers->each(function (Browser $browser, $key) {
        $body = $browser->driver->findElement(WebDriverBy::tagName('body'));
        if (!empty($body)) {
            $currentSize = $body->getSize();
            $size = new WebDriverDimension($currentSize->getWidth(), $currentSize->getHeight());
            $browser->driver->manage()->window()->setSize($size);
        }
        $name = str_replace('\\', '_', get_class($this)).'_'.$this->getName(false);

        $browser->screenshot('failure-'.$name.'-'.$key);
    });
}

现在,无论何时我们调用 $browser->screenshot('$shotname') ,发生错误时我们都将获得完整的屏幕截图

5. 访问浏览器错误日志

这个没什么问题,只是我发现的一些有趣的东西。我们可以通过调用 $browser->driver->manage()->getLog(‘browser’) 来访问浏览器控制台日志。

这将在浏览器的控制台中返回一系列日志。例如,对于页面上没有 javascript 错误的测试而言,它可能很有用。

@test
public function no_browser_errors()
{
    $this->browse(function ($browser) {
        $this->assertEmpty($browser->driver->manage()->getLog('browser'));
    });
}

但是请注意,它不包含 console.log 调用的输出


结论

感谢您阅读本文,希望您有所收获。

感谢阅读

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://dev.to/barmmie_/5-useful-tricks-...

译文地址:https://learnku.com/laravel/t/44400

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 1

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!