目录

引言

打开页面

查找页面元素

 输入文本 

点击操作

提交操作

清除文本 

获取文本和属性值

​编辑

选择多个元素

获取页面标题和URL

等待操作

浏览器操作

多层框架定位

窗口操作

屏幕截图

下拉框元素选择操作

​编辑

执行脚本 

文件上传 

---

引言

本文讲的所有API均基于谷歌浏览器驱动，即 ChromeDriver 类中的 API

WebDriver webDriver = new ChromeDriver();

打开页面

webDriver.get("https://www.baidu.com");

• 在 get 方法中输入想打开的网址，即可打开该网址页面

查找页面元素

//        找到百度搜索输入框
//        这是通过 CSS 选择器进行选择WebElement element = webDriver.findElement(By.cssSelector(".s_ipt"));
//        这是通过 xpath 选择器进行选择WebElement element = webDriver.findElement(By.xpath("//*[@id=\"kw\"]"));

CSS 选择语法(效率比 xpath 高)

id选择器：#id 

• By.cssSelector("#kw")

类选择器：.class

•  By.cssSelector(".s_ipt")

标签选择器：标签名

•   By.cssSelector("input")

后代选择器：父级选择器 子级选择器

•    By.cssSelector("form input")

XPath 选择语法

绝对路径：(不常用)

•  By.xpath("/html/head/title")

相对路径：

相对路径+索引

•   By.xpath("//form/span[1]/input")

相对路径+属性值

•   By.xpath("//input[@class="s_ipt"]")

相对路径+通配符

•    By.xpath("//*[@id="su"]")     

注意： ' * ' 符号 代表通配符 该示例表示任何一个标签其属性值 id 为 su 就会被选中

相对路径+文本匹配

•     By.xpath("//a[text()="新闻"]")     

简捷方法：

通过在浏览器页面 按 F12 进行下面操作，直接获取到任意标签的 CSS 路径、XPath 路径

 

 输入文本 

//        找到百度搜索输入框
//        这是通过 Css 选择器进行选择
//        WebElement element = webDriver.findElement(By.cssSelector(".s_ipt"));
//        这是通过 xpath 选择器进行选择WebElement element = webDriver.findElement(By.xpath("//*[@id=\"kw\"]"));
//        在搜索框中输入element.sendKeys("不孕不育");

• sendKeys 方法可对你选中的元素进行输入文本，但是仅适用于文本文字和内容可以编辑的元素

点击操作

//        找到百度一下按钮 并 点击webDriver.findElement(By.cssSelector("#su")).click();

• 定位到选中元素使用 click 方法 即为鼠标的点击操作

提交操作

//        点击百度一下按钮webDriver.findElement(By.cssSelector("#su")).submit();

• 定位到选中元素使用 submit 方法 即为按下 Enter 键效果一样
• 不推荐使用 submit 方法，click 方法能完全代替 submit 方法

注意：

• 选中元素在 from 标签中，使用 submit 方法 实现的效果和 click 方法 是一样的
• 选中元素放在 非 from 标签中，使用 submit() 会报错

清除文本 

//        清空百度搜索输入框中的数据webDriver.findElement(By.cssSelector("#kw")).clear();

• 定位到选中元素使用 clear 方法 即可清空其文本内容

获取文本和属性值

//        获取 选中标签的文本内容String text = webDriver.findElement(By.cssSelector("#hotsearch-content-wrapper > li:nth-child(3) > a > span.title-content-title")).getText();

• 定位到选中元素使用 getText 方法 即可获取到该元素的文本内容

 

//        获取 属性名为 value 的值String button_value = webDriver.findElement(By.cssSelector("#su")).getAttribute("value");

• 定位到选中元素使用 getAttribute 方法 即可获取到该元素 相应属性名 的值
• 除了 value 属性值 也可获取 id 属性值、class 属性值、type 属性值 等等

选择多个元素

示例：自动选择 checkbox 类型的元素

List<WebElement> webElements = webDriver.findElements(By.cssSelector("input"));for (int i = 0; i < webElements.size(); i++) {
//            如果每个元素 type 值等于 checkbox 进行点击if(webElements.get(i).getAttribute("type").equals("checkbox")){webElements.get(i).click();}}

• 使用 findElements 方法 获取到标签为 input 的元素集合

获取页面标题和URL

//        打开百度首页webDriver.get("https://www.baidu.com");
//        获取 get 方法所打开页面的 URLString url = webDriver.getCurrentUrl();
//        获取 get 方法所打开页面 标签为 title 的值String title = webDriver.getTitle();

• 使用 getCurrentUrl 方法 即可获取 get 方法打开页面的 URL 值
• 使用 getTitle 方法 即可获取 get 方法打开页面标签为 title 的值

等待操作

引言

• 程序执行速度远快于浏览器渲染速度
• 当自动化打开某一页面且需要选中该页面某一元素时
• 情况1：在选择元素时，页面渲染完成，成功选中该元素
• 情况2：在选中元素时，页面还未完全渲染（被选中元素还未加载出来），此时选择该元素时便会报错！
• 为了避免 情况2 的发生，我们可以引入等待操作

强制等待

//        这是强制等待 3秒sleep(3000); 

• 当自动化程序代码执行到 sleep 方法时，便会强制等待自定义时长，继而执行后面代码

隐式等待

//        创建驱动WebDriver webDriver = new ChromeDriver();
//        这是隐式等待 3天webDriver.manage().timeouts().implicitlyWait(3,TimeUnit.DAYS);
//        打开百度首页webDriver.get("https://www.baidu.com");
//        在搜索框输入"不孕不育" webDriver.findElement(By.cssSelector("#kw")).sendKeys("不孕不育");
//        点击百度一下webDriver.findElement(By.cssSelector("#su")).click();
//        退出webDriver.quit();

• 隐式等待贯穿于 webDriver 的整个生命周期
• 在自定义时间内反复判断元素是否存在，直到元素能被找到，便停止等待
• 超出自定义时间还未找到，便会报错
• TimeUnit.DAYS 代表时间单位 天 ，也有秒、小时、分钟等单位，可自行选择

显式等待

//        显示等待 3秒WebDriverWait wait = new WebDriverWait(webDriver,3000);
//        等待至该元素被选择，才继续执行后面代码wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("#bottom_layer > div > p:nth-child(8)")));
//        等待至是否可以判断该元素的 title 标签为 ”百度一下，你就知道“ 才继续执行后面代码wait.until(ExpectedConditions.titleIs("百度一下，你就知道"));

• 显式等待仅作用于某一条代码
• 在自定义时间内判断 该条代码 元素是否存在，直到元素能被找到，便停止等待
• 超出自定义时间还未找到，便会报错
• 使用 until 方法，来自定义要进行显示等待的代码

浏览器操作

前进操作

//        浏览器前进webDriver.navigate().forward();

后退操作

//        浏览器后退webDriver.navigate().back();

刷新操作

//        浏览器刷新webDriver.navigate().refresh();

多层框架定位

 

//        先进行框架的定位webDriver.switchTo().frame("f1");
//        再进行元素的选择webDriver.findElement(By.cssSelector("body > div > div > a")).click();

• 在含有多个框架的页面中，我们必须要先对框架进行定位，才能进行相应的元素选择

窗口操作

设置窗口大小

//        浏览器最大化webDriver.manage().window().maximize();
//        浏览器全屏webDriver.manage().window().fullscreen();
//        浏览器窗口设置指定大小 （宽 , 高）webDriver.manage().window().setSize(new Dimension(600,1000));

窗口切换

• 操作窗口是指被 自动化代码 操作的窗口
• 最初的操作窗口，是使用 get 方法 打开的窗口
• 在操作窗口中打开新窗口，该新窗口不会变为操作窗口
• 我们需用到窗口切换，来切换我们的操作窗口，使新窗口成为被 自动化代码 操作的窗口
• 当浏览器每打开一个窗口时，会自动给每个窗口进行标识，也被称为 句柄
• 句柄 是窗口切换操作的关键所在

//        通过 getWindowHandles 获取所有的窗口句柄
//        通过 getWindowHandle 获取 get 方法所打开的页面窗口句柄System.out.println(webDriver.getWindowHandle());Set<String> handles = webDriver.getWindowHandles();String target_handle = "";
//        这里的循环是为了获取到 新窗口 对应的句柄for (String handle:handles) {target_handle = handle;System.out.println("target_handle = " + target_handle);}webDriver.switchTo().window(target_handle);

屏幕截图

1.在 pom.xml 中引入相应依赖

<!-- https://mvnrepository.com/artifact/commons-io/commons-io --><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.11.0</version></dependency>

2.截图操作代码

//        屏幕截图操作 OutputType.FILE 表示以文件的形式保存File file = ((TakesScreenshot)webDriver).getScreenshotAs(OutputType.FILE);
//        把文件存入 自定义路径下 没输入路径时，便是当前项目路径下FileUtils.copyFile(file,new File("E://20230826test.png"));

• 在保存截图的时候我们可以为文件名加入时间戳，使得每次所得截图的文件名是动态的、不相同的，从而可以避免程序多次生成的截图因文件同名而被覆盖
• 在有弹窗的情况下使用截图会报错

//        alert 弹窗取消webDriver.switchTo().alert().dismiss();
//        alert 弹窗中加入小林webDriver.switchTo().alert().sendKeys("小林");
//        alert 弹窗确定webDriver.switchTo().alert().accept();

• 在提示弹窗进行输入文本的输入，在页面上是看不到输入文本的执行效果

下拉框元素选择操作

        WebElement element = webDriver.findElement(By.cssSelector("#ShippingMethod"));Select select = new Select(element);
//        根据下标进行选择 下标从 0 开始select.selectByIndex(3);
//        直接根据值进行选择select.selectByValue("12.51");

• 先创建出一个 select 对象
• selectByIndex 方法为下标选择法
• selectByValue 方法为值选择法

执行脚本 

//        浏览器滚动条滚动((JavascriptExecutor)webDriver).executeScript("document.documentElement.scrollTop=10000");

• 先将 webDriver 转化为 JavascriptExecutor 类型
• 再在 executeScript 方法填入 想执行的 JavaScript 代码，从而进行相应的页面操作

文件上传 

//    先选中 文件上传按钮 再进行上传文件 webDriver.findElement(By.cssSelector("input")).sendKeys("E:\\test.jpg");

• 在 sendKeys 方法中填入 想要上传文件的 绝对路径