0x1 select功能的使用
在当前需要rpa操作的网站，有一个证件类型下拉框，源码如下:
可以看到使用了 select 元素，对应到站点的功能就是下拉框选择。于是我的代码使用了 r.select('//select[ @id="stIdcardCode" ]','居民身份证 ') 这在 windows 上运行了数十次都比较正常，但是在迁移到 Linux 上测试却发现无论如何也勾选不上，这真的是一个令人烦恼的事情。
0x2 问题排查
对比了双方系统的chrome版本，一个108一个109，基本上都是比较高比较新的版本了，问题不应该出在这里，所以我又查看了 tagui 的 src 运行日志如下:
[tagui] INPUT -
[980] {"id":980,"method":"Runtime.evaluate","params":{"expression":"document.evaluate('//*[@id=\"stHoldIdcardNo\"]',document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null).snapshotItem(0).focus()"}}
[tagui] OUTPUT -
[980] {"id":980,"result":{"result":{"type":"undefined"}}}
[tagui] INPUT -
[981] {"id":981,"method":"Input.dispatchKeyEvent","params":{"type":"char","text":"\r"}}
[tagui] OUTPUT -
[981] {"id":981,"result":{}}
[tagui] INPUT -
[982] {"id":982,"method":"Runtime.evaluate","params":{"expression":"document.evaluate('//*[@id=\"stHoldIdcardNo\"]',document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null).snapshotItem(0).focus()"}}
[tagui] OUTPUT -
[982] {"id":982,"result":{"result":{"type":"undefined"}}}
[tagui] INPUT -
[983] {"id":983,"method":"Runtime.evaluate","params":{"expression":"document.evaluate('//*[@id=\"stIdcardCode\"]',document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null).snapshotLength"}}
[tagui] OUTPUT -
[983] {"id":983,"result":{"result":{"type":"number","value":1,"description":"1"}}}
[tagui] INPUT -
[984] {"id":984,"method":"Runtime.evaluate","params":{"expression":"document.evaluate('//*[@id=\"stIdcardCode\"]',document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null).snapshotLength"}}
[tagui] OUTPUT -
[984] {"id":984,"result":{"result":{"type":"number","value":1,"description":"1"}}}
[tagui] INPUT -
[985] {"id":985,"method":"Runtime.evaluate","params":{"expression":"var selector = '//*[@id=\"stIdcardCode\"]'; var valueToMatch = '居民身份证'; var found = false; if ((selector.indexOf('/') == 0) || (selector.indexOf('(') == 0)) var select = document.evaluate(selector,document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null).snapshotItem(0); else var select = document.querySelector(selector); if (valueToMatch == '[clear]') valueToMatch = ''; Array.prototype.forEach.call(select.children, function(opt, i) {if (!found && opt.value.indexOf(valueToMatch) !== -1) {select.selectedIndex = i; found = true;}}); var evt = document.createEvent(\"UIEvents\"); evt.initUIEvent(\"change\", true, true); select.dispatchEvent(evt);"}}
[tagui] OUTPUT -
[985] {"id":985,"result":{"result":{"type":"boolean","value":true}}}
前面的代码都是查找元素是否存在的，最关键的是倒数第二行关于 居民身份证 操作的步骤，从最后一行的返回结果来看是正常，我尝试把这段js拿到chrome控制台手动执行，返回的确实是 True，不过页面上仍然没有勾选 --- 因为我还没有在windows下这样验证与查看tagui日志，所以这样不能证明windows下与Linux下tagui的行为或者代码是一模一样的
0x3 解决方案
tagui的select方法比较简单，代码肯定是没有错误的，windows下无问题，并且根据 Linux 下的执行日志来看，实际上元素是匹配到的，但是最后的勾选 js 可能没有效果。所以最终尝试的解决思路是，一个是看看能否尝试使用 click 来点击选择，另一个是尝试能否自己找到有效的js代码，具体操作如下：
- 根据如上的元素，使用 xpath 路径 click:
# 点击下拉框
r.click('//select[ @id="stIdcardCode" ]')
# 点击所需的内容 try1
r.click('//option[text()=\''+ "居民身份证 " +'\']')
# or
# 点击所需的内容 try2
r.click('(//option)[2]')
经过测试，上面click的方案都没有成功的选择到所需的内容
- 使用 js 来勾选，如下代码:
# 控制台执行
$("#stIdcardCode")[0].selectedIndex = 1
# rpa 执行
r.dom('$("#stIdcardCode")[0].selectedIndex = 1')
为什么是 #stIdcardCode 呢，因为这里是 selector 用法， #表示匹配 id ，然后获取它 0 这个元素，也就是 select 之后设置它为第一个选项，如下图 说明一下这里 selectedIndex 设置为 1 并不是说序号从 1 开始，而是我们所需的值的序号是 1，设置为 0 也是可以的，这里 0 是空，也就是什么都不选择。至此这个麻烦的 select 下拉框的问题也就解决了
PS. 关于无id的元素和其他
在页面下方关于建筑用途的下拉框，此元素只有一个 name 属性，无 id 属性，那么该如何跟上面一样控制呢?
jzyt_json = {
"": 0,
"住宅": 1,
"商业": 2,
"办公": 3,
"工业": 4,
"仓储": 5,
"其他": 7,
"综合": 7
}
fw_jzyt = jzyt_json[fwxx['FWYT']]
r.dom(f'$(\'select[name="stBuildUsed"]\')[0].selectedIndex = {fw_jzyt}')
控制的代码主要是 dom 部分，主要是通过 selector 的方式来匹配 name 属性的内容即可，其他部分的代码，主要是解决不再通过中文来下拉后选择内容，而是通过序号，所以要做一个字段映射一下中文的序号
评论