【无标题】playwright codegen -o script.py

playwright codegen -o script.py三，简单使用
Playwright 支持2种运行方式：同步和异步。以下为同步：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
browser = p.chromium.launch(headless=False) # 启动 chromium 浏览器
page = browser.new_page() # 打开一个标签页
page.goto(“https://www.baidu.com”) # 打开百度地址
print(page.title()) # 打印当前页面title
browser.close() # 关闭浏览器对象
如果不习惯with语句，也可以用start() 和stop() 的方式:

from playwright.sync_api import sync_playwright
playwright = sync_playwright().start()

browser = playwright.chromium.launch(headless=False)
page = browser.new_page()
page.goto(“https://www.baidu.com/”)

browser.close()
playwright.stop()
四：定位元素
playwright 可以通过 CSS selector, XPath selector, HTML 属性（比如 id, data-test-id）或者是 text 文本内容定位元素。

Selector 选择器
操作元素，可以先定位再操作

先定位再操作

page.locator('#kw').fill("playwright")
page.locator('#su').click()

也可以直接调用fill 和 click 方法，传Selector选择器

page.fill(‘#kw’, “playwright”)
page.click(‘#su’)
CSS 或 XPath 选择器
可以使用xpath 和 css 元素

CSS and XPath

page.fill(‘css=#kw’, “playwright”)
page.click(‘xpath=//*[@id=“su”]’)
当 DOM 结构发生变化时，这些选择器可能会中断。长 CSS 或 XPath 链是导致测试不稳定。

text 文本选择器
文本选择器是一个非常实用的定位方式，根据页面上看到的text文本就可以定位了，比如我们经常在selenium中使用xpath 的文本选择器定位
完全匹配文本 //[text()=“百度一下”]
包含某个文本 //[contains(text(),“百度一下”)]
playwright 封装了text文本定位的方式，也可以支持2种文本定位方式

page.click(“text=百度一下”) # 模糊匹配
page.click(“text='百度一下 '”) # 完全匹配
ps：text=百度一下和 text=‘百度一下’ 的区别：
text=百度一下 没有加引号（单引号或者双引号），模糊匹配，对大小写不敏感
text=‘百度一下’ 有引号，精确匹配，对大小写敏感

Selector 选择器组合定位

image.png
不同的selector可组合使用，用>>连接
form >> [name=“wd”] 定位方式等价于

page.locator(“form”).locator(‘[name=“wd”]’)
内置定位器
这些是 playwright 推荐的内置定位器。
page.get_by_role()通过显式和隐式可访问性属性进行定位。
page.get_by_text()通过文本内容定位。
page.get_by_label()通过关联标签的文本定位表单控件。
page.get_by_placeholder()按占位符定位输入。
page.get_by_alt_text()通过替代文本定位元素，通常是图像。
page.get_by_title()通过标题属性定位元素。
page.get_by_test_id()根据data-testid属性定位元素（可以配置其他属性）
五，操作

fill() 输入文字

Type 输入
一个字符一个字符地输入字段，就好像它是一个使用locator.type()的真实键盘的用户。

page.locator(‘#kw’).type(‘playwright’)
鼠标点击 click()
执行简单的人工点击。

Generic click

page.get_by_role(“button”).click()

Double click

page.get_by_text(“Item”).dblclick()

Right click

page.get_by_text(“Item”).click(button=“right”)

Shift + click

page.get_by_text(“Item”).click(modifiers=[“Shift”])

Hover over element

page.get_by_text(“Item”).hover()

Click the top left corner

page.get_by_text(“Item”).click(position={ “x”: 0, “y”: 0})
在幕后，这个和其他与指针相关的方法：

1,等待具有给定选择器的元素出现在 DOM 中 （不用自己去写轮询等待了）
2,等待它显示出来，即不为空，不display:none，不visibility:hidden （这个太人性化了，不用去判断元素是否隐藏）
3,等待它停止移动，例如，直到 css 转换完成
4,将元素滚动到视图中 （这个太人性化了，不用自己去滚动了）
5,等待它在动作点接收指针事件，例如，等待直到元素变得不被其他元素遮挡
6,如果元素在上述任何检查期间分离，则重试
由此可见，click() 方法优化了selenium 点击元素的遇到的一些痛点问题，比如元素遮挡，不在当前屏幕，元素未出现在DOM中或隐藏不可见等不可点击的状态。

文件上传
(1)您可以使用locator.set_input_files()方法选择要上传的输入文件。
它期望第一个参数指向类型为 的输入元素"file"。数组中可以传递多个文件。
如果某些文件路径是相对的，则它们将相对于当前工作目录进行解析。空数组清除所选文件。

Select one file

page.get_by_label(“Upload file”).set_input_files(‘myfile.pdf’)

Select multiple files

page.get_by_label(“Upload files”).set_input_files([‘file1.txt’, ‘file2.txt’])

Remove all the selected files

page.get_by_label(“Upload file”).set_input_files([])

Upload buffer from memory

page.get_by_label(“Upload file”).set_input_files(
files=[
{“name”: “test.txt”, “mimeType”: “text/plain”, “buffer”: b"this is a test"}
],
)
(2)如果不是input输入框，必须点开文件框的情况
可以使用page.expect_file_chooser() 监听到弹出框，在弹出框上输入文件路径

    with self.page.expect_file_chooser() as fc_info:
        self.page.get_by_placeholder("请选择文件").click()
    file_chooser = fc_info.value
    file_chooser.set_files("Upload file")

几个操作方法

file_chooser.element 返回与此文件选择器关联的输入元素。
file_chooser.is_multiple() 返回此文件选择器是否接受多个文件。
file_chooser.page 返回此文件选择器所属的页面。
设置与此选择器关联的文件输入的值。如果其中一些filePaths是相对路径，那么它们将相对于当前工作目录进行解析。对于空数组，清除所选文件。

file_chooser.set_files(files)
file_chooser.set_files(files, **kwargs)
几个参数

files pathlib.Path
no_wait_after 启动导航的操作正在等待这些导航发生并等待页面开始加载。您可以通过设置此标志来选择退出等待。您仅在特殊情况下才需要此选项，例如导航到无法访问的页面。默认为false.
timeout 以毫秒为单位的最长时间，默认为 30 秒，传递0以禁用超时。可以使用browser_context.set_default_timeout()或page.set_default_timeout()方法更改默认值。
(3)高级操作-事件监听filechooser

page.on(“filechooser”, lambda file_chooser: file_chooser.set_files(r"D:\tou.png"))

点击选择文件按钮，会触发 filechooser 事件

page.get_by_label(“选择文件”).click()
page.on(“filechooser”, ) 会自动监听filechooser 事件，只要有点击了选择文件按钮，就会自动触发。

focus()聚焦给定元素
对于处理焦点事件的动态页面，您可以使用locator.focus()聚焦给定元素。
page.get_by_label(‘password’).focus()
drag_to 拖动
您可以使用locator.drag_to()执行拖放操作。此方法将：
将鼠标悬停在要拖动的元素上。
按鼠标左键。
将鼠标移动到将接收放置的元素。
松开鼠标左键。

page.locator(“#item-to-be-dragged”).drag_to(page.locator(“#item-to-drop-at”))
如果您想精确控制拖动操作，请使用较低级别的方法，如locator.hover()、mouse.down()、mouse.move()和mouse.up()。

page.locator(“#item-to-be-dragged”).hover()
page.mouse.down()
page.locator(“#item-to-drop-at”).hover()
page.mouse.up()
如果您的页面依赖于dragover正在调度的事件，则您至少需要移动两次鼠标才能在所有浏览器中触发它。要可靠地发出第二次鼠标移动，请重复mouse.move()或locator.hover()两次。操作顺序是：悬停拖动元素，鼠标向下，悬停放置元素，第二次悬停放置元素，鼠标向上。

六，等待

强制等待
time.sleep() 不再使用
Playwright 在查找元素的时候具有自动等待功能，如果你在调试的时候需要使用等待，你应该使用page.wait_for_timeout(5000) 代替 time.sleep(5)并且最好不要等待超时。
page.wait_for_timeout(5000)
显示等待
在延迟加载的页面中，使用locator.wait_for()等待元素可见是很有用的。或者，像locator.click()这样的页面交互会自动等待元素。

Click triggers navigation

page.get_by_text(“Login”).click()

Click will auto-wait for the element

page.get_by_label(“User Name”).wait_for()

Click triggers navigation

page.get_by_text(“Login”).click()

Fill will auto-wait for element

page.get_by_label(“User Name”).fill(“John Doe”)

作者：半腼色
链接：https://www.jianshu.com/p/c4bb093e0f86
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。