【python】之UI自动化初窥

UI自动化之Selenium 和 Playwright

Selenium

概述：

Selenium 是最广泛使用的开源 Web UI（用户界面）自动化测试套件之一。Selenium 支持的语言包括C#，Java，Perl，PHP，Python 和 Ruby。目前，Selenium Web 驱动程序最受 Python 和 C＃欢迎。 Selenium 测试脚本可以使用任何支持的编程语言进行编码，并且可以直接在大多数现代 Web 浏览器中运行。在爬虫领域 selenium 同样是一把利器，能够解决大部分的网页的反爬问题

安装：

1
pip install selenium -i -i http://pypi.douban.com/simple --trusted-host pypi.douban.com

下载Driver

需要使用对应的驱动才能打开对应的浏览器

简单打开浏览器

1
2
3
4
5
6
7
8
9
10
11
12
from selenium import webdriver
import time
# 加载驱动
driver = webdriver.Chrome()
# 访问网址，
driver.get("http://www.baidu.com")
# 请求 浏览器信息 
title = driver.title
# 建立等待策略
driver.implicitly_wait(0.5)
# 找到搜索框
input_element = driver.find_

初始化等简单操作

1、初始化浏览器、刷新、最大化、后退、前进、截图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import time
from selenium import webdriver
from selenium.webdriver.common.by import By
# 加载驱动
driver = webdriver.Chrome()
# 访问网址，
driver.get("http://www.baidu.com")
# 最大化，
driver.maximize_window()
# 后退
driver.back()
# 暂停2s  显式等待
timl.sleep(2)
# 前进
driver.forward()
# 刷新
chr.refresh()
# 截图
driver.get_screenshot_as_file("1.png")
# 输入框输入内容
driver.find_element(By.ID,'kw').send_keys("saa")
# 点击
driver.find_element(By.ID,'su').click()
#清除输入框内容
driver.find_element(By.ID,'kw').clear()
#关闭浏览器
driver.close()

单个元素定位8大【重点】

定位用什么方法，用driver的find_element寻找元素方法

1
def find_element(self, by=By.ID, value: Optional[str] = None) -> WebElement:

我们，然后在这个方法里面使用By里面的属性by=By.XXX

我们再看一下By里面的属性就知道有几种方式了

1
2
3
4
5
6
7
8
9
10
11
12
from selenium.webdriver.common.by import By
class By:
    """Set of supported locator strategies."""

    ID = "id" 
    XPATH = "xpath"
    LINK_TEXT = "link text"
    PARTIAL_LINK_TEXT = "partial link text"
    NAME = "name"
    TAG_NAME = "tag name"
    CLASS_NAME = "class name"
    CSS_SELECTOR = "css selector"

以在百度首页的输入框为例元素定位

baidu

1、通过元素id定位【唯一】

id定位比较唯一，但是有id的元素少

1
2
driver = webdriver.Chrome()
driver.find_element(By.ID,'kw').send_keys("Selenium是什么")

2、通过元素的class

class name定位

1
driver.find_element(By.CLASS_NAME,'s_ipt').send_keys("Selenium是什么")

3、通过元素的name

1
driver.find_element(By.NAME,'wd').send_keys("Selenium是什么")

4、通过元素标签

1
driver.find_element(By.TAG_NAME, "lname")

5、通过超链接文本–>这个是定位跳转链接

1
driver.find_element(By.LINK_TEXT, "xxx")

6、通过超链接文本（模糊匹配）–>这个是定位跳转链接

1
driver.find_element(By.PARTIAL_LINK_TEXT, "xxx")

7、通过xpath【万能，重点】

1
driver.find_element(By.XPATH,'//*[@id="kw"]').send_keys("Selenium是什么")

8、通过css选择器（万能，重点）

1
driver.find_element(By.CSS_SELECTOR,'#kw').send_keys("Selenium是什么")

9、多个元素定位的方法

与单个元素的定位方式类似，把find_element改成find_elements即可

10、定位下拉框

可以下拉选择，也可以直接定位到对应的下拉选项，因为你的目的是为了找到这个元素

1
2
3
4
5
6
7
select_by_index()           # 通过索引定位；注意：>index索引是从“0”开始。
select_by_value()           # 通过value值定位，va>lue标签的属性值。
select_by_visible_text()    # 通过文本值定位，即显>示在下拉框的值。
Select(driver.find_element_by_name("姓名")).select_by_index(1)
# 或者分开写
a=driver.find_element_by_name("姓名")
Select(a).select_by_index(1)

针对浏览器的操作

控制浏览器操作：

  • 获取当前页面的title标题、url信息
  • 最大化、最小化浏览器
  • 控制、获取浏览器的大小（页面大小）
  • 前进、后退、刷新页面
  • 执行JS语句
  • 滚动滑动页面
  • 截图保存

获取当前页面的title标题、url信息

1
2
print(f"标签页title：{driver.title}")
print(f"标签页url：{driver.current_url}")

最大化、最小化浏览器

1
2
3
driver.maximize_window()
driver.minimize_window()
driver.fullscreen_window() # 全屏

控制、获取浏览器的大小（页面大小）

1
2
3
4
5
6
7
8
driver.set_window_size(1024, 768)
# 分别获取每个尺寸
width = driver.get_window_size().get("width")
height = driver.get_window_size().get("height")
# 或者存储尺寸并在以后查询它们
size = driver.get_window_size()
width1 = size.get("width")
height1 = size.get("height")

前进、后退、刷新页面

1
2
3
4
5
6
7
8
# 前进
driver.forward()

# 后退
driver.back()

# 刷新
driver.refresh()

屏幕截图、元素屏幕截图

1
2
3
4
5
6
driver.save_screenshot('./image.png')
# 元素屏幕截图
ele = driver.find_element(By.CSS_SELECTOR, 'h1')

# Returns and base64 encoded string into image
ele.screenshot('./image.png')

针对元素的简单操作

常见元素操作包含：

  • 点击
1
driver.find_element(By.NAME, "color_input").click()
  • 输入内容、清除内容
1
driver.find_element(By.NAME, "email_input").clear()
  • 返回元素尺寸、坐标
1
login_btn = driver.find_element_by_class_name("login")
  • 获取元素标签文本
1
a_text = driver.find_element_by_tag_name("a")
  • 获取元素属性值
1
a_attr = driver.find_element_by_class_name("mnav")
  • 检查元素：是否可见、是否可点击、是否已被选择
1
2
3
4
# 找到 不可见元素
ant_btn3 = driver.find_element_by_class_name("ant-btn3")
# 找到 可见元素
ant_btn4 = driver.find_element_by_class_name("ant-btn4")

鼠标操作

  • 执行操作
  • 左键、右键单击、双击
  • 鼠标悬停到元素、偏移处
  • 长按
  • 拖动

Playwright–UI自动化神器【初窥】

概述

playwright是由微软开发的Web UI自动化测试工具， 支持的浏览器包括：Chromium, Firefox and WebKit，支持的编码语言包括：Node.js、Python、C# 和 Java语言。

特点：

  • 一、支持所有主流浏览器并跨平台

    • 跨浏览器：基于Chromium内核的Google Chrome 和 Microsoft Edge浏览器), WebKit内核的Apple Safari 和 Mozilla Firefox浏览器，不支持IE11。
    • 跨平台：Windows、Linux 和macOS
    • 跨语言。 在 TypeScript, JavaScript, Python, .NET, Java 中使用 Playwright API
    • 可用于模拟移动端WEB应用的测试，不支持在真机上测试
    • 支持无头模式（默认）和有头模式—–强大之处：无头

  • 二、快速可靠的执行

    • 自动等待元素
    • Playwright基于Websocket协议，可以接受浏览器（服务端）的信号
    • 浏览器上下文并行：单个浏览器实例下创建多个浏览器上下文，每个浏览器上下文可以处理多个页面。
    • 有弹性的元素选择：可以使用文本、可访问标签选择元素

  • Playwright使用 Chrome DevTools 协议 （CDP） 与 Chromium 通信。对于Firefox和WebKit，Playwright实现了自己的协议，类似于CDP。一旦触发测试，client端代码将被转换为JSON格式，然后使用websocket 协议发送到服务器。palywright通过单个 websocket 协议连接传达所有请求，该连接将保持不变，直到所有测试执行完成。由于命令是在单个连接上发送的，因此测试失败或不稳定的可能性较小，并且命令可以快速执行。这种架构与Selenium相反，Selenium使用HTTP连接协议，并将每个命令（如浏览器打开，单击，发送密钥或关闭浏览器）作为单独的HTTP请求发送。此外，在Selenium中，服务器和客户端之间的连接将在每次请求后终止，并为下一个请求重新建立。最后划重点：这就是Playwright比selenium快的原因！

强适应性 • 测试不再容易失效
自动等待：Playwright 能够自动等待元素达到可操作的状态，外加一系列丰富的内置时间。不用再人工定义超时—-这是测试容易失败的主要原因。

Web有限的断言。Playwright 断言专门为动态加载的web应用设计。能够在满足需要的条件前自动重试。

可追踪。通过配置重试策略，采用捕捉执行轨迹、视频、截图来解决测试容易失效的问题。

不用再权衡取舍、不再有限制。

一切并行。跨越多个tabs、多个origins和多个users的测试场景。在一个测试中能够为不同的用户创建具有不同上下文的场景，并能在你的服务器上运行，

可信事件：元素悬停（hover）、动态控件的交互、生产可信时间，Playwright 使用与真实用户一致的输入方式（pipeline）。

测试 frames，穿透 Shadow DOM****。 Playwright 的选择器能够穿透 shadowDOM 和允许无缝输入 frame。

一次登录。 保存上下文的身份验证状态并在所有测试中重用它。这绕过了每个测试中的重复登录操作，但提供了独立测试的完全隔离。

强大的工具

Codegen 。 通过记录您的操作来生成测试。将它们保存为各种语言。

实操

打开浏览器网页

1
2
3
4
5
6
7
8
# -*- coding: utf-8 -*-
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    browser = p.chromium.launch(channel="chrome", headless=False) # headless无头
    page = browser.new_page()
    page.goto("http://www.baidu.com") # goto打开网页
    print(page.title()) # 打印title
    browser.close()

脚本录制：

使用命令

1
playwright codegen --target python -o baidu_test.py -b chromium https://www.baidu.com/

录制结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
from playwright.sync_api import Playwright, sync_playwright, expect


def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page() # 页面
    page.goto("https://www.baidu.com/") # 网址
    page.locator("#kw").click()  # 搜索框 点击 click
    page.locator("#kw").fill("中国好声音") # 搜索框输入 fill
    page.get_by_role("button", name="百度一下").click() # 输入完之后点击搜索
    with page.expect_popup() as page1_info:
        page.get_by_role("link", name="中国好声音 - 百度百科").click() # 点进百科页面
    page1 = page1_info.value # 新的页面来了
    with page1.expect_popup() as page2_info: # 打开 新的页面了
        page1.locator("div").filter(has_text=re.compile(r"^薛之谦$")).get_by_role("link").click()  # 在新的页面去点击了
    page2 = page2_info.value   # 第三个页面来了。
    page2.close() # 关闭页面3 
    page1.close() # 关闭页面2 
    page.close() # 关闭页面1 

    # ---------------------
    context.close() # 关闭程序
    browser.close() # 关闭浏览器


with sync_playwright() as playwright:
    run(playwright)

识别元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
page.get_by_role() # 通过显式和隐式可访问性属性定位。

page.get_by_text() # 按文本内容定位。

page.get_by_label() # 通过关联标签的文本查找表单控件。

page.get_by_placeholder() # 其文本替代品定位元素，通常是图像。

page.get_by_title() # 通过标题属性定位元素。

page.get_by_test_id() # 根据其data-testid属性定位元素（可以配置其他属性）。



playwright除了上述定位方式，还支持selenium的8种by元素定位，id、xpath、css等等，另外还有W3C标准规定的webDriver协议为5种定位方式

CSS、Link text、Partial link text、Tag name、XPath

playwright把这些定位归类成3种，分别是：css、xpath、text

判断元素状态

1
2
3
4
5
6
7
8
9
10
11
is_checked

is_disabled

is_editable

is_enabled

is_hidden

is_visible

元素操控

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
写相关操作：clear、fill

点击：click、dbclick

下拉选择框：select_option

文件上传：set_input_files

鼠标拖动：down、up、move、wheel

触摸屏幕：tap

键盘按键：press

截屏：screenshot

页面切换expect_popup

执行js：evaluate


python
#python #笔记
【python】之UI自动化初窥
http://example.com/2023/12/25/694Python之UI自动化初窥/
作者
Wangxiaowang
发布于
2023年12月25日
许可协议