laravel Dusk 是 Laravel 的一個表達性強、易于使用，且功能強大的瀏覽器自動化測試工具。通過 Dusk 可以以編程的方式測試 JavaScript 驅動的應用程序。在使用 Dusk 編寫測試案例時，我經常遇到一些限制?，F在我在本文中將這些情況以及如何克服分享給大家。
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?=?FakerFactory::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() 方法，它將覆蓋最初在 LaravelDuskConcernsProvidesBrowser 中定義的一個方法。
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 調用的輸出
結論
感謝您閱讀本文，希望您有所收獲。
感謝閱讀
