元素定位(三)

一. 什么是iframe

iframe是指一个html页面中嵌套了另外一个或多个html页面

如下代码，在外层html中有个id为"11"的div元素，iframe中也有一个id为"11"的div元素，由于元素定位的是当前html页面，所以无法定位iframe里面的元素。这时需要从当前html页面切换到iframe

<html>
    <head>
        <title>......</title>

    <body>
        <div id="11">......</div>
        <a>......</a>
        <iframe>
            <html>
                <head>......</head>
                <body>
　　　　　　　　　　　　<div id="11" name="11"
　　　　　　　　　 </body>
            </html>
        </iframe>
        <p>......</p>
    </body>
</html>

二. frame框架里面元素定位

1. driver.switch_to.frame()：从主页面切换到iframe

如果我们需要切换到你想要的内嵌页面上去，就需要定位到frame框架切换过去，切换用到的方法：driver.switch_to.frame()，然后就可以自己去定位框架里面元素，去进行对应的操作

switch_to.frame()中frame()方法源码如下：frame的参数可以是一个<iframe>标签的name属性值，也可以是下标(多个iframe，下标从1开始)，还可以是定位到的一个iframe的元素对象

    def frame(self, frame_reference):
        """
        Switches focus to the specified frame, by index, name, or webelement.

        :Args:
         - frame_reference: The name of the window to switch to, an integer representing the index,
                            or a webelement that is an (i)frame to switch to.

        :Usage:
            driver.switch_to.frame('frame_name')
            driver.switch_to.frame(1)
            driver.switch_to.frame(driver.find_elements_by_tag_name("iframe")[0])
        """

2. driver.switch_to.default_content()：从iframe切换回主页面

当iframe上的操作完后，想重新回到主页面上操作元素，这时候，就可以用driver.switch_to.default_content()方法返回到主页面

举个例子：腾讯课堂登录切换到输入用户名/密码登录

frame框架名：login_frame_qq

#腾讯课堂qq登陆 - 用户名和密码 - iframe切换

from selenium import webdriver
import time

#初始化chromedriver
driver = webdriver.Chrome()

#打开腾讯课堂的首页
driver.get("https://ke.qq.com/")
time.sleep(3)

#浏览器窗口最大化
driver.maximize_window()

#根据id定位 登录 并点击
driver.find_element_by_id("js_login").click()
time.sleep(2)

#选择账号登录类型：根据xpath定位 QQ登录 并点击
driver.find_element_by_xpath("//a[@class='js-btns-enter btns-enter btns-enter-qq']").click()
time.sleep(2)

#切换到iframe
driver.switch_to.frame("login_frame_qq")
time.sleep(2)

#根据id定位 账号密码登录 并点击
login_ele = driver.find_element_by_id("switcher_plogin")
time.sleep(2)
login_ele.click()

#根据xpath定位 账号输入框，并输入账号
driver.find_element_by_xpath("//input[@id='u']").send_keys("xxxxxx")
time.sleep(2)

#根据xpath定位 密码输入框，并输入密码
driver.find_element_by_xpath("//input[@id='p']").send_keys("xxxxxx")
time.sleep(2)

#根据xpath定位 登录，并点击登录
driver.find_element_by_xpath("//input[@class='btn']").click()
time.sleep(3)

#退出浏览器
driver.quit()

三. CSS定位

css：样式，一般页面的展示都是靠css来展示元素的

css可以通过元素的id、class、标签这三个常规属性直接定位到

# 表示id属性，如 #kw div#id值

. 表示class属性，如 .s_ipt div.class值

直接用tag名称来定位元素，无任何标识符，如 input

用tag名称和属性值(属性=value)来定位如 from[name="loginform"] div[id="id值"][style="display:block"]

层级定位

> 子元素如 div#id>div.class

后代元素如 div#id div.class(中间有空格)

^= 以XX开头

$= 以XX结尾

*= 包含XX