从零开始的Puppeteer（五）

切图仔仔
933 阅读2分钟

通过前四章学习，这一章来和大家一起完善上一章的自动化测试

前置条件

  • 通过前四章，已经搭建起express服务器
  • 通过前四章，已经搭建好vue3界面

image.png

现在我们已经有了一个简单的自动化测试页面，通过点击页面的‘开始测试’按钮，我们向后端发送请求，后端收到后会执行puppeteer脚本，我们已经实现了首页，登录，和发布沸点的简单测试，但是只是一个简单的能判断状态的进度条而已，这一章来实现将错误信息与截图返回给前端进行展示。

image.png

puppeteer完善

首先我们实现一个方法screenshotPath，用来截取图片；将图片存在指定目录下，并返回这个路径，因为这个方法我们会用到很多次，所以将他封装起来。

// utils.js
const dayjs = require("dayjs");

function geTimeFormat(format = "YYYYMMDDHHmmss", date = new Date()) {
    const _date = new dayjs(date).format(format);
    return _date.toString();
}
// [min, max)
function randomFormat(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}
// 截取一个当前时间的图片放在screenshot目录下返回地址与文件名
async function screenshotPath(page) {
    const screenshotPath =
        "./screenshot/" + randomFormat(1, 999999) + geTimeFormat() + ".png";
    await page.screenshot({
        path: screenshotPath,
    });
    return screenshotPath
}
  • 这里引入了dayjs方便操作时间，需要 npm install dayjs
  • 封装一个随机数用来生成随机id 然后我们在上一章已经完成的监听请求中实现截图
 // 监听响应
    function getResponseBody(resolve, reject) {
        page.on("response", async (response) => {
            if (["xhr", "fetch"].includes(response.request().resourceType())) {
                if (response.url().indexOf("/short_msg/publish") >= 0) {
                    let body = await response.json();
                    console.log(body);
                    if (body.err_msg !== "success") {
                        const imgPath = await screenshotPath(page);
                        console.log("imgPath>>", imgPath);
                        body.image = "http://127.0.0.1:3000/" + imgPath;
                        reject(body);
                    } else {
                        resolve({err_msg: null});
                    }
                }
            }
        });
    }
  • 这里包装好的错误格式是{err_msg:'',iamge:''}可以扩展；
  • body.image = "http://127.0.0.1:3000/" + imgPath;这里用的是本地服务所以大家这里写自己的端口号；
  • home.js文件较简单只需要包装一下错误信息即可，就不额外贴代码了；

express完善

现在我们已经可以把错误信息截图，放到指定文件夹下，并返回文件名称给前端；这时需要一个静态文件目录来进行托管，使前端可以通过返回的图片路径进行访问。

// index.js
// 设置静态文件目录
app.use('/screenshot', express.static(__dirname + '/screenshot'))

注意这里的screenshot是puppeteer脚本中你指定放到的目录，这样就可以通过文件目录进行访问图片了。

ui完善

将返回信息进行解析，将返回的图片地址放在url即可

<div class="pins-steps">
      <a-button type="primary" @click="clickCheckListHandle">开始测试</a-button>
      <div class="step-list-box">
        <a-steps :current="currentStep" size="small" :status="stepsStatus" class="step-list">
          <a-step title="开始"></a-step>
          <a-step title="首页测试">
            <template #icon v-if="currentStep === 1 && stepsStatus !== 'error'">
              <loading-outlined />
            </template>
          </a-step>
          <a-step title="发布沸点测试" >
            <template #icon v-if="currentStep === 2 && stepsStatus !== 'error'">
              <loading-outlined />
            </template>
          </a-step>
        </a-steps>
        <div v-if="errInfo.length" class="err-box">
          <div>错误信息：</div>
          <div v-for="(item, index) in errInfo" :key="index">
            <div>
              {{item.err_msg}}
            </div>
            <div>
              <img :src="item.image">
            </div>
          </div>
        </div>
      </div>
    </div>

成果展示

image.png

这样我们就实现了一个完整的自动化测试，大家可以根据这个例子继续扩展，比如文章的自动化发布测试等等，后面待实现的功能：

  • 使用websocket实现消息交互
  • 实现多条测试用例并行执行
  • ui界面展示更加友好
avatar
文章
阅读
粉丝