PlayWright -元素节点操作

元素操作

获取元素信息

locator.inner_html()  #获取某个元素的HTML
locator.text_content() #用来获取某个元素内所有文本内容，包含子元素内容，隐藏元素也能获取。返回值不会被格式化,返回值依赖于代码的内容
locator.inner_text()    #的返回值会被格式化,inner_text()返回的值, 依赖于页面的显示, 
locator.count()  #获取元素个数
all_inner_texts() 和 all_text_contents()  #也是用于获取页面上的文本，但是返回的是list列表

输入

• locator.fill() 是填写表单字段的最简单方法。它聚焦元素并input使用输入的文本触发事件。它适用于<input>,<textarea>和[contenteditable]元素。这可能会导致意外行为。
• Type 输入:一个字符一个字符地输入字段，就好像它是一个使用locator.type()的真实键盘的用户。此方法将发出所有必要的键盘事件，所有keydown, keyup,keypress事件就位。您甚至可以指定delay按键之间的可选操作来模拟真实的用户行为。 大多数时候，page.fill()会正常工作

# Text 文本框输入
page.get_by_role("textbox").fill("Peter")

# 根据label 定位 Date 日期输入
page.get_by_label("Birth date").fill("2020-02-02")

# Time input
page.get_by_label("Appointment time").fill("13:15")

# Local datetime input
page.get_by_label("Local time").fill("2020-03-02T05:15")


page.locator('#area').type('Hello World!')

点击元素

# 定位可见元素
page.click("button:visible")
page.click("button >> visible=true")


# 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})

在幕后，这个和其他与指针相关的方法：

• 等待具有给定选择器的元素出现在 DOM 中 （不用自己去写轮询等待了）
• 等待它显示出来，即不为空，不display:none，不visibility:hidden （这个太人性化了，不用去判断元素是否隐藏）
• 等待它停止移动，例如，直到 css 转换完成
• 将元素滚动到视图中 （这个太人性化了，不用自己去滚动了）
• 等待它在动作点接收指针事件，例如，等待直到元素变得不被其他元素遮挡
• 如果元素在上述任何检查期间分离，则重试

由此可见，click() 方法优化了selenium 点击元素的遇到的一些痛点问题，比如元素遮挡，不在当前屏幕，元素未出现在DOM中或隐藏不可见等不可点击的状态。

聚焦高亮

locator对象.focus() #聚焦
locator对象.highlight()  #高亮

drag_to元素拖动

您可以使用locator.drag_to()执行拖放操作。此方法将：

• 将鼠标悬停在要拖动的元素上。
• 按鼠标左键。
• 将鼠标移动到将接收放置的元素。
• 松开鼠标左键。

#先定位元素，调用drag_to方法到目标元素
page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at"))

#page对象直接调用
page.drag_and_drop(source: str,  target: str)

如果您想精确控制拖动操作，请使用较低级别的方法，如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()两次。操作顺序是：悬停拖动元素，鼠标向下，悬停放置元素，第二次悬停放置元素，鼠标向上。

元素可视区域

playwright 在操作元素的时候，都会自动去让元素出现在可视窗口。大部分情况不需要我们去操作滚动条。

from playwright.sync_api import sync_playwright


with sync_playwright() as pw:
	browser = pw.chromium.launch(headless=False, slow_mo=2000)
	page = browser.new_page()
	
	page.goto("https://www.runoob.com/")
	
	# 滚动元素到屏幕可视窗口
	page.get_by_text('【学习 Django】').scroll_into_view_if_needed()

hover 方法是把鼠标放到元素上，它也会自动去页面上找到元素，让它出现在可视窗口

from playwright.sync_api import sync_playwright


with sync_playwright() as pw:
	browser = pw.chromium.launch(headless=False, slow_mo=2000)
	page = browser.new_page()
	
	page.goto("https://www.runoob.com/")
	
	# 鼠标放到元素上
	page.get_by_text('【学习 Django】').hover()

遍历节点

定位第N个元素

locator可以定位一个或多个元素

a1 = page.locator('[type="checkbox"]')
page.locator().all()
a1.count()   #返回元素个数.用于判断元素是否存在
a1.first.click()  # 点第一个
a1.last.click()   # 点最后个
a1.nth(0).click()  #按照索引

有时页面包含许多相似的元素，很难选择一个特定的元素。例如：

<section>
	<button>Buy</button> 
</section>
<article><div> 
	<button>Buy</button>
</div></article>
<div><div>
	<button>Buy</button> 
</div></div>

我们可以使用:nth-match(:text(“Buy”), 3)从上面的HTML中选择第三个按钮。

# 点击第三个按钮 Bug
page.locator(":nth-match(:text('Buy'), 3)").click()

等待元素

强制等待

Playwright 在查找元素的时候具有自动等待功能

请使用 page.wait_for_timeout(5000) 代替 time.sleep(5)并且最好不要等待超时。这是因为我们内部依赖于异步操作，并且在使用时time.sleep(5)无法正确处理它们。

page.pause()断点

playwright 的page.pause() 断点功能出现，让打开可以愉快的在页面上调试了，我们甚至可以直接使用 playwright.$(selector) 直接支持playwright选择器的方法。

在代码中加入page.pause()进入断点状态,运行后会弹出 playwright inspector 工具

判断页面元素状态

判断元素是否存在

   # 元素存在
    loc1 = page.locator("id=kw")
    print(loc1)
    print(loc1.count())

    # 元素不存在
    loc2 = page.locator('id=yoyo')
    print(loc2)
    print(loc2.count())

• page对象调用的判断方法, 传一个selector 定位参数
  • page.is_checked(selector: str) # checkbox or radio 是否选中
  • page.is_disabled(selector: str) # 元素是否可以点击或编辑
  • page.is_editable(selector: str) # 元素是否可以编辑
  • page.is_enabled(selector: str)# 是否可以操作
  • page.is_hidden(selector: str)# 是否隐藏
  • page.is_visible(selector: str) # 是否可见
• locator 对象调用的判断方法示例locator.is_visible()
• 元素句柄可调用的判断方法示例element_handle.is_visible()

元素句柄（element_handle）是通过page.query_selector()方法调用返回的ElementHandle ，这种一般不常用.
关于元素句柄和locator 定位的区别

wait_for_selector()

wait_for() 方法 和 wait_for_selector()使用区别：

• page.locator(‘定位元素’).wait_for() 返回的是None，后面不能继续操作元素
• page.wait_for_selector(“定位方法”) 返回的是locator 对象，后面可以继续操作元素

在延迟加载的页面中，使用locator.wait_for()等待元素可见是很有用的。

# Navigate and wait for element
page.goto("https://example.com")
page.get_by_text("example domain").wait_for()

• wait_for_selector()
  • timeout:超时时间
  • state 参数可以设置等待状态：”attached”, “detached”, “hidden”, “visible”。

# click/fill这样的页面交互会自动等待元素。
page.goto("https://example.com")
page.get_by_text("example domain").click()

#等待元素可见
page.wait_for_selector("定位方法", state="visible")
page.wait_for_selector("定位方法") #默认是等待元素可见

#等待元素出现在DOM中
page.wait_for_selector("定位方法", state='attached')
#等待从DOM中移除
page.wait_for_selector("定位方法", state='detached')
#等待元素不可见
page.wait_for_selector("定位方法", state='hidden')

关于我

个人博客：https://halo.wenke.fun