Selenium(一)：元素定位

 

 

一、Selenium 8种定位方式

baidu.html

<form id="form" name="f" action="/s" class="fm">
    <span class="bg s_ipt_wr quickdelete-wrap">
        <span class="soutu-btn"> </span>
        <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
        <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

1、通过id属性值定位

HTML 规定 id 属性在 HTML 文档中必须是唯一

driver.find_element_by_id('kw')

2、通过name属性值定位

driver.find_element_by_name('wd')

3、通过class属性值定位

driver.find_element_by_class_name('s_ipt')

4、通过tag定位（标签名定位）

driver.find_element_by_tag_name('input')

5、通过文本链接定位

link.html

<a href="http://news.baidu.com" name="tj_trnews" class="mnav">新闻</a>

driver.find_element_by_link_text('新闻')

6、通过文本链接模糊匹配进行定位

driver.find_element_by_partial_link_text('新')

7、Xpath定位

• 绝对定位
• 相对定位

绝对定位百度搜索框

driver.find_element_by_xpath('/html/body/div[1]/div[1]/div/div[1]/div/form/span[1]/input')

相对定位

表达式	描述
/	从根节点选取。
//	从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置。
@	选取属性。

7.1、使用标签+元素属性定位

# //标签名[@属性名='属性值']
driver.find_element_by_xpath("//input[@id='kw']")

7.2、使用标签层级+标签+元素属性定位

# //标签名[@属性名='属性值']/标签名
driver.find_element_by_xpath("//span[@class='bg s_ipt_wr quickdelete-wrap']/input")
driver.find_element_by_xpath("//span[@class='bg s_ipt_wr quickdelete-wrap']/input[2]")
driver.find_element_by_xpath("//form[@id='form']/span/span/input[2]")

7.3、Xpath 多属性定位

# //标签名[@属性名='属性值' and @属性名='属性值']
driver.find_element_by_xpath("//input[@id='kw' and @class='s_ipt']")

更多语法查看XPath 语法

8、CSS定位

8.1、CSS ID 选择器

ID 选择器前面有一个 # 号 - 也称为棋盘号或井号

driver.find_element_by_css_selector('#kw')

8.2、CSS 类选择器

类名前有一个点号（.）

driver.find_element_by_css_selector('.s_ipt')

8.3、CSS 属性选择器

# 单属性定位
driver.find_element_by_css_selector("input[id='kw']")
# 多属性定位
driver.find_element_by_css_selector("input[id='kw'][name='wd']")
# 以kw开头
driver.find_element_by_css_selector("input[id=^'kw']")
# 以kw结尾
driver.find_element_by_css_selector("input[id=$'kw']")

更多语法查看CSS 选择器语法

二、Xpath定位 VS CSS定位

图片来源于网络

三、By定位

查看find_element_by_css_selector()函数

webdriver.py

from selenium.webdriver.common.by import By

class WebDriver(object):

    def find_element_by_id(self, id_):
        return self.find_element(by=By.ID, value=id_)
        
    def find_element_by_name(self, name):
        return self.find_element(by=By.NAME, value=name)
        
    def find_element_by_tag_name(self, name):
        return self.find_element(by=By.TAG_NAME, value=name)
        
    def find_element_by_link_text(self, link_text):
        return self.find_element(by=By.LINK_TEXT, value=link_text)
        
    def find_element_by_partial_link_text(self, link_text):
        return self.find_element(by=By.PARTIAL_LINK_TEXT, value=link_text)
        
    def find_element_by_xpath(self, xpath):
        return self.find_element(by=By.XPATH, value=xpath)
        
    def find_element_by_css_selector(self, css_selector):
        return self.find_element(by=By.CSS_SELECTOR, value=css_selector)

通过查看源码我们得知可以使用更底层元素定位方法find_element(by=By.CSS_SELECTOR, value=css_selector)

该方法的优势会在实际项目中的元素定位方法，显示等待方法封装中体现

base_page.py

from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.common.exceptions import TimeoutException

TIME_OUT = 10
POLL_FREQUENCY = 0.5

class BasePage():

    def __init__(self,driver):
        self.dirver = driver

    def find_element(self, locator):
        try:
            WebDriverWait(driver=self.driver, timeout=TIME_OUT,poll_frequency=POLL_FREQUENCY).until(EC.visibility_of_element_located(locator=locator))
        except TimeoutException as e:
            msg = "Time out when locate element using %s: %s" % (locator[0], locator[-1])
            raise TimeoutException(msg)
        return self.driver.find_element(*locator)