爬虫定位元素方法

一个a标签，并且链接包含了"/signup"
page.click('a[href*="/signup"]')

一个输入框，并且指定两个属性的值，来输入jiabacci
page.fill("input[name='name'][autocomplete='name']", "jiabacci")

安全操作，等元素出现再点击：

py
inp = page.locator("input[name='name'][autocomplete='name']")  # 定位到目标
inp.wait_for(state="visible")                                   # 等待元素出现在页面并可见
inp.fill("jiabacci")

如果没有明显特征，可以先定位到有特征的的父容器，或者同级元素，使用相对路径方法

py
# 先定位到容器
container = page.locator("layers > div:nth-child(2) > div > div > div > div > div div > div")
# 在容器下找：内部包含 <span> 的 <button>
btn = container.locator("button:has(span)")
btn.first.wait_for(state="visible")
btn.first.click()

年月日多个下拉示范，先定位到父标签，下面三个下拉选择框是同级，因此只要知道位置就行

py
#取年月日父元素
box = page.locator("div[data-viewportview='true']")
box.wait_for(state="visible") # 等待它显示

selects = box.locator("select") # 找它的三个下拉框
# 未找到三个下拉框则退出
assert selects.count() >= 3, "未找到三个下拉框"
# 找年
year_inp = selects.nth(2)
year_inp.wait_for(state="visible")
year_inp.select_option("1994")
# 月
month_inp = selects.nth(0)
month_inp.wait_for(state="visible")
month_inp.select_option("3")
#日
day_inp = selects.nth(1)
day_inp.wait_for(state="visible")
day_inp.select_option("12")

浏览器中定位元素

列出一个div元素，且有某个属性的数量
$$('div[data-viewportview="true"]').length

如果有多个符合条件的元素，取第几个
$$("button[role='button'][type='button']")[2]

相对定位，先找到父标签， 然后它下面的button, has是定位它，但是它下面有span标签
$('div[data-viewportview="true"] button:has(span)');

相对定位，取同级定位到它，然后找它的下一个div中的button
next_div = page.locator('div[data-viewportview="true"] + div button')

相对定位，且排除某个元素，定位父容器div，它下面的div排除掉有a标签的，然后选它下面的button
$('div[data-testid="LoginForm_Footer_Container"] div:not(:has(a)) button');

定位一个属性以什么结尾，找一个按钮，它的data-testid属性以SkipForNowButton结尾(不是等于，是结尾)
$('button[data-testid$="SkipForNowButton"]');

定位一个属性包含了某个字段，找一个按钮，它的data-testid属性包含UsernameNext结尾(不是等于，是包含)
$('button[data-testid*="UsernameNext"]');

按显示文本定位
仅浏览器：
[...document.querySelectorAll('a')].find(n => n.innerText.trim().includes('共谱亚太发展新篇章'));
仅Playwright：
page.locator("span", has_text="你好")
或者
page.locator("span:has-text('你好')")

浏览器内抓包

发送前准备：
Network勾选Preserve log(保留日志)
勾选Disable cache(禁用缓存)
点一下清空(暂停按钮旁边)

如果是HTTP/Fetch/XHR 请求
顶部漏斗图标打开，
顶部类型筛选Fetch/XHR（只看数据请求）

如果是websocket请求
类型筛选Socket，如果不确定也可以两种都筛选

漏斗旁边有个搜索等你发送了信息后，在漏斗的搜索中搜关键词(要按回车才有效)

找到某个请求后
点击这个请求，切换到Initiator查看触发，能跳到源码处