Web UI自动化(selenium+java)

【郑大钱呀】【_公】【_众】【_号】，我们一起交流，一起学习。

文章目录

声明自动化开发环境搭建

环境准备浏览器驱动下载IDEA 创建Maven项目 selenium初探Selenium元素定位

By.id定位By.name定位By.className定位By.tagName定位By.linkText定位By.partiallinkText定位By.xpath定位By.cssSelector定位 特殊场景元素定位

iframe 表单页面定位多窗口切换警告框处理选择框处理上传文件 元素等待浏览器常用API常用事件获取页面元素信息常用方法获取页面的信息浏览器cookie操作调用Javascript代码获取窗口截图

声明

自动化测试请在允许授权的测试环境下进行,不可有任何危害网络安全的操作，如有违规操作，与本文无关。本文有不少内容，参考了CSDN的博主[Penny 要努力呀]，大家也可以直接去访问，写的很详细，很赞。

自动化开发环境搭建 环境准备

JDK安装并配置完成已经安装好浏览器，这里我们使用谷歌浏览器IDEA已经安装,直接官网下就可以，社区版免费

浏览器驱动下载

使用selenium需要下载一个WebDriver，要注意WebDriver的版本要与浏览器的版本类型一致，否则可能会出异常，我们使用的浏览器版本如下：

所以我们这里要去下载谷歌浏览器对应版本的WebDriver,地址如下：

https://www.selenium.dev/documentation/webdriver/getting_started/install_drivers/

选择和自己浏览器相符合的版本即可，这里我们选择mac这个版本，如果是其他系统就选择对应的版本：

如果你的操作系统是mac的话，需要在终端，将目录切换至driver所在的目录，执行如下命令：

xattr -d com.apple.quarantine chromedriver

否则会报如下的错误：MacOS无法打开“chromedriver”，因为无法验证开发者

IDEA 创建Maven项目

这里我们选择使用java语言来进行开发，selenium框架也有对应的python版本，在jar管理上，我们使用maven来管理,简单且方便。

我们使用IDEA创建一个maven项目吗，菜单路径：File->New->Project：

输入项目名和项目路径，点击Finish即可：

完成后截图如下：

我们打开pom.xml文件导入selenium和testNG的依赖包，完整的pom文件信息如下，主要关注依赖的坐标就可以了，添加完依赖包的坐标后，记得刷新一下，把包引进来，没有的，需要等待它下载完成，否则会报红：

    4.0.0

    org.example
    SeleniumStudy
    1.0-SNAPSHOT
    
        
            org.seleniumhq.selenium
            selenium-java
            4.1.2
        
        
            org.testng
            testng
            7.5
        
    

这里我们引入了两个依赖包，selenium包和testNG测试框架，引入testNG是方便我们测试。

selenium初探

我们先感受一下selenium的使用，这里我们使用的网站是我们自己开发在本地的项目，我们以最经典的登录为例，登录界面如下：

示例代码如下：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class SeleniumTest {
    @Test
    public void login(){
        // 设置驱动
        System.setProperty("webdriver.chrome.driver", "/Users/yangchen/MyProject/SeleniumStudy/driver/chromedriver");
        // 创建一个WebDriver对象
        WebDriver driver = new ChromeDriver();
        // 打开Web页面
        driver.get("http://localhost:8080/#/");
        // 通过ID定位到账户输入框
        driver.findElement(By.id("account")).sendKeys("123456@qq.com");
        driver.findElement(By.id("password")).sendKeys("123456");
        driver.findElement(By.id("login_btn")).click();

        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        driver.close();
    }
}

执行结果如下：

我们在上面实现了一个简单的登录功能，在这个程序中我们可以了解到：

@Test是一个TestNG测试框架中的注解，当方法被该注解标识，就可以单独运行，这样就不用写主方法了，后面我们单独开一期，系统的学习一下TestNG的框架Web UI自动化的创建思路，一般都是创建一个WebDriver对象，就相当于你拥有了一个浏览器，然后通过get()方法进入你要进行测试的网页，然后再通过元素定位去操作每个元素，这也就是我们通常说的找对象，当操作完成后，最后我们关闭浏览器，释放资源。基本上所有的UI自动化测试，很大的一部分工作内容就是在元素的定位。

Selenium元素定位 By.id定位

该方法即使通过Web元素的id属性来定义，一般情况下如果元素有id,我们就使用id定义，因为id一般都是不重复的，定位准确，我们上面的示例中的元素定义就采用的id定位。

前端页面代码

java定位代码

driver.findElement(By.id("password"));

By.name定位

该方法与By.id方法类似，只不是通过name属性来定位的,有的时候，前端元素，它没有id,但是它有name，这个时候我们就可以使用name来定位。

前端页面代码

java定位代码

driver.findElement(By.name("email"))

By.className定位

有的时候，他们既没有id也没有name,但是它有className，这个class不是编程中的类，它和id一样，也是前端元素的一种属性，与id不一样的是，id是唯一的，但是className是不唯一的。
前端页面代码

java定位代码

// 定位邮箱输入框
driver.findElement(By.className("el-input__inner")).sendKeys("123456@qq.com");
driver.findElement(By.id("password")).sendKeys("123456");
driver.findElement(By.id("login_btn")).click();

在我们的页面，有两个元素，邮箱输入框和密码输入框，他们的className都是一样的，但是为什么还是能准确定位到邮箱输入框，这是因为我们在找元素的时候，使用的是findElement方法，使用find_element()查找元素，但有多个元素满足条件时，他只取所有满足条件的元素列表的第1个元素,因为邮箱在第一个位置，所以就不会报错，但是如果用这个方法定位密码的输入框就会有问题。

此时就需要使用到find_element()方法了，该方法会返回一个List,也就是一个数组集合，此时我们可以通过使用List中get(int index)方法，来取到第二个元素完成元素定位，关键代码如下：

driver.findElement(By.className("el-input__inner")).sendKeys("123456@qq.com");
driver.findElements(By.className("el-input__inner")).get(1).sendKeys("123456");

By.tagName定位

该方法就是通过元素的标签定位，在html页面中有很多标签元素，如：input、div、span、button等等,因此我们也可以使用标签来定位，关键代码如下：
前端页面代码

java定位代码

driver.findElement(By.tagName("input")).sendKeys("123456@qq.com");
driver.findElements(By.tagName("input")).get(1).sendKeys("123456");

By.linkText定位

该方法就是专门用来定位超链接文本的，比如我们平台的数据解读说明超链接文本，页面如下：

，前端代码如下：

  数据解读说明

这里的登录按钮，我们就可以使用linkText定位到，关键代码如下：

driver.findElement(By.linkText("数据解读说明")).click();

By.partiallinkText定位

我们上面定位链接文字的时候，是精确匹配的，我们也可以使用模糊匹配，上面的数据解读说明，我们只需输入数据解读,也可以正常匹配到，关键代码如下：

driver.findElement(By.partiallinkText("数据解读")).click();

By.xpath定位

该定位方法也是用的比价多的，xpath全称为XML Path的简称，他可以通过xpath的语法，定位到页面的每个元素，具体的语法我们就不铺开了，我们讲下使用,现在的浏览器开发者工具很方便，我们可以获取到xpath路径,如下图：

相对路径写法
/
        //页面加载超时时间设置为 5s
        driver.manage().timeouts().pageLoadTimeout(5, TimeUnit.SECONDS);
        //定位对象时给 5 的时间, 如果 10s 内还定位不到则抛出异常
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        //异步脚本的超时时间设置成 5s
        driver.manage().timeouts().setscriptTimeout(5, TimeUnit.SECONDS);



        // 打开Web页面
        driver.get("http://localhost:8080/#/");
        // 通过ID定位到账户输入框

        try {
            //强制等待1s
            Thread.sleep(1000);
            driver.findElement(By.cssSelector("input[placeholder='请输入邮箱']")).sendKeys("123456@qq.com");
            //隐式等待
            //显式等待方式一， 针对某个元素等待
            WebDriverWait wait = new WebDriverWait(driver,10, 1);
            wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[@id="password"]"))).sendKeys("123456");
            //显式等待方式二
            wait.until(new ExpectedCondition(){
                @Override
                public WebElement apply(WebDriver text) {
                    return driver.findElement(By.xpath("//*[@id="password"]"));
                }
            }).sendKeys("123456");


            driver.findElement(By.id("login_btn")).click();
        } catch (InterruptedException e) {
            e.printStackTrace();
        }finally {
            driver.close();
        }

    }
}

浏览器常用API

maximize():浏览器窗口最大化minimize():浏览器窗口最小化fullscreen():浏览器全屏setSize():设置浏览器宽高back():模拟浏览器后退按钮forward():模拟浏览器前进按钮refresh():刷新流量器driver.close():关闭当前页面driver.quit():退出浏览器

示例代码如下：

import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class SeleniumTest {
    @Test
    public void login() throws InterruptedException {
        // 设置驱动
        System.setProperty("webdriver.chrome.driver", "/Users/yangchen/MyProject/SeleniumStudy/driver/chromedriver");
        // 创建一个WebDriver对象
        WebDriver driver = new ChromeDriver();
        // 打开Web页面
        driver.get("http://localhost:8080/#/");

        Thread.sleep(2000);
        // 窗口最小化
        driver.manage().window().minimize();
        Thread.sleep(2000);
        // 窗口最大化
        driver.manage().window().maximize();
        // 设置窗口指定大小
        Thread.sleep(2000);
        driver.manage().window().setSize(new Dimension(1000,600));

        Thread.sleep(2000);
        // 窗口全屏
        driver.manage().window().fullscreen();


        // 通过ID定位到账户输入框
        Thread.sleep(2000);
        driver.findElement(By.id("account")).sendKeys("123456@qq.com");
        Thread.sleep(2000);
        driver.findElement(By.id("password")).sendKeys("123456");
        driver.findElement(By.id("login_btn")).click();
        Thread.sleep(2000);
        // 刷新页面
        driver.navigate().refresh();
        // 浏览器后退
        driver.navigate().back();
        // 浏览器前进
        driver.navigate().forward();

        Thread.sleep(3000);

        driver.close();
    }
}

执行结果如下：

常用事件

我们在使用浏览器的时候，一般都会做一些操作，比如输入、点击、这些我们已经在登录的示例中，操作过了，除此之外，还有一些其他的事件方法，下面我们看一下常用的事件方法：

sendKeys(*value):该方法为输入方法，主要作用是模拟按键操作，比如输入文本、操作键盘上的某个按键、上传指定的文件。click():该方法为点击事件，可以点击按钮、超链接、图片、选择框等元素。clear():用于清空文本输入框中的内容submit():主要用于表单的提交
示例代码如下：

import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class SeleniumTest {
    @Test
    public void login() throws InterruptedException {
        // 设置驱动
        System.setProperty("webdriver.chrome.driver", "/Users/yangchen/MyProject/SeleniumStudy/driver/chromedriver");
        // 创建一个WebDriver对象
        WebDriver driver = new ChromeDriver();
        // 打开Web页面
        driver.get("http://localhost:8080/#/");

        // 通过ID定位到账户输入框
        Thread.sleep(1000);
        WebElement account=driver.findElement(By.id("account"));
        Thread.sleep(1000);
        account.sendKeys("123456sdfdsfsf@qq.com");
        Thread.sleep(1000);
        // 清空文本框
        account.clear();
        account.sendKeys("123456@qq.com");
        Thread.sleep(1000);
        driver.findElement(By.id("password")).sendKeys("123456");
        // 点击按钮
        driver.findElement(By.id("login_btn")).click();
        Thread.sleep(1000);
        driver.close();
    }
}

获取页面元素信息常用方法

getSize(): 返回元素的尺寸。getText(): 获取元素的文本。getAttribute(name): 获得属性值。isDisplayed(): 返回该元素是否用户可见。

import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
import org.testng.annotations.Test;

public class SeleniumTest {
    @Test
    public void login() throws InterruptedException {
        // 设置驱动
        System.setProperty("webdriver.chrome.driver", "/Users/yangchen/MyProject/SeleniumStudy/driver/chromedriver");
        // 创建一个WebDriver对象
        WebDriver driver = new ChromeDriver();
        // 打开Web页面
        driver.get("http://localhost:8080/#/");

        // 通过ID定位到账户输入框
        Thread.sleep(1000);
        WebElement account=driver.findElement(By.id("account"));
        Thread.sleep(1000);
        account.sendKeys("123456@qq.com");
        // 获取id属性的值
        System.out.println("id属性的值:"+account.getAttribute("id"));
        // 获取元素的尺寸
        System.out.println("元素的尺寸:"+account.getSize());
        // 获取元素的位置坐标
        System.out.println("元素的位置坐标:"+account.getLocation());
        // 获取该元素是否可见
        System.out.println("元素是否可见:"+account.isDisplayed());
        Thread.sleep(1000);
        driver.findElement(By.id("password")).sendKeys("123456");
        // 点击按钮
        driver.findElement(By.id("login_btn")).click();
        Thread.sleep(1000);
        driver.close();
    }
}

执行结果如下：

id属性的值:account
元素的尺寸:(360, 40)
元素的位置坐标:(570, 319)
元素是否可见:true

获取页面的信息

getTitle():用于获得当前页面的title。getCurrentUrl() : 用户获得当前页面的URL。getPageSource(): 获取页面代码getWindowHandle():获取当前页面句柄getWindowHandles():获取浏览器所有的句柄，返回的是一个集合
示例代码如下：

import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
import org.testng.annotations.Test;

public class SeleniumTest {
    @Test
    public void login() throws InterruptedException {
        // 设置驱动
        System.setProperty("webdriver.chrome.driver", "/Users/yangchen/MyProject/SeleniumStudy/driver/chromedriver");
        // 创建一个WebDriver对象
        WebDriver driver = new ChromeDriver();
        // 打开Web页面
        driver.get("http://localhost:8080/#/");
        System.out.println("当前URL:"+driver.getCurrentUrl());
        System.out.println("当前网站标题:"+driver.getTitle());
        System.out.println("当前前端代码:"+driver.getPageSource());
        System.out.println("当前页面句柄:"+driver.getWindowHandle());
        System.out.println("当前所有句柄:"+driver.getWindowHandles());
        Thread.sleep(1000);
        driver.close();
    }
}

执行结果如下：

信息: Found CDP implementation for version 98 of 97
当前URL:http://localhost:8080/#/
当前网站标题:invest-project
当前前端代码:中间省略
当前页面句柄:CDwindow-431B77CAF29AD1E24466BDA6E83DB971
当前所有句柄:[CDwindow-431B77CAF29AD1E24466BDA6E83DB971]

浏览器cookie操作

getcookies():获得所有cookie信息。getcookieNamed(String name): 返回字典的key为name的cookie信息。addcookie(cookie dict):添加cookie。“cookie_dict”指字典对象，必须有 name和value值。deletecookieNamed(String name):删除cookie信息。 “name”是要删除的cookie的名称； “optionsString” 是该cookie的选项，目前支持的选项包括“路径” ， “域” 。deleteAllcookies():删除所有cookie信息。

示例代码如下：

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

import java.util.Set;

public class SeleniumTest {
    @Test
    public void login() throws InterruptedException {
        // 设置驱动
        System.setProperty("webdriver.chrome.driver", "/Users/yangchen/MyProject/SeleniumStudy/driver/chromedriver");
        // 创建一个WebDriver对象
        WebDriver driver = new ChromeDriver();
        driver.get("http://localhost:8080/#/");


        // 设置cookies
        cookie c1 = new cookie("name", "tester");
        cookie c2 = new cookie("sex", "male");
        driver.manage().addcookie(c1);
        driver.manage().addcookie(c2);
        // 获取cookies
        Set cookies = driver.manage().getcookies();
        System.out.println(cookies);
        driver.quit();
    }
}

调用Javascript代码

WebDriver提供了executescript()方法来执行Javascript代码

前端代码

    
    


自动化测试


    内容1
    内容2
    内容3
    内容4
    内容5
    内容6

JAVA代码

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class SeleniumTest {
    @Test
    public void login() throws InterruptedException {
        // 设置驱动
        System.setProperty("webdriver.chrome.driver", "/Users/yangchen/MyProject/SeleniumStudy/driver/chromedriver");
        // 创建一个WebDriver对象
        WebDriver driver = new ChromeDriver();
        // 打开Web页面
        driver.get("http://localhost:63343/invest-project-ui/public/Test.html?_ijt=g0len3inipqu9bfu2vej06nd81&_ij_reload=RELOAD_ON_SAVE");
        Thread.sleep(2000);
        ((JavascriptExecutor)driver).executescript("window.scrollTo(100,450);");
        Thread.sleep(2000);
        driver.quit();
    }
}

执行结果

获取窗口截图

值得注意的是，这里FileUtils需要添加maven坐标，导入进来，坐标地址如下：

    commons-io
    commons-io
    2.6

JAVA代码如下

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

import java.io.File;
import java.io.IOException;
import org.apache.commons.io.FileUtils;
import java.util.Set;

public class SeleniumTest {
    @Test
    public void login() throws InterruptedException {
        // 设置驱动
        System.setProperty("webdriver.chrome.driver", "/Users/yangchen/MyProject/SeleniumStudy/driver/chromedriver");
        // 创建一个WebDriver对象
        WebDriver driver = new ChromeDriver();
        driver.get("http://localhost:8080/#/");
        File srcFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
        try {
            FileUtils.copyFile(srcFile,new File("./screenshot.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        driver.quit();
    }
}

截图如下：