如何向下滚动浏览器页面 - Laravel Dusk(浏览器测试)
How to scroll down browser page - Laravel Dusk (Browser Tests)
我正在使用[浏览器测试 (Laravel Dusk)][1]
准备测试
[1]: https://laravel.com/docs/5.4/dusk 我需要在向下滚动浏览器页面之前用力点击看不到的元素。如何在 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)
;
});
}
}
如果您知道必须滚动多远,您可以尝试:
$browser->driver->executeScript('window.scrollTo(0, 500);');
根据@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;
});
}
您现在可以使用 script
方法:
$browser->script('window.scrollTo(0, 500);');
现在支持 laravel/dusk 6.0
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 实施
扩展浏览器class并添加以下方法:
public function scrollTo($elementSelector)
{
return $this->driver->executeScript("document.querySelector('$elementSelector').scrollIntoView()");
}
然后您可以滚动到一个选择器:
$browser->scrollTo("#elementId");
如果需要扫过整个页面可以使用下面的代码
$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]');
});
我正在使用[浏览器测试 (Laravel Dusk)][1]
准备测试[1]: https://laravel.com/docs/5.4/dusk 我需要在向下滚动浏览器页面之前用力点击看不到的元素。如何在 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)
;
});
}
}
如果您知道必须滚动多远,您可以尝试:
$browser->driver->executeScript('window.scrollTo(0, 500);');
根据@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;
});
}
您现在可以使用 script
方法:
$browser->script('window.scrollTo(0, 500);');
现在支持 laravel/dusk 6.0
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 实施
扩展浏览器class并添加以下方法:
public function scrollTo($elementSelector)
{
return $this->driver->executeScript("document.querySelector('$elementSelector').scrollIntoView()");
}
然后您可以滚动到一个选择器:
$browser->scrollTo("#elementId");
如果需要扫过整个页面可以使用下面的代码
$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]');
});