页面原型如下,是一个下拉框组件,无关的CSS样式之类的省略了。
<div>
<div>
<input name='x'>
</div>
<div>
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
</div>
</div>
问题是,使用puppeteer自动化测试,无法click Item,原因是拿不到<div>Item1</div>
等等元素。
这个问题的原因是,CSS 选择器中,没有选择父元素的选择器。
通过input[name=x],可以选择到输入框;但是其父元素,拿不到。
搞了半天也没有什么现成的办法。
最终通过下面的方法搞定了。就是利用puppeteer.evaluate方法,执行JS,给各个Item上加上id,那么再调用click就很简单了。
代码如下:
// 点击 input name=x 的下拉框中的Item1
let name = 'x'
let value = 'Item1'
let result = await this.page.evaluate((name, value) => {
let result = -1
let list = document.querySelector('[name=' + name + ']').parentElement.parentElement.children[1].children)
for (let i = 0; i < list.length; i++) {
let c = list[i]
c.id = '_select_' + name + '_' + i
if (c.innerText === value) { // found ?
result = i
}
}
return result
}, name, value)
if (result == -1) {
throw new Error(value + ' not found!!')
}
await this.page.click('#_select_x_' + result)