基于puppeteer的封装实战

最新推荐文章于 2024-09-24 07:52:24 发布

风蛍月缓缓

最新推荐文章于 2024-09-24 07:52:24 发布

阅读量902

点赞数 1

分类专栏：测试开发文章标签： javascript chrome

本文链接：https://blog.csdn.net/LinPTester/article/details/120296129

版权

测试开发专栏收录该内容

2 篇文章

订阅专栏

一、Hades介绍

Hades自动化框架介绍

源码

https://github.com/puppeteer/puppeteer/
在这里插入图片描述

同时，想要更好的去使用该项目，需要一定的JavaScript语法基础，可以参考下JavaScript教程

二、从0到1安装

基础环境安装
安装Nodejs，https://nodejs.org/en/download/ 安装有点慢，需要耐心等待
验证是否已经安装成功
在这里插入图片描述

初始化项目
新建UI自动化项目saas-uitest
执行 yarn install，安装依赖环境
至此，所有环境已经安装成功，可以进行用例编写了
在这里插入图片描述

三、架构解析及Saas分层

安装完基础环境后，可进行对应repo代码的拉取，分支为https://****
在这里插入图片描述

四、常用方法介绍

– /lib/function/下封装了我们常用的公共方法和基于业务的常用方法，接下来就给大家讲一下常用的公共方法：

1、常用的操作方法

op-common.js 常用操作方法

    logout,                 //封装登出方法
    setText,                // 选中文本框，并输入文本
    getElementAttribute,    // 获取某元素的属性值，如class、href
    getElementText,         // 获取某元素的文本值
    getElementsText,        // 获取批量元素的文本值
    getElementPosition,     // 获取某元素的位置坐标：boundingBox

    pressEsc,               // 按键盘Esc键，可以取消模型选中状态
    pressEnter,             // 按回车键
    clickConfirm,           // 点击确定、确认按钮
    clickCancel,            // 点击取消按钮
    clickCloseButton,       // 点击弹窗上的关闭按钮
    setCheckBoxValue,       // 设置checkbox勾选状态

    waitForDisappear,       // 等待某项元素消失
    responseInterception,   // 拦截页面请求，并得到返回值。在触发请求操作前调用

    hoverElement,           //将鼠标hover到指定的selector,若有多个匹配的元素, hover第一个
    hoverElementByText,     //鼠标hover到指定的text,若有多个匹配的元素

    openPanguMenu,          //封装通用的盘古应用进入方法

check-common.js 常用check函数

    checkPageTitleEqual,        // 验证当前page的title值
    checkIsElementExist,        // 验证某元素是否存在
    checkAttrValueEqual,        // 验证某元素属性值
    checkAttrValueContain,      // 验证某元素属性是否包含 期望文本
    checkTextEqual,             // 验证某元素文本值
    checkTextContain,           // 验证某元素文本值 是否包含期望文本
    checkTextNotContain,        // 验证某元素文本值 是否不包含某期望文本
    checkIsTextExist,           // 验证某项文本是否存在，可用于验证toast
    checkImgDiff,               // 图片对比校验，比对结果一定精度范围内认为通过
    checkIsPageUrlExist,        // 根据url判断page是否存在，可用于验证跳转新页面的场景

二次封装函数的好处在于，可以对某类操作进行统一处理，方便复用，减少业务用例的冗余
在这里插入图片描述

我们能用到的操作基本都在这里面涵盖了。

在这里插入图片描述

四、写一个Demo


/**
 * @Description 查看方案详情场景测试用例
 */
//导入pybell依赖包
const { pyBell } = require("@qunhe/pybell")
//获取用户列表
const { UserList: { User }, DesignList} = require("../../global/configs")
//获取selector信息
let {commonSelector, designSelector} = require("../../lib/selector");
//获取function
const {
    commonOption,
    checkCommon, opSaasDesign, saasDesignOption

} = require("../../lib/function")
const {userCommon} = require("@qunhe/pybell-extend-user-common");

/* 配置合适的timeOut */

//常量const、let局部变量
const timeout_case = 800 * 1000

let copyDesign

describe("方案详情页", () => {
    //全局前置条件
    beforeAll(async () => {
        await commonOption.login(User)
    },timeout_case)

    //全局后置条件
    afterAll(async () => {
        //await commonOption.logout()
    },timeout_case)
    //case前置条件
    beforeEach(async () => {
        //每个用例的执行前置条件
        await saasDesignOption.openDesignList()
    },timeout_case)
    afterEach(async () => {
        await pyBell.log("Test AfterEach")
    })


    test("方案列表页-展示",async () => {
        saasDesignOption.findDesignOfName("方案1")
        await pyBell.sleep(10000)
    },timeout_case)

}
)