如何向下滾動瀏覽器頁面 - Laravel Dusk（瀏覽器測試）

Question

我正在使用 [Browser Tests (Laravel Dusk)][1] 准備測試

[1]: https://laravel.com/docs/5.4/dusk並且我需要在向下滾動瀏覽器頁面之前用力點擊看不到的元素。 如何在黃昏測試中定義點擊不可見元素或滾動瀏覽器頁面？

class SliderTest extends DuskTestCase
{
    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function testExample()
    {
        $this->browse(function ($browser) {
            $browser
                    ->visit('http://localhost:8000/admin/login')                    
                    ->click('label[for=test_1]')
                    ->pause(500)
                ;
        });
    }
}

Answer 1

基於@james的回答

您可以執行腳本，但不能鏈接這些腳本。 所以你可以在點擊發生之前執行滾動。

public function testExample()
{
    $this->browse(function ($browser) {
        $browser
                ->visit('http://localhost:8000/admin/login')
                ->driver->executeScript('window.scrollTo(0, 500);'); 
                // can't chain methods after this
        $browser                    
                ->click('label[for=test_1]')
                ->pause(500) //you can keep chaining here;
    });
}

Answer 2

您現在可以使用script方法：

$browser->script('window.scrollTo(0, 500);');

Answer 3

如果您知道必須滾動多遠，可以嘗試：

$browser->driver->executeScript('window.scrollTo(0, 500);');

Answer 4

現在由 laravel/dusk 6.0 支持

他們使用的實現： https : //github.com/laravel/dusk/blob/5eb7fa57346fd39b3b38e4c4bdd5ca177d1ac711/src/Browser.php#L282-L297

public function scrollTo($selector)
{
    $this->ensurejQueryIsAvailable();

    $selector = $this->resolver->format($selector);

    $this->driver->executeScript("jQuery(\"html, body\").animate({scrollTop: jQuery(\"$selector\").offset().top}, 0);");

    return $this;
}

DIY實施

擴展瀏覽器類並添加以下方法：

public function scrollTo($elementSelector)
{
   return $this->driver->executeScript("document.querySelector('$elementSelector').scrollIntoView()");
}

然后你可以滾動到一個選擇器：

$browser->scrollTo("#elementId");

Answer 5

如果需要掃過整個頁面可以使用以下代碼

$this->browse(function(Browser $browser){
    $browser->visit('http://localhost:8000/admin/login')
    
    ->script('window.scrollTo(0,document.body.scrollHeight)');

   //The above returns an array, but not the $browser object. Therefore, the output cannot be chained.

    $browser->pause(500)
    ->click('label[for=test_1]');  
    
   });

Answer 6

我認為最好使用 Laravel 指南，您應該使用如下所示的``：

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

和 laravel 文檔鏈接Laravel 9 文檔