selenium WebDriver xpath和cssSelector选择元素的用法

中文文档： https://www.selenium.dev/documentation/zh-cn/

通过By.xpath() 和 By.cssSelector() 获取元素常用规则方法

public class XpathDemo {
    private static final String URL = "https://www.csdn.net/";

    private static WebDriver driver = null;

    /**
     * 初始化driver
     */
    private static void initDriver(){
        System.setProperty("webdriver.chrome.driver","C:\\Users\\szpc-01\\chromedriver.exe");
        driver = new ChromeDriver();
    }

    private static void quitDriver(){
        if(driver != null){
            //关闭webDriver
            driver.quit();
        }
    }


    private static void test(){
        driver.get(URL);
        /**
         *  By.xpath()
         *  1，/为绝对路径，从根节点开始 /html/body/div ，获取到html下body下的第一层div
         *  2, //为相对路径，可以省略前面节点，从任意位置开始匹配  //ul/li ： 获取ul下的li，绝对路径相对路径可混合使用
         *  3, 可以带属性选择 类似 $('input[name='age']')， div[@class='right_box'] class为right_box的div，可以指定多个属性 div[@class='right_box'][@id='id']。
         *  多个可以指定索引位置 ，初始从1开始 ， li[i] 获取第一个li
         */
        WebElement element = driver.findElement(By.xpath("//div[@class='right_box']/div/ul/li[1]"));//获取class为right_box的div的div的ul的第一个li
        //System.out.println("element Text: " + element.getText());
        //4, *标识，相当于只选择class为right_box 元素
        WebElement rightBoxElement = driver.findElement(By.xpath("//*[@class='right_box']"));//获取class为right_box的元素
        //System.out.println("rightBoxElement Text: " + rightBoxElement.getText());
        //5, xpath其他匹配关键字， contains包含，start-with以什么开头，Text 文本内容，
        WebElement containsElement = driver.findElement(By.xpath("//div[contains(@class,'right_box')]"));//获取class包含right_box的div
        //System.out.println("containsElement Text: " + containsElement.getText());

        /**
         * By.cssSelector() 使用
         * 1, #id选择，. class选择 相当于 $('#id')，$('.class'),By.cssSelector("#csdn-toolbar") By.cssSelector(".csdn-toolbar")
         * 2, > 定位下属元素 By.cssSelector("#csdn_container_tool > ul")
         * 3，可以指定属性值，可以加多个 By.cssSelector("#csdn_container_tool > ul[id='nav-left-menu'][calss='class']")
         * 4, 多个class可以通过 指定标签元素和多个class名称。div.classname1.classname2.classname3 , By.cssSelector("ul.pull-left.left-menu.clearfix")
         */
        //获取class为csdn-toolbar 的元素
        WebElement cssElement = driver.findElement(By.cssSelector(".csdn-toolbar"));
        System.out.println("cssElement Text：" + cssElement.getText());
        //获取id为csdn_container_tool下面的ul
        WebElement containerTool = driver.findElement(By.cssSelector("#csdn_container_tool>ul"));
        System.out.println("containerTool Text：" + containerTool.getText());
        //获取指定元素下属ul指定id，指定属性值可以加多个
        WebElement containerToolId = driver.findElement(By.cssSelector("#csdn_container_tool > ul[id='nav-left-menu']"));
        System.out.println("containerToolId Text：" + containerToolId.getText());
        //获取有多个class的元素 4
        WebElement classMore = driver.findElement(By.cssSelector("ul.pull-left.left-menu.clearfix"));
        System.out.println("classMore Text：" + classMore.getText());
    }

    public static void main(String[] args) {
        try {
            initDriver();
            test();
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            quitDriver();
        }
    }
}