playwright系列文章目录

00Mac安装playwright
00Mac 安装配置Python3虚拟环境（VirtualEnv、virtualenvwrapper扩展包）

---

---

前言

本文主要介绍playwright的常见的定位方式，在介绍之前，简单介绍一下它的录制功能。下一篇通过一个简单的实战小demo来介绍一下实际应用。

---

一、实现一个demo

1.在Terminal终端输入： playwright codegen

2.会自动开始动作脚本录制

将about:blank清除，输入www.baidu.com

搜索关键字：测速，会将操作动作都记录下来，形成脚本，可复制到pycharm中直接使用

二、通过CSS、XPath定位

Playwright 支持 CSS 和 XPath 选择器， css= 或 xpath= 前缀可省略，会自动检测它们

# CSS方法
# page.locator("css=#kw").fill("米兰")
page.locator("#kw").fill("米兰")


# xpash方法
# page.locator('xpath=//*[@id="su"]').click()
page.locator('//*[@id="su"]').click()

三、通过文本定位

语法：get_by_test()

关键字：换一换

    #text文本的方法
    #text=xxxx,模糊匹配，大小写不敏感
    #text = 'xxxx', 精准匹配，大小写敏感
    page.locator('text=米兰的最新相关信息').click()
    #方式1
    page.locator('text=换一换').click()   #能定位到


    #方式2
    #可以通过元素包含的文本找到该元素
    page.get_by_text('换一换').click()    #能定位到
    # 输入部分文本，模糊匹配
    page.get_by_text(re.compile('换一')).click()   #能定位到
    #精准匹配
    page.get_by_text('换一',exact=True).click()     #定位不到   

• 按文本匹配始终会规范化空格，即使完全匹配也是如此。例如，它将多个空格转换为一个空格，将换行符转换为空格，并忽略前导和尾随空格。
• 建议使用文本定位器来查找非交互式元素，如 div、span、p 等。对于button、a、input等交互式元素，请使用角色定位器。

DOM结构

四、通过角色定位

语法：get_by_role()

page.get_by_role("button", name="百度一下").click()

• 角色定位器包括按钮、复选框、标题、链接、列表、表格等，许多 html 元素都具有隐式定义的角色，该角色可由角色定位器识别。
• 优先考虑角色定位器来定位元素，因为这是最接近用户和辅助技术感知页面的方式。

DOM结构

五、通过标题定位

语法：get_by_title()

page.get_by_title("清空").click()

DOM结构

六、通过占位符定位

语法：get_by_placeholder()

frame = page.frame_locator('//html//body//div[3]//div[3]//div[1]//div//div[3]//div[1]//div[2]//iframe')
frame.get_by_placeholder('邮箱账号或手机号码').fill('lijiajia@xx.com')
frame.get_by_placeholder("输入密码").fill('Aa123456')

DOM结构

七、通过标签定位

语法：get_by_lable()

注意：大多数表单控件通常都有专用标签，可以方便地用于与表单交互。在这种情况下，您可以使用page.get_by_label()通过其关联标签定位控件

1.frame.get_by_label('30天内免登录').click()
2.page.get_by_label("Password").fill("Aa123456")

DOM结构

八、通过替代文本定位元素，通常是图像

语法：get_by_alt_text

page.get_by_alt_text('公安').click()

DOM结构：alt=“公安”

九、通过设置自定义测试 ID 属性

语法：page.get_by_test_id（）

// A code block
var foo = 'bar';

DOM结构

十、网页类的操作

    #访问网址
    page.goto('https://mail.163.com/')
    page.goto('https://www.baidu.com')
    page.go_back()       #后退
    page.go_forward()    #前进
    page.reload()        #刷新
    print(page.url)      #当前url
    print(page.title())
    print(page.content())  #页面源代码

十一、元素类操作

page.goto("https://www.baidu.com/")
page.locator("#kw").fill("米兰") #输入
time.sleep(2)
page.locator("#kw").clear()  #清空
time.sleep(2)
page.get_by_role('button').dblclick()  #双击
time.sleep(2)
print(page.locator("#kw").get_attribute('name')) #获取元素的属性

十二、窗口类操作

    page.goto("https://www.zhibo8.com/")
    #对于新tab窗口的处理
    with context.expect_page() as new_page_info:
        #click预期会产生一个新的窗口tab
        page.get_by_role('link',name='个人').click()

    new_page = new_page_info.value
    new_page.get_by_role('link',name='已购方案').click()

    with context.expect_page() as new_page_info1:
        page.get_by_role('link', name='数据').click()

    data_page=new_page_info1.value
    data_page.get_by_role('link',name='赛程').click()

十三、鼠标类的操作

鼠标的移动

    1.drag_to()
    拖拽鼠标从某个元素到另一个元素上
    page.goto("https://sahitest.com/demo/dragDropMooTools.htm")
    page.locator('#dragger').drag_to(page.locator("text=Item 1"))

    2.drag and drop()
    page.drag_and_drop('#dragger','text=Item 1')

鼠标移动到元素上停留

#hover()
    page.goto("https://www.baidu.com/")
    set_element=page.locator('#s-usersetting-top') 
    set_element.hover()
-------------------------------------------------------

dropdown = page.locator('.dropdown--hoverable')
    # 鼠标悬停
dropdown.hover()
    # 点选项
dropdown.locator('.dropdown__link >> text=python').click()

---