分析五个Laravel Dusk的使用技巧

吾爱主题阅读：120 2021-11-18 14:38:00 评论：0

1. 填充隐藏字段

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 //将以下代码添加到 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 方法，该方法最终将由页面调用。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 /** @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 实例。

1 2	`$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 中定义的一个方法。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 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 错误的测试而言，它可能很有用。

1 2 3 4 5 6 7 @test public function no_browser_errors() { $this ->browse( function ( $browser ) { $this ->assertEmpty( $browser ->driver->manage()->getLog( 'browser' )); }); }