什么是滚动条？
滚动条允许在当前页面滚动不适合屏幕可见区域时沿水平或垂直方向在屏幕周围移动。它是用来上下移动窗口的。
Selenium Webdriver在操作DOM时不需要滚动来执行操作。但在这种情况下，滚动可能是必要的。
滚动条有两种类型：水平滚动条和垂直滚动条，如下图所示。
在Selenium中滚动
要使用Selenium滚动，可以使用JavaScriptExecutor接口，该接口通过Selenium Webdriver帮助执行JavaScript方法
了解有关JavaScriptExecutor的更多信息
语法：
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript(Script,Arguments);
- 脚本-这是需要执行的JavaScript。
- 参数-它是脚本的参数。这是可选的。
用于向下滚动页面的Selenium脚本
让我们看一下使用Selenium Webdriver向下滚动网页的3个场景：
- 场景1：逐个像素向下滚动网页。
- 场景2：根据元素的可见性向下滚动网页。
- 场景3：向下滚动页面底部的网页。
- 场景4：网页上的水平滚动。
场景1：逐个像素向下滚动网页。
Selenium脚本
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;
public class ScrollByPixel {
WebDriver driver;
@Test
public void ByPixel() {
System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe");
driver = new ChromeDriver();
JavascriptExecutor js = (JavascriptExecutor) driver;
// Launch the application
driver.get("http://www.itxiaonv.com/test/guru99home/");
//To maximize the window. This code may not work with Selenium 3 jars. If script fails you can remove the line below
driver.manage().window().maximize();
// This will scroll down the page by 1000 pixel vertical
js.executeScript("window.scrollBy(0,1000)");
}
}
脚本描述：在上面的代码中，我们首先在Chrome浏览器中启动给定的URL。javascript方法 ScrollBy() 将网页滚动到特定像素数。
ScrollBy() 方法的语法为：
executeScript("window.scrollBy(x-pixels,y-pixels)");
X-像素是x轴上的数字，如果number为正，则向左移动，如果number为负，则向右移动。y-像素是y轴上的数字，如果number为正，则向下移动，如果number为负数，则向上移动。
示例：
js.executeScript("window.scrollBy(0,1000)"); //Scroll vertically down by 1000 pixels
输出分析：以下是执行上述脚本时的输出。
场景2：根据元素的可见性向下滚动网页。
Selenium脚本
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;
public class ScrollByVisibleElement {
WebDriver driver;
@Test
public void ByVisibleElement() {
System.setProperty("webdriver.chrome.driver", "G://chromedriver.exe");
driver = new ChromeDriver();
JavascriptExecutor js = (JavascriptExecutor) driver;
//Launch the application
driver.get("http://www.itxiaonv.com/test/guru99home/");
//Find element by link text and store in variable "Element"
WebElement Element = driver.findElement(By.linkText("Linux"));
//This will scroll the page till the element is found
js.executeScript("arguments[0].scrollIntoView();", Element);
}
}
脚本描述：在上面的代码中，我们首先在Chrome浏览器中启动给定的url。javascript方法 scrollIntoView() 滚动页面，直到提到的元素完全显示：
js.executeScript("arguments[0].scrollIntoView();",Element );
“Arguments[0]”表示从0开始的页面的第一个索引。
其中“元素”是网页上的定位符。
输出分析：以下是执行上述脚本时的输出。
场景3：向下滚动页面底部的网页。
Selenium脚本
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;
public class ScrollByPage {
WebDriver driver;
@Test
public void ByPage() {
System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe");
driver = new ChromeDriver();
JavascriptExecutor js = (JavascriptExecutor) driver;
// Launch the application
driver.get("http://www.itxiaonv.com/test/guru99home/");
//This will scroll the web page till end.
js.executeScript("window.scrollTo(0, document.body.scrollHeight)");
}
}
脚本描述：在上面的代码中，我们首先在Chrome浏览器中启动给定的url。javascript方法 scrollTo() 将滚动到页面末尾。
js.executeScript("window.scrollTo(0, document.body.scrollHeight)");
“document ent.body.scroll Height”返回正文的完整高度，即网页。
输出分析：以下是执行上述脚本时的输出。
场景4：网页上的水平滚动。
Selenium脚本
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;
public class HorizontalScroll {
WebDriver driver;
@Test
public void ScrollHorizontally() {
System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe");
driver = new ChromeDriver();
JavascriptExecutor js = (JavascriptExecutor) driver;
// Launch the application
driver.get("http://www.itxiaonv.com/test/guru99home/scrolling.html");
WebElement Element = driver.findElement(By.linkText("VBScript"));
//This will scroll the page Horizontally till the element is found
js.executeScript("arguments[0].scrollIntoView();", Element);
}
}
脚本描述：在上面的代码中，我们首先在Chrome浏览器中启动给定的url。接下来，javascript方法 scrollIntoView() 滚动页面，直到提到的元素完全显示：
js.executeScript("arguments[0].scrollIntoView();",Element );
输出分析：以下是执行上述脚本时的输出。
总结
- 在上面的教程中，我们通过不同的场景演示了网页的滚动。
- 在第一个场景中，我们逐个像素显示了向下滚动。
- 在第二个场景中，我们显示了页面向下滚动，直到元素可见。
- 在第三个场景中，我们在页面底部显示了页面的向下滚动。
- 在第四个场景中，演示了网页上的水平滚动。
