话不多说，看代码

//登陆页面截图，保存在ScreenShot文件夹，并命名为login_page.png
 await page.screenshot({
        path:'login_page.png'
    }) 
//登陆按钮截图，保存在ScreenShot文件夹，并命名为login_button.png
 await login_btn.screenshot({
 		path:'login_button.png'
 	})

自动化UI测试中如何将测试需要测试的内容呢？

截图是一个很nice的选择，通过截图对比来看UI界面做的是否有问题不失为一种好方法！

直接上API！

---

页面截图

官方文档中，页面截图是这样写的：

page.screenshot([options])

这里的options同样有很多参数，挑几个我会用到的讲讲：

• path：string
  截图的保存路径与命名，string的最后如果加上—— .png 可以识别作为png格式保存，肥肠nice

• type：string
  保存格式，可选jpeg或png
  怎么说……感觉在path中直接加后缀比较方便，不怎么用反正

• fullpage：boolean
  截图只截到露出来的一点点？打开这个开关，全部页面截图，你值得拥有

• clip：x,y,width,height
  这个东西用的好简直神仙，x、y是截图开始位置的坐标，然后俩参数是截图的宽和高，直接就蒙多~想截哪儿就截哪儿

---

元素截图

其实元素截图跟页面截图一样一样的，就是把page变成了元素句柄
上API：

elementHandle.screenshot([options])

这个东西意思就是，想截图的话，只要是页面里的、啥都能截，带上句柄直接用就行

以此类推就行！

---

记录学习、爬坑经验
0年经验小白，欢迎大佬指点！
希望可以帮到你！