Playwright基础学习

什么是Playwright

Playwright是微软推出的新一代浏览器自动化框架。

它可以控制chrome、Edge、Firefox、Safari。实现自动点击、自动输入、自动登录、自动下载、自动上传、自动截图、自动录屏、自动测试、自动爬取网页。

人工操作：

打开百度
|
输入世界杯
|
点击搜索
|
获取第一页结果

Playwright：

from playwright.sync_api  import sync_playwright
with sync_playwright() as P:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://www.baidu.coom")
    page.fill("#kw","世界杯") 
    page.click("#su")
    print(page.title())
    browser.close()

整个浏览器自动完成。

安装

pip install playwright

安装浏览器

playwright install

指定浏览器：

playwright install chromium

验证

playwright --version

Playwright的选择器（selector）

playwright的选择器（selector）是自动化测试最核心的内容之一。如果Selenium的重点是XPath，那么Playwright更推荐locator（定位器），它比传统选择器更稳定、更智能。

假设页面如下：

<input id="username" name="user" placeholder="请输入用户名">

<button>登录</button>

<a href="/home">首页</a>

<div class="content">
    Hello
</div>

Playwright的定位：

page.locator("#username")
page.locator(".content")
page.locator("button")

一、最推荐：Locator

Playwright官方推荐所有操作都基于locator（）。

输入：

page.locator("#username").fill("admin")

点击：

page.locator("button").click()

获取文本：

text = page.locator(".content").text_content()

二、CSS选择器（最常用）

CSS与前端开发中的CSS语法一致。

id

page.locator("#username")

对应：

<input id="username">

class

page.locator(".item")

对应：

<div class="item">

标签：

page.locator("button")

对应：

<button>登录</button>

属性

page.locator("[name='user']")

对应：

<input name="user">

多个class

<div class="item active">

定位：

page.locator(".item.active")

后代：

<div class="login">
    <button>登录</button>
</div>

定位：

page.locator(".login button")

子元素

page.locator(".login > button")

根据文本定位

Playwright对文本支持非常好。

<button>登录</button>

定位：

page.get_by_text("登录")

点击：

page.get_by_text("登录").click（）

部分匹配：

page.get_by_text("登录"，exact=False)

根据Placeholder

<input placeholder="请输入用户名">

定位：

page.get_by_placeholder("请输入用户名")

填写：

page.get_by_placeholder("请输入用户名").fill("admin")

根据Label

<label>用户名</label>
<input>

定位：

page.get_by_label("用户名")

根据Alt

<img alt="logo">

定位：

page.get_by_alt_text("logo")

根据Role（官方最推荐）

这是Playwright最强大的定位方式之一，因为它模拟的是用户如何感知页面，而不是依赖DOM结构。

<button>登录</button>

定位：

page.get_by_role("button",name="登录")

输入框：

page.get_by_role("textbox")

复选框：

page.get_by_role("checkbox")

链接：

page.get_by_role("link")

下拉框：

page.get_by_role("combobox")

根据Test ID（企业项目推荐）

给元素加专门用于测试的属性：

<button data-testid="login-btn">

定位：

page.get_by_test_id("login-btn")

这种方式稳定，不容易因为页面样式调整而失效。

XPath（支持但不推荐）

page.locator("//button")

或者：

page.locator("//input[@id='username']")

Playwright支持XPath，但官方更推荐Locator、Role、或Test ID，因为XPath通常更脆弱、可读性也差。

Locator链式操作

<div class="login">
    <button>登录</button>
</div>

可以逐层定位：

page.locator(".login").locator("button")

过滤（filter）

<ul>
    <li>苹果</li>
    <li>香蕉</li>
</ul>

定位包含”香蕉“的项：

page.locator(li).filter(has_text="香蕉")

第几个元素

<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>

第一个：

page.locator("li").first

最后一个：

page.locator("li").last

第二个：

page.locator("li").nth(1)

注意：索引从0开始

判断元素数量

count = page.locator("li").count()
print(count)