puppeteer,解决无法选择父元素的兄弟元素的问题

页面原型如下,是一个下拉框组件,无关的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)
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值