Tips:自动化测试中的截图

本文将以puppeteer为例子介绍

1. 截图函数
   在自动化测试或者功能测试中，复现bug都是一件必须做的事情，而测试人员都会习惯的截图保留失败的场景，自动化测试页不例外需要记录。
   截图函数：page.screenshot([options])
   options <Object> Options object which might have the following properties:
   path <string> The file path to save the image to. The screenshot type will be inferred from file extension. If path is a relative path, then it is resolved relative to current working directory. If no path is provided, the image won't be saved to the disk.
   type <string> Specify screenshot type, can be either jpeg or png. Defaults to 'png'.
   quality <number> The quality of the image, between 0-100. Not applicable to png images.
   fullPage <boolean> When true, takes a screenshot of the full scrollable page. Defaults to false.
   clip <Object> An object which specifies clipping region of the page. Should have the following fields:
   x <number> x-coordinate of top-left corner of clip area
   y <number> y-coordinate of top-left corner of clip area
   width <number> width of clipping area
   height <number> height of clipping area
   omitBackground <boolean> Hides default white background and allows capturing screenshots with transparency. Defaults to false.
   encoding <string> The encoding of the image, can be either base64 or binary. Defaults to binary.
   returns: <Promise<string|Buffer>> Promise which resolves to buffer or a base64 string (depending on the value of encoding) with captured screenshot.
   2.命名图片
   2.1.时间格式
   async function getScreenshot() {
   const timestamp = Date.parse(new Date());
   const path = 'temp/timestamp';
   await page.screenshot({path});
   }
   2.2.uuid
   async function getScreenshot() {
   const path = 'temp/${uuid.v1()}';
   await page.screenshot({path});
   }
   2.3 自定义
   saync function getScreenshot(name) {
   const path = 'temp/${name}';
   page.screenshot({path});
   }
   3.高亮截图
   1.高亮函数
   async function highLightElement( selector){
   await page.evaluate("document.querySelector("" + selector + "").style.border="1px solid red"");
   }
   2.高亮截图
   async function highLightScreenshots(selector) {
   const path = 'temp/${uuid.v1()}';
   await this.highLightElement(selector);
   await page.screenshot({path});
   }
   4.在自动化中的应用
   4.1 用例失败后，截图，jest中可以使用[afterAll(fn, timeout)]
   4.2 在case重要的步骤后，截图
   4.3 设置截图等级，最高的定义在每个操作步骤后截图，比如，在封装好的click函数中加入截图
   async function click(_node,selector) {
   let ele = await this.getElement(_node,selector);
   await this.highLightScreenshots(_node, selector);
   await ele.click();
   };