影刀初级02课：网页自动化—网页操作之元素编辑

特殊操作-元素编辑

本节官方文档：https://ying-dao.feishu.cn/docx/R7VqdE07QoYceJxVCZIctwQRnCh

主要内容：月份日期元素编辑

案例实现效果：实现下面类型日期的选择

实现流程：

过程拆解：

1、打开订单网页，保存网页对象：https://shop.yingdao.com/element/index

案例一：日期框输入

2、添加“填写输入框”

目标：实现模拟手动输入日期，例如：2025-05-01

（1）先“捕获元素”日期输入框，命名为“日期输入框”

（2）再添加“填写输入框”，操作目标选“日期输入框”元素，输入内容填：2025-05-01{enter}，此时输入完日期后会自动输入回车键

高级选项中勾选“输入内容包含快捷键”，这样才可以通过{}的形式接收快捷键；

案例二：月份选择

3、点击月份选择框

（1）首先“捕获元素”月份选择框，命名为“月份选择”

（2）设置“点击元素”，点击“月份选择”

4、设置变量

目标：通过设置一个全局变量，给其赋值为要选择的月份，便于后续与点击元素绑定

（1）设置全局变量，变量名为“月份”

（2）通过“设置变量”，给全局变量“月份”设置为要选择的月份，例如“八月”

5、点击元素

目标：通过点击上面变量对应的月份，达到选择月份的效果

（1）“捕获元素”，随意捕获一个月份，命名为“月份”

（2）在编辑中将innerText改为全局变量“月份”，这样就可以将其修改为我们上面自定义的月份了

（3）点击元素“月份”，实现点击自定义月份的效果

案例三：日期选择

目标：选择指定月份下面的指定日期

方式一：利用“通用日期选择”

6、“通用日期选择”中设置要选择的日期

（1）先“捕获元素组”全部日期，命名为“日期_相似元素组”

（2）“通用日期选择”中选择上面定义的“日期_相似元素组”，目标日期为要选择的日期，例如“05”，当月1号显示文本“01”，为了明确1号的显示方式

（3）设置好之后即可实现选择指定日期的效果

方式二：利用正则捕获指定月份的日期

7、“通用日期选择”中设置要选择的日期

（1）先“捕获元素”，捕获要选择的日期，例如“02”，命名为“利用正则只捕获指定月份02号”

此时在编辑中如果不勾选td标签的title属性，则会选择2个“02”；

所以需要修改title的属性值为“2025年5月”，匹配方式改为正则，此时就会只显示5月2日了；

 （2）“点击元素”的目标设置为上面捕获的元素“利用正则只捕获指定月份02号”，即可实现指定效果