本篇详细分享playwright如何进行打断点、元素定位、填写输入框、点击等操作
目录
一、PyCharm打断点进行调试
二、浏览器开发者模式检查元素
三、通过CSS或XPath进行定位
四、输入框输入文本操作
五、点击操作
总结
一、PyCharm打断点进行调试
如图所示，我们在page.goto创建新页面并导航后打了断点，再运行debug调试
程序会在运行完page.goto("https://www.baidu.com")这句代码后暂停，我们可以看到在有头模式下会弹出谷歌浏览器导航窗口，百度界面。
二、浏览器开发者模式检查元素
在弹出的浏览器导航窗口中单机鼠标右键--选择检查
就会弹出浏览器的开发者界面，点击红框处我们可以设置这个界面的位置靠左靠右或者靠下
点击所标示的箭头就可以在页面中选择一个元素进行检查，比如我们选择百度输入框进行检查：
三、通过CSS或XPath进行定位
我们可以通过如上图输入框标签的属性值，如input中的 id="kw" name="wd"，去对百度输入框元素进行定位。比如我们通过CSS Selector定位，按ctrl+f会在开发者工具的顶部或者底部弹出一个搜索框，我们输入#kw，可以看到能搜到百度输入框：
也可以通过XPath定位，同上述方法在搜索框输入//input[@name='wd']，也能搜到百度搜索框且是唯一的
四、输入框输入文本操作
调试试验步骤三中的定位元素是否有效，用到playwright的两个方法：
page.locator(selector): 创建一个定位器对象，用于查找和操作页面上的元素。selector可以是CSS选择器、XPath等。
page.fill(selector, value[, options]): 在表单输入元素中填充文本。
我们回到pycharm中继续进行调试，在调试框中如下红色框按钮Evaluate Expression 评估表达式，点击红色框按钮会弹出一个Evaluate对话框，我们可以在Expression输入框中输入接下来我们希望运行的代码page.locator('//input[@name="wd"]').fill("搜索")，并点击Evaluate进行实验运行，即按上个步骤通过XPath进行定位，看到运行结果None，没有报错
此时我们再回到浏览器导航窗口，发现界面已经发生变化，搜索框中按我们预设的输入了 “搜索”二字。我们可以将page.locator('//input[@name="wd"]').fill("搜索")这句代码copy到代码主体中使用。
同样我们也可以通过CSS定位 page.locator('#kw').fill("搜索")，结果是一样的，但是建议最好使用在开发者工具搜索框搜到唯一值的方法。
五、点击操作
类似步骤四，用到playwright的模拟点击方法：
page.click(selector[, options]): 在指定的元素上模拟点击操作。
同步骤四一样，我们先在浏览器确定元素定位，再到pycharm进行调试试验代码
经过调试试验点击百度一下搜索按钮后，浏览器显示内容发生变化，同样我们将调试代码copy到代码主体中。
经过上述调试步骤，我们得到完整的代码，实现操作浏览器导航www.baidu.com，在百度搜索框输入”搜索“二字，再点击百度一下按钮进行搜索，最后关闭浏览器：
from playwright.sync_api import sync_playwright
def usage_1():with sync_playwright() as p:#启动谷歌浏览器实例browser = p.chromium.launch(headless=False)page = browser.new_page()page.goto("https://www.baidu.com")# 在搜索框中输入关键词page.locator('//input[@name="wd"]').fill("搜索")# 点击“百度一下”按钮进行搜索page.click("//input[@value='百度一下']")browser.close()usage_1()总结
该篇文章拆解了playwright的元素定位、输入框输入文本、以及点击操作，结合了pycharm的断点调试、浏览器开发者模式检查元素，用到了以下元素操作方法：
page.locator(selector): 创建一个定位器对象，用于查找和操作页面上的元素。selector可以是CSS选择器、XPath等。
page.click(selector[, options]): 在指定的元素上模拟点击操作。
page.fill(selector, value[, options]): 在表单输入元素中填充文本。
希望大家多多实践~发现问题一起讨论
