【playwright+ python】学习笔记

参考教程点这里！

快速入门

一、playwright 介绍

playwright 是微软开发的 web 应用的自动化测试框架。

二、安装

2.1 安装 playwright 客户端库

pip install playwright

2.2 安装 playwright 浏览器

playwright 这个项目默认使用自己编译好的几种浏览器，比如 chromium， firefox， webkit这些浏览器是通过各自的开源项目编译出来的。

和我们下载安装的 Chrome，Firefox，Safri 这些品牌浏览器（stock browser）有区别。

playwright install

如果你只需要自动化一种浏览器，可以在参数中指定，比如 playwright install chromium。

品牌浏览器往往会自动更新，如果使用Selenium自动化，就需要不断下载新的驱动。playwright使用自编译浏览器不会自动更新，从而避免驱动和浏览器不匹配的问题。

当然，如果你只是想测试和品牌浏览器的兼容性，就无需上述下载了。

三、示例代码

3.1 示例

from playwright.sync_api import sync_playwright

input('1....')
# 启动 playwright driver 进程
p = sync_playwright().start()

input('2....')
# 启动浏览器，返回 Browser 类型对象
browser = p.chromium.launch(headless=False)

# 创建新页面，返回 Page 类型对象
page = browser.new_page()
page.goto("https://www.byhy.net/cdn2/files/selenium/stock1.html")
print(page.title()) # 打印网页标题栏

# 输入通讯，点击查询。这是定位与操作，是自动化重点，后文详细讲解
page.locator('#kw').fill('通讯')  # 输入通讯
page.locator('#go').click()      # 点击查询

# 打印所有搜索内容
lcs = page.locator(".result-item").all()
for lc in lcs:
    print(lc.inner_text())

input('3....')
# 关闭浏览器
browser.close()
input('4....')
# 关闭 playwright driver 进程
p.stop()

如果要使用已经安装的品牌浏览器，比如 Chrome，可以通过 executable_path 参数来指定其安装路径：

# 加上 executable_path参数
browser = p.chromium.launch(headless=False,
  executable_path='c:\Program Files\Google\Chrome\Application\chrome.exe')

3.2 使用 with as 会话管理

可以使用 with as 会话管理，我们的代码简化，不需要调用 start() 和 stop()

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://www.byhy.net/cdn2/files/selenium/stock1.html")
    print(page.title())
    page.locator('#kw').fill('通讯\n')
    page.locator('#go').click()
    # 打印所有搜索内容
    lcs = page.locator(".result-item").all()
    for lc in lcs:
        print(lc.inner_text())
    browser.close()

3.3 界面等待

上面的代码，大家发现不能打印出股票搜索的结果，原因是：点击查询后，立即就去检查搜索结果了，这时，界面上还没有呈现结果，所以返回的是空结果，因此，需要等待一段时间。

但是目前，我们不能在Playwright中使用 time.sleep 进行等待。
因为Playwright底层使用的是异步的python库进行各种事件处理，time.sleep 会破坏异步框架的处理逻辑。可以使用 Page 对象的 wait_for_timeout() 方法达到等待效果，单位是 毫秒。

page.wait_for_timeout(1000)

那么，我们就可以在打印搜索结果之前加上等待时间，如下面这样：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # 启动浏览器 -- chromium浏览器
    browser = p.chromium.launch(headless=False)

    # 创建新页面
    page = browser.new_page()

    # 导航到指定url
    page.goto('https://www.byhy.net/cdn2/files/selenium/stock1.html')
    print(page.title())  # 打印页面标题

    page.locator('#kw').fill('通讯')
    page.locator('#go').click()

    # 打印搜索结果
    page.wait_for_timeout(1500)
    lcs = page.locator(".result-item").all()
    for lc in lcs:
        print(lc.inner_text())

    # 关闭浏览器
    browser.close()

此时的执行结果：

3.4 跟踪功能

Playwright 有个特色功能： 跟踪（tracing）
启用跟踪功能后，可以在执行自动化后，通过记录的跟踪数据文件，会看自动化过程中的每个细节。

下面的代码进行了自动化搜索股票，并打开跟踪功能，保存跟踪数据文件为trace.zip。

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)

    # 创建 BrowserContext对象
    context = browser.new_context()
    # 启动跟踪功能
    context.tracing.start(snapshots=True, sources=True, screenshots=True)

    page = context.new_page()
    page.goto("https://www.byhy.net/cdn2/files/selenium/stock1.html")

    # 搜索名称中包含 通讯 的股票
    page.locator('#kw').fill('通讯')
    page.locator('#go').click()

    page.wait_for_timeout(1000) # 等待1秒

    lcs = page.locator(".result-item").all()
    for lc in lcs:
        print(lc.inner_text())

    # 搜索名称中包含 软件 的股票
    page.locator('#kw').fill('软件')
    page.locator('#go').click()

    page.wait_for_timeout(1000) # 等待1秒

    lcs = page.locator(".result-item").all()
    for lc in lcs:
        print(lc.inner_text())

    # 结束跟踪
    context.tracing.stop(path="trace.zip")

    browser.close()

执行完后，我们发现，当前工作目录下面多了 trace.zip 这个跟踪数据文件。
查看这个跟踪文件，有 2 中方法：

1. 直接访问 trace.playwright.dev 这个网站，上传 跟踪文件
2. 执行命令 playwright show-trace trace.zip

元素定位

四、元素定位

4.1 CSS 选择器定位

点击查看定位方式详解

4.1.1 Lactor 对象

PlayWright 中，可以使用CSS Selector 选择元素，就是使用Lactor类型的对象。
比如，前文中， Page 对象的 locator方法就会创建一个 Locator 类型对象，参数就可以是 CSS Selector 表达式

page.locator('#kw').fill('通讯')
page.locator('#go').click()

Page对象的 locator 定位到的如果是唯一的 html元素，就可以调用 Locator 对象的 方法，比如fill, click ,inner_text等等对元素进行操作了。

4.1.2 根据 web 属性选择元素

• 根据 tag 名：直接填入 tag 名即可

比如 要选择 所有的tag名为div的元素，就可以是这样：

locators = page.locator('div').all()

• 根据 id ：在 id 号前面加上一个井号（#id值）

<input  type="text" id='searchtext' />

lct = page.locator('#searchtext')

• 根据 class ：在 id 号前面加上一个.（.class值）

page.locator('.animal')

• 根据 a 标签：语法是给元素加上 []

<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>

css 选择器支持通过任何属性来选择元素，语法是用一个方括号 [] 。
比如要选择上面的 a元素，就可以使用 [href="http://www.miitbeian.gov.cn"] 。
这个表达式的意思是，选择 属性href值为 http://www.miitbeian.gov.cn 的元素。

from playwright.sync_api import sync_playwright

p = sync_playwright().start()
browser = p.chromium.launch(headless=False, slow_mo=50)
page = browser.new_page()
page.goto("https://www.byhy.net/cdn2/files/selenium/sample1.html")

# 根据属性选择元素
element = page.locator('[href="http://www.miitbeian.gov.cn"]')
# 打印出元素文本
print(element.inner_text())

当然，前面可以加上标签名的限制，比如a[href="http://www.miitbeian.gov.cn"]表示 选择所有 标签名为 a ，且 属性 href值为 http://www.miitbeian.gov.cn 的元素。

根据属性选择，还可以不指定属性值，比如 [href] ， 表示选择 所有 具有 属性名 为href 的元素，不管它们的值是什么。

还可以选择 属性值 包含 某个字符串 的元素
比如， 要选择a节点，里面的href属性包含了miitbeian字符串，就可以这样写

a[href*="miitbeian"]

还可以 选择 属性值 以某个字符串 开头 的元素
比如， 要选择a节点，里面的href属性以http开头 ，就可以这样写

a[href^="http"]

还可以 选择 属性值 以某个字符串 结尾 的元素
比如， 要选择a节点，里面的href属性以 gov.cn 结尾 ，就可以这样写

a[href$="gov.cn"]

如果一个元素具有多个属性

<div class="misc" ctype="gun">沙漠之鹰</div>

CSS 选择器 可以指定 选择的元素要 同时具有多个属性的限制，像这样 div[class=misc][ctype=gun]

4.2 Xpath 定位

点击查看

4.3 Playwright更推荐的定位

CSS 选择器定位/xpath定位，都是根据 HTML网页元素特征 的定位，属于开发者角度的定位。

Playwright 优先不推荐这样，它推荐从用户角度视觉呈现的定位。 因为它觉得用户角度相对比较固定，不容易变， 而 html页面写法容易变化。

但有时，有的元素，没有通过用户视觉定位的特征。
开发者角度的这种HTML网页元素特征定位 还是有其优势的，必须要学习的。

下面学习 通过用户视觉定位的方法

4.4 根据文本内容定位

点击查看

4.5 根据元素 Role 定位

点击查看

4.6 使用 codegen 助手

playwright codegen

Playwright 认为， 这种根据role定位是 用户 或者辅助技术 直观感知页面的方式， 应该是最优先使用。
但是，哪些HTML元素有哪些隐含的 ARIA role 和 ARIA Attribute，对应的 Accessible Name又是什么？
规则比较复杂，新手不太容易掌握。

我们可以使用 Playwright 的代码助手 codegen ，代码助手产生代码时， 能使用 role定位的，会优先使用 role 定位。

4.7 其他用户视觉定位（了解）

点击查看