【软件测试】_selenium自动化测试：定位元素与点击元素

目录

1. CSS定位与XPath定位

1.1 以百度搜索栏和百度一下按钮了解元素定位

1.2 关于CSS和XPath位置的获取方法

2. 以输出百度热搜词条文本为例使用元素定位

2.1 使用开发者页面获取目标元素的CSS或XPath位置

2.2 使用selenium编写自动测试代码

 2.3 查看自动测试结果

3. 关于页面元素的点击

1. CSS定位与XPath定位

1.1 以百度搜索栏和百度一下按钮了解元素定位

在专栏前一篇文章，以实现百度搜索Spring官网为例使用selenium进行自动化测试，详见下文：

【软件测试】_使用selenium进行自动化测试示例-CSDN博客文章浏览阅读236次，点赞2次，收藏3次。创建一个空项目用于进行selenium的自动化测试。https://blog.csdn.net/m0_63299495/article/details/145960999其中，使用的就是CSS定位：

1. driver是一个驱动对象，在本例中是ChromeDriver类型，使用驱动对象调用findElement用于在页面查找元素，返回值为WebElement类型；

可以先创建一个WebElement类型的对象用于接收findElement方法的返回值，再调用sendKeys或click方法。也可以采取上例中直接调用的方式；

2. 关于cssSelector方法的参数，#kw和#su，就是元素定位的CSS选择器使用方法。

打开https://baidu.com，使用F12快捷键打开开发者页面，在导航栏选择Elements：

可见搜索栏对应的input标签的id为#kw，百度以下对应的input标签的id为#su；

1.2 关于CSS和XPath位置的获取方法

以baidu.com的搜索栏为例，打开开发者工具，并在导航栏选中Element：

对于该搜索栏元素的CSS位置：#kw

对于该搜索栏元素的XPath位置：//*[@id="kw"]

2. 以输出百度热搜词条文本为例使用元素定位

了解页面元素的CSS定位与XPath定位后，现使用元素定位输出百度热搜词条文本。

2.1 使用开发者页面获取目标元素的CSS或XPath位置

在baidu.com首页打开开发者页面，对应百度热搜部分的前端代码：

以第一个li标签为例，右键点击获取该热搜词条的文本：

#hotsearch-content-wrapper > li:nth-child(1) > a > span.title-content-title

由于当前ul标签下存在多个li标签，故使用:nth-child(1)指明定位第一个li标签，

为了获取所有<li>标签对应的热搜词条的文本，将自动获取到的上述CSS位置删除:nth-child(1)，

即CSS位置为：#hotsearch-content-wrapper > li > a > span.title-content-title

2.2 使用selenium编写自动测试代码

由于Chrome驱动对象在测试过程中反复创建，故单独封装createDriver方法用于创建Chrome驱动对象并令其获取baidu.com的首页面。

编写测试类如下：

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

import java.util.List;

public class FirstTest {
    WebDriver driver=null;
    void createDriver() throws InterruptedException {
        // 1. 使用驱动打开浏览器
        WebDriverManager.chromedriver().setup();

        // 增加浏览器配置：创建驱动对象时强制指定允许访问所有链接
        ChromeOptions options=new ChromeOptions();
        options.addArguments("--remote-allow-origins=*");

        // 创建Chrome的驱动对象
        driver = new ChromeDriver(options);

        // 2. 输入网址：https://www.baidu.com
        driver.get("https://www.baidu.com");

    }

    // 定位元素：打印百度热搜的词条
    void test02() throws InterruptedException {
        createDriver();
        // 使用css选择器选中前端的一个元素：“百度热搜”
        driver.findElement(By.cssSelector("#s-hotsearch-wrapper > div"));
        // 使用xpath选中前端的一个元素：“百度热搜”
//        driver.findElement(By.xpath("//*[@id=\"s-hotsearch-wrapper\"]"));

        // 使用css选择器选中前端的多个元素，返回List<WebElement>
        List<WebElement> webElements=driver.findElements(By.cssSelector
                ("#hotsearch-content-wrapper > li > a > span.title-content-title"));
        for(int i=0;i<9;i++){
            System.out.println(webElements.get(i).getText());
        }
        Thread.sleep(10000);
        driver.quit();
    }
}

在调用类中对测试方法进行调用：

public class runCase {
    public static void main(String[] args) throws InterruptedException {
        FirstTest test=new FirstTest();
        test.test02();
    }
}

 2.3 查看自动测试结果

运行程序，baidu.com页面自动打开：

对应服务器日志：

可见使用CSS位置输出百度热搜词条文本成功；

3. 关于页面元素的点击

在使用selenium实现百度搜索栏搜索关键词并查询的示例中，也调用了WebElement对象的click方法，对于绝大多数页面元素，都可以进行点击，不限制于type为submit的input标签。

但对于类型为hidden的页面元素无法点击：

在baidu.com的开发者页面使用Ctrl+F查询一个类型为hidden的元素：

拷贝其CSS位置，使用selenium进行自动化查询，对其进行点击：

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

import java.util.List;

public class FirstTest {
    WebDriver driver=null;
    void createDriver() throws InterruptedException {
        // 1. 使用驱动打开浏览器
        WebDriverManager.chromedriver().setup();
        // 增加浏览器配置：创建驱动对象时强制指定允许访问所有链接
        ChromeOptions options=new ChromeOptions();
        options.addArguments("--remote-allow-origins=*");
        // 创建Chrome的驱动对象
        driver = new ChromeDriver(options);

        // 2. 输入网址：https://www.baidu.com
        driver.get("https://www.baidu.com");
    }

    void test03() throws InterruptedException {
        createDriver();
        WebElement element= driver.findElement(By.cssSelector("#form > input[type=hidden]:nth-child(1)"));
        element.click();
        driver.quit();
    }
}

调用test01方法，报错如下：

可见对于type为hidden的页面元素无法点击。