How to scroll down browser page - Laravel Dusk (Browser Tests)

Question

I'm preparing tests using [Browser Tests (Laravel Dusk)][1]

[1]: https://laravel.com/docs/5.4/dusk and I need force click to element which is not see before scroll down browser page. How can define in dusk test to click unsee element or scroll browser page ?

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)
                ;
        });
    }
}

score 14 · Answer 1 · answered Apr 30 '17 at 00:39

14

You can use now the script method:

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

answered Apr 30 '17 at 00:39

BrianEDT

141
1
3

score 13 · Accepted Answer · answered Mar 27 '17 at 13:50

Based on the answer from @james

you can execute scripts, but these cannot be chained. So you can just execute the scroll before the click occurs.

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;
    });
}

score 4 · Answer 3 · answered Mar 26 '17 at 12:57

4

If you know how far you have to scroll, you could try:

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

answered Mar 26 '17 at 12:57

James I

198
1
14

I am not sure how to use it. When I try I receive error: `Error: Call to a member function pause() on null` – Tomasz Mar 27 '17 at 08:58

Joel Harkes · Answer 4 · 2020-04-15T14:49:23.407

1

Now supported by laravel/dusk 6.0

the implementation they use: 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 implementation

Extend the browser class and add the following method:

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

then you can scroll to a selector:

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

edited Apr 15 '20 at 14:49

answered Nov 28 '19 at 13:26

Joel Harkes

10,975
3
46
65

Now available in the core of Dusk albeit a slightly different method of scrolling: https://github.com/laravel/dusk/blob/5eb7fa57346fd39b3b38e4c4bdd5ca177d1ac711/src/Browser.php#L282-L297 – u01jmg3 Apr 15 '20 at 13:29
Thanks for notification – Joel Harkes Apr 15 '20 at 14:48

score 1 · Answer 5 · answered May 31 '21 at 05:06

If you need to sweep over the entire page you can use the following codes

$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]');  
    
   });

score 0 · Answer 6 · answered Dec 26 '22 at 07:30

0

I think it's better to use Laravel guides, You should use the `` like below:

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

and laravel documentaion link Laravel 9 doc

answered Dec 26 '22 at 07:30

ahmad-mohammadi

157
2
5

How to scroll down browser page - Laravel Dusk (Browser Tests)

6 Answers6

Now supported by laravel/dusk 6.0

DIY implementation