本篇详细分享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]): 在表单输入元素中填充文本。
希望大家多多实践~发现问题一起讨论