CSS选择器进行定位

发布于:2025-07-15 ⋅ 阅读:(15) ⋅ 点赞:(0)

  CSS选择器可以说是我们最常用也是最重要的一种元素定位方式,他可以通过元素的标签,ID,class等属性进行定位,在Selenium中通过By.CSS_SELECTOR,进行元素定位也就是:

driver.find_elements(By.CSS_SELECTOR,"")

  通过这种方式就可以获取到我们想要获取的元素,这里并不是一定要使用elements也可以是element只要是根据你要获取元素的数量决定。

  它可以替代通过id等属性进行定位元素,接下来我们通过一些案例进行讲述,假设我们要获取div标签下的所有内容:

elements = driver.find_elements(By.CSS_SELECTOR,"div")
for element in elements:
    print(element.get_attribute("outerHTML"))

  这样运行的结果为:

 

  当然如果我们相通过div的id属性来确定元素位置,我们可以直接使用id进行定位(通常情况下我们认为id是唯一的):

elements = driver.find_elements(By.CSS_SELECTOR,"#t1")
for element in elements:
    print(element.get_attribute("outerHTML"))

  通过这个我们会发现我们在CSS选择器时使用id进行定位,与单纯的使用By.ID的写法有所不同,我们需要再id前面加上“#”来声明它是个id,class也是一样,“.class名”通过这种方式可以通过classname进行元素的定位:

选择 子元素 和 后代元素:

  这是CSS选择器的一个非常重要的方式来进行元素的定位:

<div id='container'>

    <div id='layer1'>
        <div id='inner11'>
            <span>内层11</span>
        </div>
        <div id='inner12'>
            <span>内层12</span>
        </div>
    </div>

    <div id='layer2'>
        <div id='inner21'>
            <span>内层21</span>
        </div>
    </div>

</div>

  以这段html为例,这个id为container是id为layer1和layer2的父元素,同理inner11是layer1的子元素,但是这两个id都为container的后代元素,而layer1和layer2为container的直接子元素(这一点我们后续要用到),inner11是layer1的直接子元素。

  如果我们想要通过这种方式确定元素的位置需要遵守一定的规则如果是直接子元素需要使用“>”进行指定比如“#container > #layer1”,如果通过后代元素来确定位置,使用空格“ ”,例如“#container inner11”表示inner11为container的后代(无论隔了多少代,总之表示它的后代),接下来我们通过一些用例来检验我们的说明是否正确:

elements = driver.find_elements(By.CSS_SELECTOR,"#container > #layer1")
for element in elements:
    print(element.get_attribute("outerHTML"))

  结果为:

 

   如果使用空格后代元素,来确定元素的位置:

elements = driver.find_elements(By.CSS_SELECTOR,"#container  #inner11")
for element in elements:
    print(element.get_attribute("outerHTML"))

  结果为:

 

  

   


网站公告

今日签到

点亮在社区的每一天
去签到