【简码短链】使用Selenium实现UI自动化测试

1.环境准备

Chrome浏览器版本为版本 129.0.6668.90（正式版本）（64 位）
在这里插入图片描述

129版本的Chrome浏览器的驱动,将webdriver放到jdk所在的bin目录下
在命令行中输入:chromedriver验证是否成功
在这里插入图片描述
打开IDEA,创建Maven项目,在pom.xml导入所需要的依赖包

    <dependencies>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>4.22.0</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.16.1</version>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter</artifactId>
            <version>5.10.2</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.platform</groupId>
            <artifactId>junit-platform-suite</artifactId>
            <version>1.8.2</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

在这里插入图片描述
创建common包用于存在公共的类/方法
Tests目录下用来存放测试用例

对每个页面进行测试时都需要先创建浏览器驱动对象,因此可以把创建浏览器驱动的方法放到common下面,并使用单例模式保证浏览器驱动只被创建一次
添加隐式等待,确保页面元素能够渲染出来

public class AutoTestUtils {
    public ChromeDriver driver;
    // 获取驱动对象
    public ChromeDriver getChromeDriver(){
        if (driver == null){
            driver = new ChromeDriver();
            driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        }
        return driver;
    }
}

添加屏幕截图功能

    public static List<String> getTime(){
        SimpleDateFormat sim1 = new SimpleDateFormat("yyyyMMdd-HHmmssSS");
        String filename = sim1.format(System.currentTimeMillis());

        SimpleDateFormat sim2 = new SimpleDateFormat("yyyyMMdd");
        String dirname = sim2.format(System.currentTimeMillis());
        List<String> list = new ArrayList<>();
        list.add(dirname);
        list.add(filename);
        return list;
    }
    public static void getScreenShor(String str) throws IOException {
        List<String> list = getTime();
        String filename = "./src/test/java/com/hyacinth/shortlinkAutoTest/"+list.get(0)+"/"+str+"_"+list.get(1)+".png";
        File srcfile = driver.getScreenshotAs(OutputType.FILE);
        FileUtils.copyFile(srcfile,new File(filename));
    }

登录页面

测试用例页面如下:
在这里插入图片描述
首先在登录页面测试类中定义一个浏览器驱动对象,用来获取浏览器驱动

    public static ChromeDriver driver = getChromeDriver();

因为每次都需要打开登录页面,因此定义一个方法打开登录页面,并使用@BeforeAll注解,让测试每次开始前都打开登录页面,通过调用get方法，可以导航到网页，为接下来的测试准备页面环境。

    @BeforeAll
    static void baseContor(){
        driver.get("http://www.shorturl.cloud/login");
    }

正常登录的测试:

     @ParameterizedTest
     @CsvSource({"test,test1234","admin,admin123456"})
    void loginSuccess(String username,String password) throws InterruptedException {
         driver.findElement(By.xpath("//*[@id=\"el-id-7439-8\"]")).clear();
         driver.findElement(By.xpath("//*[@id=\"el-id-7439-8\"]")).sendKeys(username);

         driver.findElement(By.xpath("//*[@id=\"el-id-7439-9\"]")).clear();
         driver.findElement(By.xpath("//*[@id=\"el-id-7439-9\"]")).sendKeys(password);
         driver.findElement(By.cssSelector("#app > div.login-page > div.login-box > div.logon > form > div.btn-gourp > div:nth-child(2) > button > span")).click();
         // 对登录结果进行检测
        driver.findElement(By.xpath("//*[@id=\"app\"]/div/section/main/div/div/div[1]/div[1]/div[1]"));
        driver.navigate().back();
    }

异常登录测试:

    @ParameterizedTest
    @CsvSource({"admin,123123123","user","admin123456",",admin123456","admin,"})
    void loginFail(String username,String password){
        driver.findElement(By.xpath("//*[@id=\"el-id-7439-8\"]")).clear();
        driver.findElement(By.xpath("//*[@id=\"el-id-7439-8\"]")).sendKeys(username);

        driver.findElement(By.xpath("//*[@id=\"el-id-7439-9\"]")).clear();
        driver.findElement(By.xpath("//*[@id=\"el-id-7439-9\"]")).sendKeys(password);
        driver.findElement(By.cssSelector("#app > div.login-page > div.login-box > div.logon > form > div.btn-gourp > div:nth-child(2) > button > span")).click();
        // 对登录结果进行检测
        driver.findElement(By.cssSelector("#app > div.login-page > div.login-box > div.logon > form > div.btn-gourp > div:nth-child(2) > button > span"));
        driver.navigate().refresh();
    }

注册页面

注册页面测试用例如下:
在这里插入图片描述

注册页面同样要先进入登录页面,使用@BeforeAll注解,让测试每次开始前都打开登录页面,通过调用get方法，为接下来的测试准备页面环境。

    @BeforeAll
    static void baseContor(){
        driver.get("http://www.shorturl.cloud");
    }

检查注册页面正常显示

    @Test
    void loginPageLoadRight() throws InterruptedException {
        // 检查 简码短链标题
        driver.findElement(By.xpath("//*[@id=\"app\"]/div[1]/h1"));
        // 检查 用户注册文本
        driver.findElement(By.cssSelector("#app > div.login-page > div.login-box > div.register > h2"));
        // 检查 登录按钮
        driver.findElement(By.cssSelector("#app > div.login-page > div.login-box > div.register > form > div.btn-gourp > div:nth-child(2) > button"));
    }

正常注册

    @ParameterizedTest
    @CsvSource({"user1,user1@qq.com,13453498765,user1,123123123","user2,user2@qq.com,13456498765,,123123123"})
    void registerSuccessTest(String username, String email, String phone, String name, String password){
        driver.findElement(By.cssSelector("#app > div.login-page > div.login-box > div.register > form > div.el-form-item.is-error.is-required.asterisk-left > div > div.el-input.el-input-group.el-input-group--prepend.el-input--suffix > div.el-input__wrapper")).sendKeys(username);
        driver.findElement(By.cssSelector("#email")).clear();
        driver.findElement(By.cssSelector("#email")).sendKeys(email);

        driver.findElement(By.cssSelector("#phone")).clear();
        driver.findElement(By.cssSelector("#phone")).sendKeys(phone);

        driver.findElement(By.cssSelector("#name")).clear();
        driver.findElement(By.cssSelector("#name")).sendKeys(name);

        driver.findElement(By.cssSelector("#phone")).clear();
        driver.findElement(By.cssSelector("#phone")).sendKeys(phone);
        // 点击注册
        driver.findElement(By.cssSelector("#app > div.login-page > div.login-box > div.register > form > div.btn-gourp > div:nth-child(2) > button")).click();
        // 验证注册是否成功
        driver.findElement(By.xpath("//*[@id=\"app\"]/div/section/main/div/div/div[2]/div/div[1]/div/button[1]"));
        // 返回
        driver.navigate().back();
    }

异常注册
由于这里测试的数据比较多,可以使用csv文件存放测试数据,使用@CsvFileSource注解来读取文件中的内容

    @ParameterizedTest
    @CsvFileSource(files = "C:\\Users\\wqe\\Desktop\\example.csv")
    void registerLoginFailTest(String username, String email, String phone, String name, String password){
        driver.findElement(By.cssSelector("#app > div.login-page > div.login-box > div.register > form > div.el-form-item.is-error.is-required.asterisk-left > div > div.el-input.el-input-group.el-input-group--prepend.el-input--suffix > div.el-input__wrapper")).sendKeys(username);
        driver.findElement(By.cssSelector("#email")).clear();
        driver.findElement(By.cssSelector("#email")).sendKeys(email);

        driver.findElement(By.cssSelector("#phone")).clear();
        driver.findElement(By.cssSelector("#phone")).sendKeys(phone);

        driver.findElement(By.cssSelector("#name")).clear();
        driver.findElement(By.cssSelector("#name")).sendKeys(name);

        driver.findElement(By.cssSelector("#phone")).clear();
        driver.findElement(By.cssSelector("#phone")).sendKeys(phone);
        // 点击注册
        driver.findElement(By.cssSelector("#app > div.login-page > div.login-box > div.register > form > div.btn-gourp > div:nth-child(2) > button")).click();
        // 验证注册是否成功
        driver.findElement(By.cssSelector("#app > div.login-page > div.login-box > div.register > h2"));
    }

主页面测试

因为进入主页需要登录,所以这里的测试用例执行要在登录之后.
每次测试前都要进行主页之后,和前面一样使用@BeforeAll注解进行设置

    public static ChromeDriver driver = getChromeDriver();
    @BeforeAll
    static void baseContor(){
        driver.get("http://shorturl.cloud/home/space");
    }

主页正常显示:

    @Test
    void HomePageLoadRight(){
        driver.findElement(By.cssSelector("#app > div > section > header > div > div.logo"));
        driver.findElement(By.xpath("//*[@id=\"app\"]/div/section/main/div/div/div[1]/div[1]/div[1]"));
        driver.findElement(By.xpath("//*[@id=\"app\"]/div/section/main/div/div/div[1]/div[2]/div"));
    }