跟网易的长的有点不一样

image.png

canvas格式的元素只能通过这种方式获得

DISTANCE_STR = '''
() => {
    function compare(document) {
      const ctx1 = document.querySelector('.geetest_canvas_fullbg'); // 完成图片
      const ctx2 = document.querySelector('.geetest_canvas_bg');  // 带缺口图片
      const pixelDifference = 30; // 像素差
      let res = [];

      for(let i=57;i<260;i++){
        for(let j=1;j<160;j++) {
          const imgData1 = ctx1.getContext("2d").getImageData(1*i,1*j,1,1)
          const imgData2 = ctx2.getContext("2d").getImageData(1*i,1*j,1,1)
          const data1 = imgData1.data;
          const data2 = imgData2.data;
          const res1=Math.abs(data1[0]-data2[0]);
          const res2=Math.abs(data1[1]-data2[1]);
          const res3=Math.abs(data1[2]-data2[2]);
              if(!(res1 < pixelDifference && res2 < pixelDifference && res3 < pixelDifference)) {
                if(!res.includes(i)) {
                  res.push(i);
                }
              }  
        }
      }
      return {min:res[0]+25,max:res[res.length-1]-20}
    }
    return compare(document)
  }
'''

只能通过javascript获取整张图的像素矩阵，而不是像网易那种url，然后再截图的形式，所以这里的计算合适距离也只能用最原始的对比每个点的像素差这种方法，这里面的160,200是图片的高和宽，57是像素块的宽度,30设定的像素差是一个实验值,最后返回的+25-20同样是测试后效果比较稳定的实验值

第二个不同是滑动时，要求较为严格，需要人为设置更多的抖动

async def slide(pages, distance):
    el = await pages[0].querySelector('div.geetest_slider_button')
    box = await el.boundingBox()
    distance1 = distance - 10
    distance2 = 10
    await pages[0].hover('div.geetest_slider_button')
    await pages[0].mouse.down()
    await pages[0].mouse.move(box['x']+distance1,box['y'],{'steps':30}) # 模拟帕金森
    await pages[0].waitFor(500) # 模拟帕金森
    await pages[0].mouse.move(box['x']+distance+15,box['y']+3,{'steps':10}) # 模拟帕金森
    await pages[0].mouse.move(box['x']+distance-5,box['y']+2,{'steps':10}) # 模拟帕金森
    await pages[0].mouse.move(box['x']+distance,box['y']-1,{'steps':10}) # 模拟帕金森
    await pages[0].mouse.up()

其他代码跟教程7差别不大。