章节十四、4-如何获取窗口的大小、如何把元素滚动到页面可见位置

一、如何用JavascriptExecutor获取浏览器窗口的大小

package basicweb;

import static org.junit.jupiter.api.Assertions.*;

import java.util.concurrent.TimeUnit;

import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

class WindowSize {
    
    WebDriver driver;
//    声明一个私有的JavascriptExecutor变量
    private JavascriptExecutor js;

    @BeforeEach
    void setUp() throws Exception {
        driver = new ChromeDriver();
//        把driver强制转换成JavascriptExecutor类型
        js = (JavascriptExecutor)driver;
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        driver.manage().window().maximize();
    }

    @Test
    void test() throws InterruptedException {
//        用Javascript的方式打开百度
        js.executeScript("window.location = 'https://www.baidu.com';");
//        用Long类型的变量来接收窗口的长和宽
//        长
        Long height = (Long)js.executeScript("return window.innerHeight;");
//        高
        Long width = (Long)js.executeScript("return window.innerWidth;");
        System.out.println("窗口的高度为："+height);
        System.out.println("窗口的宽度为："+width);

    }
    
    @AfterEach
    void tearDown() throws Exception {
        Thread.sleep(2000);
        driver.quit();
    }


}

运行结果为：

二、如何把元素滚动到页面可见位置

1、当我们打开页面时，默认是在页面的最顶部，其余的页面部分是被遮盖的，我们通过滑动鼠标齿轮才能够看到网页剩余的部分。

2、如果页面是被遮盖的，那么这个时候如果需要操作被遮盖的元素，就有可能会失败。（可能会失败）因此这种情况下我们就需要滚动页面元素到可见位置。

package basicweb;

import java.util.concurrent.TimeUnit;

import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
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;

class ScrollingElementIntoView {
    
    WebDriver driver;
//    声明一个私有的JavascriptExecutor变量
    private JavascriptExecutor js;

    @BeforeEach
    void setUp() throws Exception {
        driver = new ChromeDriver();
//        把driver强制转换成JavascriptExecutor类型
        js = (JavascriptExecutor)driver;
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        driver.manage().window().maximize();
    }

    @Test
    void test() throws InterruptedException {
        js.executeScript("window.location = 'https://p2p.migang.com/';");
        Thread.sleep(2000);

//        1、滚动到页面最底部
//        第一个数字代表水平位置，因为水平位置不变，因此设置为0
//        第一个数字代表垂直位置，因为需要滚动到页面最底部，所以垂直设置的数值要大于等于窗口垂直的实际数值
        js.executeScript("window.scrollBy(0, 1900);");
        Thread.sleep(2000);

//        2、滚回先前的位置（还未执行滚动到页面最底部的位置，也就是页面最顶部）
        js.executeScript("window.scrollBy(0,-1900);");
        Thread.sleep(2000);
        
//        3、滚动到要操作的元素位置
        WebElement element = driver.findElement(By.xpath("//h2/span[contains(text(),'媒体报道')]"));
//        arguments[0]不是数组，是一个arguments对象，arguments[0]返回的是第一个参数的实际值，0会被argument代替，argument就是上面element这个元素
//        我们要把这个元素提供给JavascriptExecutor
        js.executeScript("arguments[0].scrollIntoView(true);",element);
        Thread.sleep(2000);
        js.executeScript("window.scrollBy(0,-190);");
        Thread.sleep(2000);
        element.click();
    }
    
    @AfterEach
    void tearDown() throws Exception {
        Thread.sleep(2000);
        driver.quit();
    }
}

运行结果：

滚动到最底部---》最顶部---》滚动到“媒体报道”模块（但被导航条遮盖）---》滚动显示出“媒体报道”模块

在很多网站中，当我们刚进入一个网站页面，进行滑动时，导航条会固定在顶部显示，因此我们在代码中滚动到“媒体报道”模块后还需要向上滚动一点，这是因为滑动后顶部固定的导航条遮住了我们需要定位的元素。

如果有不明白的小伙伴可以加群“555191854”问我，群里都是软件行业的小伙伴相互一起学习。