Playwright之元素定位:
from playwright.sync_api import sync_playwright
p = sync_playwright().start()
browser = p.chromium.launch(headless=False)# 创建浏览器对象
page = browser.new_page()
page.goto("https://www.byhy.net/_files/stock1.html") #进入网站
# 输入通讯，点击查询
page.locator('#kw').fill('通讯')
page.locator('#go').click()
page.wait_for_timeout(1000)
# 打印所有搜索内容
lcs = page.locator(".result-item").all()
for lc in lcs:
print(lc.inner_text())
- 点击元素，
click()方法 - 元素内输入文本，
fill()方法 - 获取元素内部文本，
inner_text()方法
CSS Selector 定位原理
一种方式是自己写，大家如果有网站开发经验，这一部分会比较轻松。
第二章方式根据开发者工具(F12)协助。
在Playwright 中，根据 CSS Selector 进行定位元素，就是使用页面对象的 Locator 类型的对象来进行操作。
page.locator('#kw')
page.locator('#go')
标签名：
获取所有的tag名为div的元素的内部可见文本。
from playwright.sync_api import sync_playwright
p = sync_playwright().start()
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://cdn2.byhy.net/files/selenium/sample1.html")
divs=page.locator('div').all()
for div in divs:
print(div.inner_text())
但是我们如果想一次性提取出所有的div标签下的内容呢？
我们可以使用all_inner_texts()方法，这个会将相应标签下的内容都放在一个列表中，会一次性全部提取出来。
from playwright.sync_api import sync_playwright
p = sync_playwright().start()
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://cdn2.byhy.net/files/selenium/sample1.html")
texts = page.locator('div').all_inner_texts()
print(texts)
id属性：
根据id属性来进行选择元素，其语法是在id号前面加上一个#号： #id值.
search = page.locator('#searchtext')
search.fill('666')
class属性：
根据class属性来进行选择元素，其语法是在class号前面加上一个.号： .class值`.
demo = page.locator('.kw')
多class问题：
假如一个标签存在多个class属性值，即aaa bbb,这两个属性都是其属性值，但是我们在进行选择器定位的时候，不能使用：
demo = page.locator('.aaa .bbb')
应该使用：
demo = page.locator('.aaa')
# 或者
demo = page.locator('.bbb')
也可以使用：
demo = page.locator('.aaa.bbb') # 不能有空格！！！！
匹配元素：
匹配多个元素，这多用于将所有的标签都遍历，然后得到其内容。
locators = page.locator('.xxx').all()
.all() 返回的是个Locator列表，相当于一个可迭代对象，如下：
[<Locator frame=<Frame name= url='https://cdn2.byhy.net/files/selenium/sample1.html'> selector='div >> nth=0'>, <Locator frame=<Frame name= url='https://cdn2.byhy.net/files/selenium/sample1.html'> selector='div >> nth=1'>]
获取数量：
count = page.locator('div').count()
获取某个：
第一个：
lct = page.locator('div').first
print(lct.inner_text())
最后一个：
lct = page.locator('div').last
print(lct.inner_text())
某一个：
lct = page.locator('.plant')
print(lct.nth(5).inner_text()) # 获取第五个
父子关系定位：
father = page.locator('#bottom')
# 在 #bottom 对应元素的范围内 寻找标签名为 span 的元素。
sons = father.locator('span').all()
for son in sons:
print(e.inner_text())
这种语法还是比较常见的，在xpath或者bs4或者css选择器，都有类似的用法。
根据属性选择：
from playwright.sync_api import sync_playwright
p = sync_playwright().start()
browser = p.chromium.launch(headless=False, slow_mo=50)
page = browser.new_page()
page.goto("https://cdn2.byhy.net/files/selenium/sample1.html")
# 根据href属性选择元素
element = page.locator('a[href="http://www.miitbeian.gov.cn"]')
# 打印出元素文本
print(element.inner_text())
包含：
a[href*="miitbeian"]
a节点的href属性包含了 miitbeian 字符串，可以使用 *.
开头：
a[href^="http"]
a节点的href属性值以 http 字符串开头，可以使用 ^.
结尾：
a[href$="gov.cn"]
a节点的href属性值以 gov.cn 字符串结尾，可以使用 $.
多个属性值：
div[class="misc"][ctype="gun"]
组选择：
顾名思义，就是选定一组标签，一般是通过 ，隔开。
.plant , .animal
当然这样写可以实现交互定位，就是 既符合前面的，又符合后面的。
div,#BYHY
关于xpath：
这些就足够了，其实真正在开发的时候，更多的是改代码，看懂代码，还有同学会问，xpath可以定位吗？
当然可以了，那么xpath怎么写呢？
css选择器写法：
element = page.locator('[href="http://www.miitbeian.gov.cn"]')
xpath选择器写法：
element = page.locator('//*[@href="http://www.miitbeian.gov.cn"]')
没错，就是将css的位置转化为xpath，playright会自动取找，不用指定xpath还是css选择器。
总结：
在这篇博客中，我们深入探讨了Playwright的元素定位功能，以及与之相关的CSS知识。我们首先介绍了Playwright的元素定位方法，包括基本的CSS选择器和XPath表达式。随后，我们深入讨论了如何使用这些方法来准确地定位页面元素，以便进行自动化测试和网页操作。此外，我们还涉及了一些与CSS选择器相关的知识，帮助读者更好地理解元素定位的原理。通过本文的学习，读者可以更好地掌握Playwright的元素定位功能，并在实际项目中灵活运用CSS知识来定位和操作网页元素。
