Playwright,微软浏览器自动化教程（二）
核心概念，建议结合第一节的内容具体理解
1、Browser
这是一个浏览器实例，脚本运行需要首先打开浏览器实例
# playwright.brwoser_type.action(**kwargs)可以理解为指定浏览器内核
browser = playwright.chromium.launch(channel="chrome",headless=False)
# launch是最常用的一个函数，他有大量的参数,这里介绍常用的的
headless 是否显示GUI，默认是TRUE不显示
channel 指定浏览器版本，"chrome", "chrome-beta", "chrome-dev", "chrome-canary",
proxy 浏览器代理设置
timeout 等待超时时间，默认30000ms（30s）
slow_mo 减慢操作速度，浮点型，一边可以看清楚操作
顺便说一下，playwright的所有操作都有自动等待的功能，时间都是30s
2、Browser contexts
这个是独立的浏览器，隐身对话，意思是每一个Beowser contexts都是独立的，互相之间没有关系，等于说全都是新装的浏览器。
# 根据浏览器内核创建浏览器
context = browser.new_context(accept_downloads=False)
# 创建新页面
page = context.new_page()
2.1、browser.new_context
# browser.new_context的参数包括所有跟浏览器设置相关的
# 可以理解为根据浏览器创建一个新的浏览器
accept_downloads 是否下载所有附件，默认False不下载
geolocation 设定经纬度
user_agent 设定user agent
viewport 设定页面大小，规格，例如1280*720
offline 离线模式加载
2.2、context
# context就是浏览器层面的操作
context.new_page() 返回一个新页面
context.pages 返回所有打开的页面[list]
context.add_cookies([cookie_object1, cookie_object2]) 添加cookie
context.cookies() 返回cookie
context.wait_for_event(event, **kwargs) 等待event完成
3、Pages and frames
一个 Browser contexts 有多个pages，一个 page 是一个单独的tab，或者弹出窗口。用于导航到url ，或者与页面交互，比如点击，输入文字等。
一个 page 有多个 Frame （框架），框架内的操作无法通过page.**操作，只能通过page.Frame.func（）操作，但是通常在录制模式下，他会自动识别是否是框架内的操作，如果不懂怎么定位框架，那么可以使用录制模式来找。
3.1、Pages
大部分操作都是在page层面的，所以page有最多的函数
from playwright.sync_api import sync_playwright
# 这是一个创建页面，定位到指定链接，并截屏保存的例子
def run(playwright):
webkit = playwright.webkit
browser = webkit.launch()
context = browser.new_context()
page = context.new_page()
page.goto("https://example.com")
page.screenshot(path="screenshot.png")
browser.close()
with sync_playwright() as playwright:
run(playwright)
常用的函数有，一般看名字就知道是干嘛的
page.click(selector, **kwargs)
page.content() # 获取页面的html
page.screenshot(**kwargs)
page.goto(url, **kwargs)
page.pdf(**kwargs)
page.reload(**kwargs)
page.wait_for_timeout(timeout)
page.get_attribute(selector, name, **kwargs)
# page的expect_**函数需要注意
# 这个类型的函数一般都伴随这with使用
# 下面这个例子就是点击按钮后，改变了页面框架
with page.expect_event("framenavigated") as event_info:
page.click("button")
frame = event_info.value
#这样的还有很多，比如，大都用在交互的对象改变的情况下
page.expect_file_chooser(**kwargs)
page.expect_navigation(**kwargs)
page.expect_popup(**kwargs)
# 个人推荐注意这几个is的方法，在等待页面的时候很有用
page.is_disabled/(selector, **kwargs)
is_editable，is_enabled，is_hidden，is_visible
# 还有一个特殊的方法
page.locator(selector) # 定位页面元素，返回的是locator对象
3.2、Frame
frame的操作大部分跟page一样，只不过frame是page下一级的，可以理解为在page里嵌套的一个小页面。但是还是有一点不一样。
page里分为主框架和子框架，这里有一个框架树的例子,大家可以运行下试试。
from playwright.sync_api import sync_playwright
def run(playwright):
firefox = playwright.firefox
browser = firefox.launch()
page = browser.new_page()
page.goto("https://www.theverge.com")
dump_frame_tree(page.main_frame, "")
browser.close()
def dump_frame_tree(frame, indent):
print(indent + frame.name + '@' + frame.url)
for child in frame.child_frames:
dump_frame_tree(child, indent + " ")
with sync_playwright() as playwright:
run(playwright)
其方法大部分都与page一样，不在赘述，注意的是
page.frame(**kwargs)，这个可以用来选择Frame，并返回Frame对象，所以对Frame的操作有一下两种方法。
# 直接定位Frame操作
page.frame(name="frame-name").click('text=hello')
#返回Frame对象操作
frame = page.frame(name="frame-name")
frame.click('text=hello')
4、Selectors
Playwright可以通过css,XPath,HTML等选择元素，像id,data-test-id，或者像上面演示的，通过text内容。
这里有一些例子
# Using data-test-id= selector engine
page.click('data-test-id=foo')
# CSS and XPath selector engines are automatically detected
page.click('div')
page.click('//html/body/div')
# Find node by text substring
page.click('text=Hello w')
# 通过 >> 链接相同或不同的选择器
# Click an element with text 'Sign Up' inside of a #free-month-promo.
page.click('#free-month-promo >> text=Sign Up')
我推荐使用浏览器的开发者模式来寻找选择器：
[图片上传失败...(image-372c61-1649499671696)]
5、Auto-waiting
所有的操作都会等待元素可见，或者可操作之后才会进行，也就是自带等待时间，但是如果要自己加等待的话不推荐使用time.sleep(5)，而是用page.wait_for_timeout(5000)。
这里也可以使用page的wait操作:
page.wait_for_event(event, **kwargs)
page.wait_for_function(expression, **kwargs)
page.wait_for_load_state(**kwargs)
page.wait_for_selector(selector, **kwargs)
page.wait_for_timeout(timeout)
page.wait_for_url(url, **kwargs)
6、Evaluation Argument
像 page.evaluate(expression, **kwargs) 这样的剧作家评估方法采用单个可选参数。 此参数可以是 Serializable 值和 JSHandle 或 ElementHandle 实例的混合。 句柄会自动转换为它们所代表的值。
# A primitive value.
page.evaluate('num => num', 42)
# An array.
page.evaluate('array => array.length', [1, 2, 3])
# An object.
page.evaluate('object => object.foo', { 'foo': 'bar' })
# A single handle.
button = page.query_selector('button')
page.evaluate('button => button.textContent', button)
# Alternative notation using elementHandle.evaluate.
button.evaluate('(button, from) => button.textContent.substring(from)', 5)
# Object with multiple handles.
button1 = page.query_selector('.button1')
button2 = page.query_selector('.button2')
page.evaluate("""o => o.button1.textContent + o.button2.textContent""",
{ 'button1': button1, 'button2': button2 })
# Object destructuring works. Note that property names must match
# between the destructured object and the argument.
# Also note the required parenthesis.
page.evaluate("""
({ button1, button2 }) => button1.textContent + button2.textContent""",
{ 'button1': button1, 'button2': button2 })
# Array works as well. Arbitrary names can be used for destructuring.
# Note the required parenthesis.
page.evaluate("""
([b1, b2]) => b1.textContent + b2.textContent""",
[button1, button2])
# Any non-cyclic mix of serializables and handles works.
page.evaluate("""
x => x.button1.textContent + x.list[0].textContent + String(x.foo)""",
{ 'button1': button1, 'list': [button2], 'foo': None })
参考文章:
参考链接
