[开发测试]selenium+python 常用控件定位及操作

一、alert

"""说明
控件说明：JavaScript 中三种消息框：警告框、确认框、提示框

alert弹窗实现步骤：
        1、警告框
            S1：打开网站
            S2：定位iframe，并获得焦点
            S3：点击按钮，弹出alert弹窗
            S4：alert获取焦点
            S5：获取弹窗内容
            S6：点击弹窗的确定按钮
        2、确认框-确认
            S1：打开网站
            S2：定位iframe，并获得焦点
            S3：点击按钮，弹出alert弹窗
            S4：alert获取焦点
            S5：获取弹窗内容
            S6：点击弹窗的确定按钮
        3、确认框-取消
            S1：打开网站
            S2：定位iframe，并获得焦点
            S3：点击按钮，弹出alert弹窗
            S4：alert获取焦点
            S5：获取弹窗内容
            S6：点击弹窗的取消按钮
        4、提示框-确认
            S1：打开网站
            S2：定位iframe，并获得焦点
            S3：点击按钮，弹出alert弹窗
            S4：alert获取焦点
            S5：alert输入内容
            S6：点击弹窗的确定按钮
        5、提示框-取消
            S1：打开网站
            S2：定位iframe，并获得焦点
            S3：点击按钮，弹出alert弹窗
            S4：alert获取焦点
            S5：alert输入内容
            S6：点击弹窗的取消按钮
"""

import time

import pytest
from selenium import webdriver

from control.base import Base

class TestAlert():
    def setup_method(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(20)
        self.driver.maximize_window()

    def test_case_alert(self):
        """
        alert的警告窗
        :return:
        """
        # S1：打开网站
        self.driver.get("https://www.runoob.com/try/try.php?filename=tryjs_alert")
        # S2：iframe获取焦点
        iframe = self.driver.find_element_by_id("iframeResult")
        Base.set_bg_color(self.driver, iframe)
        self.driver.switch_to.frame(iframe)
        # S3：点击按钮，弹出alert弹窗
        btn_ele = self.driver.find_element_by_css_selector("[type='button']")
        Base.set_opera_before_bg_color(self.driver, btn_ele)
        btn_ele.click()
        # S4：定位alert弹窗
        time.sleep(2)
        alert_ele = self.driver.switch_to.alert
        # S5：获取弹窗内容
        alert_text = alert_ele.text
        # S6：点击弹窗的确定按钮
        alert_ele.accept()

    def test_case_confirm_accept(self):
        """
        确认框_确定
        :return:
        """
        # S1：打开网站
        self.driver.get("https://www.runoob.com/try/try.php?filename=tryjs_confirm")
        # S2：定位iframe，并获得焦点
        iframe = self.driver.find_element_by_id("iframeResult")
        Base.set_bg_color(self.driver, iframe)
        self.driver.switch_to.frame(iframe)
        # S3：点击按钮，弹出alert弹窗
        btn_ele = self.driver.find_element_by_css_selector("body > button")
        Base.set_opera_before_bg_color(self.driver, btn_ele)
        btn_ele.click()
        # S4:alert获取焦点
        time.sleep(2)
        alert_ele = self.driver.switch_to.alert
        # S5：获取弹窗内容
        alert_text = alert_ele.text
        # 断言
        assert alert_text == "按下按钮!"
        # S6：点击弹窗的确定按钮
        alert_ele.accept()

    def test_case_confirm_dismiss(self):
        """
        确认框_取消
        :return:
        """
        # S1：打开网站
        self.driver.get("https://www.runoob.com/try/try.php?filename=tryjs_confirm")
        # S2：定位iframe，并获得焦点
        iframe = self.driver.find_element_by_id("iframeResult")
        Base.set_bg_color(self.driver, iframe)
        self.driver.switch_to.frame(iframe)
        # S3：点击按钮，弹出alert弹窗
        btn_ele = self.driver.find_element_by_css_selector("body > button")
        Base.set_opera_before_bg_color(self.driver, btn_ele)
        btn_ele.click()
        # S4:alert获取焦点
        time.sleep(2)
        alert_ele = self.driver.switch_to.alert
        # S5：获取弹窗内容
        alert_text = alert_ele.text
        # 断言
        assert alert_text == "按下按钮!"
        # S6：点击弹窗的取消按钮
        alert_ele.dismiss()

    def test_case_prompt_accept(self):
        """
        提示框-确认
        :return:
        """
        # S1:打开网页
        self.driver.get("https://www.runoob.com/try/try.php?filename=tryjs_prompt")
        # S2:定位iframe，并获得焦点
        iframe = self.driver.find_element_by_id("iframeResult")
        Base.set_bg_color(self.driver, iframe)
        self.driver.switch_to.frame(iframe)
        # S3:点击按钮，弹出alert弹窗
        btn_ele = self.driver.find_element_by_css_selector("button")
        Base.set_opera_before_bg_color(self.driver, btn_ele)
        btn_ele.click()
        # S4:alert获取焦点
        time.sleep(1)
        alert_ele = self.driver.switch_to.alert
        # S5:alert 输入内容
        alert_ele.send_keys("我们在测试")
        # S6：点击确定
        alert_ele.accept()

    def test_case_prompt_dismiss(self):
        """
        提示框-取消
        :return:
        """
        # S1:打开网页
        self.driver.get("https://www.runoob.com/try/try.php?filename=tryjs_prompt")
        # S2:定位iframe，并获得焦点
        iframe = self.driver.find_element_by_id("iframeResult")
        Base.set_bg_color(self.driver, iframe)
        self.driver.switch_to.frame(iframe)
        # S3:点击按钮，弹出alert弹窗
        btn_ele = self.driver.find_element_by_css_selector("button")
        Base.set_opera_before_bg_color(self.driver, btn_ele)
        btn_ele.click()
        # S4:alert获取焦点
        time.sleep(1)
        alert_ele = self.driver.switch_to.alert
        # S5:alert 输入内容
        alert_ele.send_keys("我们在测试")
        # S6：点击取消
        alert_ele.dismiss()

    def teardown_method(self):
        self.driver.quit()


if __name__ == '__main__':
    pytest.main(["-s", "-v", "test_alert.py"])

二、复选框checkbox

"""说明
控件说明：
        <label>
          <input name="Fruit" type="checkbox" value="">苹果
        </label>
        
        <label>
            <input name="Fruit" type="checkbox" value="">桃子
        </label>
        
        <label>
            <input name="Fruit" type="checkbox" value="">香蕉
        </label>
        
        <label>
        <input name="Fruit" type="checkbox" value="">梨
        </label>
        
多选框实现步骤：
        1、全选
            S1：根据【name="Fruit"】进行元素定位，获取一组元素
            S2：对S1结果进行循环，选中全部元素
        2、根据指定内容选中元素
            S1：定义带选中内容
            S2：根据【css='body > form > label'】进行元素定位,获取一组元素
            S3：对S2结果进行循环，与S1内容进行匹配，选中匹配元素

"""

import time

import pytest
from selenium import webdriver
from control.base import Base


class TestCheckbox():
    def setup_method(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(20)
        self.driver.maximize_window()
        self.driver.get("http://www.divcss5.com/yanshi/checkbox.html")

    def test_case_by_name(self):
        """
        默认全选
        :return:
        """
        # S1：查找元素=Fruit的集合
        list_ele = self.driver.find_elements_by_name("Fruit")
        # S2：可根据下标进行默认选择
        # 这里实现全选
        for ele in list_ele:
            ele.click()
            Base.set_opera_before_bg_color(self.driver, ele)

    def test_case_by_text(self):
        """
        根据指定的文内容选中元素
        :return:
        """
        # 定义带选中内容
        list_fruits = ["桃子", "梨"]
        # S1：查找Fruit集合
        list_ele = self.driver.find_elements_by_css_selector("body > form > label")
        time.sleep(2)
        # S2：循环list_fruits，获取带点击的元素
        for ele in list_ele:
            # 等价于：ele.text=="桃子" or ele.text=="梨"
            # 判断元素是否在 待选中的内容 中
            if ele.text in list_fruits:
                ele.click()
                Base.set_opera_before_bg_color(self.driver, ele)

    def teardown_method(self):
        self.driver.quit()


if __name__ == '__main__':
    pytest.main(["-s", "-v", "test_checkbox.py"])

三、下载文件

""" 说明

下载文件实现步骤：
        S1：设置浏览器的默认下载地址
        S2：启动浏览器
        S3：切换iframe
        S4：点击下载按钮
        S5：默认路径下查看下载内容

知识点：
        # 谷歌浏览器的设置类
        options = webdriver.ChromeOptions()
        # 设置默认下载地址
        prefs = {"download.default_directory": r"C:\a_Python\selenium_demo\download"}
        options.add_experimental_option("prefs", prefs)
        # 启动浏览器，记载默认设置
        driver = webdriver.Chrome(options=options)

"""

import time

import pytest
from selenium import webdriver

from control.base import Base

class TestDownload():

    def test_case(self):
        # S1:设置浏览器的默认下载地址
        options = webdriver.ChromeOptions()
        prefs = {"download.default_directory": r"C:\a_Python\selenium_demo\download"}
        options.add_experimental_option("prefs", prefs)
        # S2:启动浏览器
        driver = webdriver.Chrome(options=options)
        driver.implicitly_wait(20)
        driver.maximize_window()
        driver.get("https://www.w3school.com.cn/tiy/t.asp?f=eg_html_a_download")
        # S3:切换iframe
        iframe = driver.find_element_by_name("iframeResult")
        # 设置背景色
        Base.set_bg_color(driver, iframe)
        # iframe获得焦点
        driver.switch_to.frame(iframe)
        # S4:点击下载按钮
        img_ele = driver.find_element_by_css_selector("img")
        Base.set_opera_before_bg_color(driver, img_ele)
        img_ele.click()
        Base.set_opera_bg_color(driver, img_ele)
        # S5：退出浏览器
        driver.quit()


if __name__ == '__main__':
    pytest.main(["-s", "-v", "test_download.py"])

四、单选框radio

""" 说明
控件说明：
        <input type="radio" name="colors" id="red">红色
        <input type="radio" name="colors" id="blue">蓝色
        <input type="radio" name="colors" id="green">绿色
        
单选按钮实现步骤：
        1.单选按钮基于id选择
            S1：iframe获得焦点
            S2：根据id定位选择
        2.单选框默认选择第一个
            S1：iframe获得焦点
            S2：根据【name=colors】进行一组元素定位
            S3：根据S2的结果集合，默认选择第一个

知识点：
        1.  # 单选按钮：[待选择元素]定位
            ele = self.driver.find_element_by_id("green")
            # 单选按钮点击
            ele.click()

"""

import time
import pytest
from selenium import webdriver
from control.base import Base

class TestAlert():
    def setup_method(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(20)
        self.driver.maximize_window()
        self.driver.get("https://www.runoob.com/try/try.php?filename=tryjsref_radio_checked")

    def test_case_by_id(self):
        """
        单选按钮基于id选择
        :return:
        """
        # S1:定位iframe
        iframe = self.driver.find_element_by_id("iframeResult")
        # 加背景色，方便查看
        Base.set_bg_color(self.driver, iframe)
        # S2：iframe获得焦点
        self.driver.switch_to.frame(iframe)
        # S3：单选按钮：[待选择元素]定位
        ele = self.driver.find_element_by_id("green")
        # 设置背景色
        Base.set_opera_before_bg_color(self.driver, ele)
        # S4:按钮点击
        ele.click()
        # 设置背景色
        Base.set_opera_bg_color(self.driver, ele)

    def test_case_by_name(self):
        """
        单选框默认选择第一个
        :return:
        """
        # S1:iframe获得焦点
        iframe = self.driver.find_element_by_id("iframeResult")
        # 加背景色，方便查看
        Base.set_bg_color(self.driver, iframe)
        self.driver.switch_to.frame(iframe)
        # S2：根据name获取一组元素
        list_ele = self.driver.find_elements_by_name("colors")
        # S3：默认选择第一个元素
        ele = list_ele[0]
        # 设置背景色
        Base.set_opera_before_bg_color(self.driver, ele)
        ele.click()
        Base.set_opera_bg_color(self.driver, ele)

    def teardown_method(self):
        self.driver.quit()


if __name__ == '__main__':
    pytest.main(["-s", "-v", "test_radio.py"])

五、下拉框select

"""说明
控件说明：
        <select>
          <option value="volvo">Volvo</option>   分析：  index=0   value="volvo"  text="Volvo"
          <option value="saab">Saab</option>            index=1   value="saab"   text="Saab"
          <option value="opel">Opel</option>            index=2   value="opel"   text="Opel"
          <option value="audi">Audi</option>            index=3   value="audi"   text="Audi"
        </select>
        
下拉框选择实现步骤：
        S1:打开网页
        S2:定位iframe子窗体
        S3:焦点切换到iframe子窗体内
        S4:定位下拉框控件
        S5:将元素转为Select对象
        S6:根据value、index、text选择值

知识点：
        1.下拉框选择有三种方式
            a、根据下标（index）选择
            b、根据值（value）选择
            c、根据文本（text）选择
        2.元素定位写法：
            a、driver.find_element_by_id("iframeResult") 必须掌握
            b、WebDriverWait(driver, 10, 1).until(lambda driver: driver.find_element_by_id("iframeResult"))
            c、WebDriverWait(driver, 10, 1).until(EC.visibility_of_element_located((By.ID, "iframeResult")))
        3.WebDriverWait(driver, 10, 1).until(元素定位)
            显示等待。给元素10秒钟的查找（缓冲）时间。
            在10s内，每隔1秒查找一次，如果找到了，就继续下一步；
            否则，抛出（超时）异常
        4.# 定位select控件
          ele = self.driver.find_element(By.TAG_NAME, "select")
          # 将元素转为Select对象
          select_ele = Select(ele)
          # 根据value选择
          select_ele.select_by_value("saab")
          # 根据下标选择
          select_ele.select_by_index(2)
          # 根据text选择
          select_ele.select_by_visible_text("Audi")
"""

import time
import pytest
from control.base import Base
from selenium.webdriver.support import expected_conditions as EC
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.select import Select
from selenium.webdriver.support.wait import WebDriverWait

class TestSelect():
    def setup_method(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(20)
        self.driver.maximize_window()
        self.driver.get("https://www.w3school.com.cn/tiy/t.asp?f=eg_html_select")

    def test_case_by_value(self):
        """
        根据value选择元素
        :return:
        """
        # S1:定位iframe:需掌握
        iframe = self.driver.find_element_by_id("iframeResult")
        # 加背景色，方便查看
        Base.set_bg_color(self.driver, iframe)
        # S2：焦点定位到iframe内
        self.driver.switch_to.frame(iframe)
        # S3：定位select控件
        ele = self.driver.find_element(By.TAG_NAME, "select")
        # 设置背景色
        Base.set_opera_before_bg_color(self.driver, ele)
        # S4：将元素转为Select对象
        select_ele = Select(ele)
        # S5：根据value选择
        select_ele.select_by_value("saab")
        # 设置背景色
        Base.set_opera_bg_color(self.driver, ele)

    def test_case_by_index(self):
        """
        根据下标选择元素
        :return:
        """
        # S1:定位iframe：进阶1
        iframe = WebDriverWait(self.driver, 10, 1).until(
            lambda driver: driver.find_element_by_id("iframeResult"))
        # 设置背景色
        Base.set_bg_color(self.driver, iframe)
        # S2：焦点定位到iframe内
        self.driver.switch_to.frame(iframe)
        # S3：定位select控件
        ele = self.driver.find_element(By.TAG_NAME, "select")
        # 设置背景色
        Base.set_opera_before_bg_color(self.driver, ele)
        # S4：将元素转为Select对象
        select_ele = Select(ele)
        # S5：根据下标赋值
        select_ele.select_by_index(2)
        # 设置背景色
        Base.set_opera_bg_color(self.driver, ele)

    def test_case_by_text(self):
        """
        根据text选择元素
        :return:
        """
        # S1:定位iframe：进阶2
        iframe = WebDriverWait(self.driver, 10, 1).until(
            EC.visibility_of_element_located((By.ID, "iframeResult")))
        # 设置背景色
        Base.set_bg_color(self.driver, iframe)
        # S2：焦点定位到iframe内
        self.driver.switch_to.frame(iframe)
        # S3：定位select控件
        ele = self.driver.find_element(By.TAG_NAME, "select")
        # 设置背景色
        Base.set_opera_before_bg_color(self.driver, ele)
        # S4：将元素转为Select对象
        select_ele = Select(ele)
        # S5:根据text选择
        select_ele.select_by_visible_text("Audi")
        # 设置背景色
        Base.set_opera_bg_color(self.driver, ele)

    def teardown_method(self):
        self.driver.quit()


if __name__ == '__main__':
    pytest.main(["-s", "-v", "test_select.py"])

六、上传文件

"""说明
控件说明：
        <input type="file" id="fileField" οnchange="document.getElementById('textfield').value=this.value">
        <input type="text" name="textfield" id="textfield" class="txt" value="请选择要上传的文件" readonly="readonly">
上传文件实现步骤：
        S1:元素定位：文件上传输入框
        S2:元素去掉只读（readonly）属性，允许文本框输入
        S3:文本框内容清空
        S4:文本框内输入【待上传文件】的路径
        S5:点击【提交】
知识点：
        1.文件上传一般都是打开【文件选择框】选择文件，得到文件的路径（必须关注）
        2.随后根据文件路径查找文件，将文件转化为文件流存储到服务器（这一步UI测试不需要关注）
        3.文本框<input type="text">不能输入，一般是因为设置了readonly只读，需要去掉该属性，才能操作
          self.driver.execute_script('arguments[0].removeAttribute(\"readonly\")', ele)
        4.关于文件上传UI自动化测试的两种处理方式：
            a.找到赋值的文本框。我们通过给文本框赋值来替代人为在文件框内选择文件
            b.调用windows提供的api，对文件框进行赋值来替代人为在文件框内选择文件  

"""

import pytest
import time
from selenium import webdriver
from control.base import Base

class TestAlert():
    def setup_class(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(20)
        self.driver.maximize_window()
        self.driver.get("file:///C:/Users/lr/Desktop/wwww/123.html")

    def test_case_upload(self):
        """
        上传文件
        :return:
        """
        # S1：元素定位：文件上传输入框
        ele = self.driver.find_element_by_id("textfield")
        # 加背景色
        Base.set_bg_color(self.driver, ele)
        # S2:元素去掉只读（readonly）属性，允许文本框输入
        self.driver.execute_script('arguments[0].removeAttribute(\"readonly\")', ele)
        # 加背景色
        Base.set_opera_before_bg_color(self.driver, ele)
        # S3:文本框内容清空
        ele.clear()
        # S4:文本框内输入【待上传文件】的路径
        ele.send_keys(r"C:\Users\liurui\Desktop\wwww.png")
        # 加背景色
        Base.set_opera_bg_color(self.driver, ele)

        # S5：点击【提交】
        # 【提交】定位
        btn_ele = self.driver.find_element_by_id("lrtj")
        # 加背景色
        Base.set_opera_before_bg_color(self.driver, btn_ele)
        # 点击
        btn_ele.click()
        time.sleep(3)

    def teardown_class(self):
        self.driver.quit()


if __name__ == '__main__':
    pytest.main(["-s", "-v", "test_uplod_file.py"])

七、多窗口切换

""" 说明
多窗口切换实现步骤：
        S1:打开第一个窗口：打开百度
        S2:打开第二个窗口：点击【新闻】
        S3:设置【新闻】页面获得焦点：成功定位元素
           备注：虽然当前展示的【新闻】页，但是焦点仍处于【百度】页面，所以需要配合使用switch_to_windows()方法
                能正确定位到【新闻】页面内的元素，则代表我们切换窗口成功。
        S4:再次将页面切回到【百度】页
        
知识点：
        1.  # 获取所有的window句柄
            list_handle = self.driver.window_handles
            # 切换到最新的window窗口
            self.driver.switch_to.window(list_handle[-1])
        2.如果页面内无法定位到元素：
            首先确认定位方式是否正确；
            如果是多个windows窗口，就需要确保该窗口获得焦点；
            最后确认是否嵌套了iframe；

"""

import time
import pytest
from selenium import webdriver

from control.base import Base

class TestWindows():
    def setup_method(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(20)
        self.driver.maximize_window()

    def test_case_windows(self):
        """
        多窗口（windows）切换
        :return:
        """
        # S1:打开百度
        self.driver.get("https://www.baidu.com/")

        # S2：点击【新闻】，打开另一个标签页
        time.sleep(2)
        ele = self.driver.find_element_by_link_text("新闻")
        Base.set_opera_bg_color(self.driver, ele)
        ele.click()
        time.sleep(2)

        # S3: 新打开页面获取焦点
        # 备注：这个时候焦点还停留在第一个handle标签内，我们需要将焦点切到新打开的页面内
        # 先获取所有的window句柄
        list_handle = self.driver.window_handles
        # 最新window获得焦点
        self.driver.switch_to.window(list_handle[-1])
        # 成功定位元素【搜索框】
        news_search = self.driver.find_element_by_id("ww")
        Base.set_opera_bg_color(self.driver, news_search)

        # S4：焦点切回到百度页（当前焦点处于新打开的页面）
        # 切换到第一个window
        self.driver.switch_to.window(list_handle[0])
        time.sleep(3)

    def teardown_method(self):
        # 退出浏览器
        self.driver.quit()


if __name__ == '__main__':
    pytest.main(["-s", "-v", "test_windows.py"])

八、iframe

参考多选框、单选框。都有涉及iframe

九、selenium内执行js脚本

import time


class Base():
    # 元素背景高亮（加颜色）
    @staticmethod
    def set_bg_color(driver, element):
        driver.execute_script("arguments[0].setAttribute('style', arguments[1]);",
                              element,
                              "background: {}".format("#EEFAFF"))
        time.sleep(2)

    # 元素背景高亮（加颜色）
    @staticmethod
    def set_opera_before_bg_color(driver, element):
        driver.execute_script("arguments[0].setAttribute('style', arguments[1]);",
                              element,
                              "background: {}".format("#AAE6FE"))
        time.sleep(2)

    # 元素背景高亮（加颜色）
    @staticmethod
    def set_opera_bg_color(driver, element):
        driver.execute_script("arguments[0].setAttribute('style', arguments[1]);",
                              element,
                              "background: {}".format("#69BEE1"))
        time.sleep(2)