本篇详细分享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]): 在表单输入元素中填充文本。

希望大家多多实践~发现问题一起讨论