SelectorsHub - 一款免费的下一代XPath和CSS选择器插件

wangmcn

发布于 2025-06-30 10:59:05

1.1K0

文章被收录于专栏：AllTests软件测试AllTests软件测试

1、前言

在Web开发与自动化测试领域，高效定位网页元素是关键环节，而XPath和CSS选择器作为主流定位工具，其编写效率与准确性直接影响开发和测试流程。

SelectorsHub作为一款备受推崇的浏览器插件，旨在通过智能化工具链简化选择器生成与维护，提升开发者和测试人员的工作效率。

2、简介

SelectorsHub是一款免费的下一代XPath和CSS选择器插件，适用于浏览器自动化测试、网页元素定位。帮助测试人员和开发者高效生成、验证XPath和CSS选择器，支持多浏览器（Chrome、Edge、FireFox、Safari、等其他主流浏览器）。

核心功能：

1、自动化选择器生成

一键生成XPath、CSS选择器、Playwright选择器。
支持相对定位（相对于其他元素生成XPath）。

2、复杂场景支持

Shadow DOM：处理嵌套Shadow DOM及Shadow DOM内的iframe。
iframe：自动生成嵌套iframe的XPath，支持iframe与Shadow DOM的嵌套组合。
动态元素：通过调试工具定位动态加载的下拉菜单、加载动画等元素。

3、智能编辑与错误处理

实时检测XPath和CSS选择器错误，显示具体错误信息。
支持SVG元素定位和选择器生成。

4、便捷操作

右键菜单直接复制选择器，无需打开插件界面。
保存常用选择器，支持编辑和删除。

官方网址：

https://selectorshub.com/selectorshub/

3、快速上手

从浏览器商店添加SelectorsHub插件，进行安装。

SelectorsHub插件安装成功，打开后，可进行XPath、CSS选择器等属性值获取。

示例，登录购物网站，输入用户名与密码，进行登录。

鼠标右键，获取用户名的相对XPath值为

//input[@id='user-name']

鼠标右键，获取用户名的绝对XPath值为

/html[1]/body[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/form[1]/div[1]/input[1]

或者直接打开SelectorsHub插件，进行元素值获取。

脚本代码：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
import time

def login_saucedemo(username, password):
    options = webdriver.ChromeOptions()
    options.add_argument("--start-maximized")

    driver = webdriver.Chrome(
        service=Service(ChromeDriverManager().install()),
        options=options
    )
    
    try:
        driver.get("https://www.saucedemo.com/")
        time.sleep() 
        
        username_field = driver.find_element(By.XPATH, "//input[@id='user-name']")
        password_field = driver.find_element(By.XPATH, "//input[@id='password']")
        login_button = driver.find_element(By.XPATH, "//input[@id='login-button']")
        
        username_field.send_keys(username)
        password_field.send_keys(password)
        
        login_button.click()
        time.sleep() 
        
        if"inventory.html"in driver.current_url:
            print("登录成功！")
        else:
            error_message = driver.find_element(By.CSS_SELECTOR, "h3[data-test='error']").text
            print(f"登录失败: {error_message}")
            
    except Exception as e:
        print(f"发生错误: {e}")
    finally:
        driver.quit()

if __name__ == "__main__":
    login_saucedemo("standard_user", "secret_sauce")

执行成功。