Web自动化测试,一定得掌握的 8 个核心知识点

使用 cypress 进行端对端测试,和其他的一些框架有一个显著不同的地方,它使用 javascript 作为编程语言。传统主流的 selenium 框架是支持多语言的,大多数 QA 会的python 和 java 语言都可以编写 selenium 代码,遇到需要编写 js 代码的 cypress,以为又要学习一门编程语言,慢慢就放弃了。

其实学习 cypress 只需要掌握一些基础语法就够了。

1、变量

在 js 里用 let 这个关键字定义变量,当一行代码结束后,可以用分号 ; 隔开。

 let name = 'yuz' // ; or not 

浏览器当中都内置了 js 的解释器,上面的代码可以直接在浏览器中运行。按 F12 打开浏览器的开发者工具,点击 console 标签页,就可以输入 js 代码了。

除了浏览器环境,也可以通过 node.js 环境运行代码。我们可以把上面的代码保存到 demo.js 文件中,然后在命令行工具中输入 node 指令运行代码。

 node /path/to/demo.js

2、条件分支

js 的条件分支主要需要注意条件表达式要用括号包裹。

  let age = 17if (age > 18) {canSmoke = true}else {canSmoke = false}console.log("can i smoke? " + canSmoke)

 在 js 的条件分支代码中,如果代码逻辑比较简单,经常使用三元运算符简化代码,它的使用方式是通过 ?表示。上面的代码可以改成三元运算符形式:

 let age = 17let canSmoke = (age > 18) ? true : false // false

3、函数 (Function)

定义函数时使用 function 关键字,然后是函数名,括号里填入参数,参数之间用逗号隔开,最后是花括号之间的代码(即“函数体”),函数的返回值使用 return 关键字。

  function add (a, b) {return a + b}let res = add(3, 4)

4、箭头函数 (Arrow function)

箭头函数在 js 使用中非常普遍,他能简化普通函数的写法。上面的普通函数改成箭头函数

 add = (a, b) => {return a + b}add(3, 4)

5、回调函数(Callback)

在 js 代码编写中,经常需要用到回调函数。它允许我们采用异步方式编程,当执行完一个任务以后,再通过回调触发另外的任务。

function print(string, callback) {let wait =  Math.random() * 5000;setTimeout(() => {console.log(string);callback();}, wait);}

 在上面的例子中,print 函数允许程序随机等待 5 秒内的时间,再打印字符串,最终触发回调函数。在调用该函数时,可以通过箭头函数指定一个回调函数,比如打印"finished"。

print("hello", () => console.log("finished") )

回调函数如果不嵌套调用,是一个非常好的工具。但是一旦嵌套调用,会陷入“回调地狱” 。陷入回调地狱的代码加入 try catch 异常捕获之后,层次非常不清晰,严重影响阅读。

print("first", () => {print("second", () => {print("last", () => console.log("finished"))})})

6、Promise

Promise 是在异步编程中替代回调函数的编程方式。我们可以在函数中创建一个 Promise 对象,这个对象需要传递一个函数作为参数,通常可以写成箭头函数的形式。

箭头函数有两个特定参数 resolve 和 reject,resolve 负责把程序的正常结果返回出去, reject 负责程序出现异常时,把异常情况返回出去。

 function print (string) {let promise = new Promise( (resolve, reject) => {let wait =  Math.random() * 5000;setTimeout(() => {}, wait);resolve(string);reject(new Error());})return promise;}let promise = print("some thing");promise.then( result => console.log('first'), err => {} ).then( result => console.log('second'), err => {} ).then( result => console.log('last'), err => {} )

 7、Async / Await

Promise 比普通回调函数的方式更容易编写,但是也涉及到 resolve,reject 和 then 等很多概念,如果 then 很多,代码也不好看。Async/Await 是以更舒适的方式使用 promise 的一种特殊语法,同时它也非常易于理解和使用。我们只需要在普通函数前面加上 async 关键字,那么这个函数的返回值将是一个 promise 对象。

async function print() {return 8;}print() // Promise {: 8}

 虽然函数在定义的时候确定了返回值是 8,但是当调用 print 函数时,得到的是一个 Promise, 而不是 8 。如果需要获取到其中返回值,可以通过 then 方法:

let promise = print()promise.then( (result) => console.log(result) )

如果觉得 then 写法不喜欢,可以换成 await 获取返回值:

 let promise = print()console.log(await promise)// orlet result = await print()

之前的回调函数例子可以改写成 async / await 的形式:

async function print (string) {let wait =  Math.random() * 5000;setTimeout(() => {}, wait);return string;}console.log(await print("first"))console.log(await print("second"))console.log(await print("last"))

8、mocha&chai


当编写完一些 js 代码之后,你需要对这些代码进行测试,保证代码能按预期执行,并得到预期结果。而 mocha 是一个非常出色的 js 单元测试框架,chai 专门处理断言。需要使用这两个框架时,先通过 npm 安装:

  npm install mocha chai

接着就可以写用例了,用例最好写到以 test 命名的目录中,每一个 js 文件就是一个规范(spec),它表示被测试的函数应该是怎样的。在这个规范文件中,包含了对功能的描述(describe)和测试用例(it)以及断言情况(assert)。编写好测试代码后,进入文件目录,在命令行通过 npx mocha 运行。

 // test/mocha.spec.jsconst assert = require('assert');// the function to be testedfunction pow(a, b) {return a ** b};// testsdescribe("pow", () => {it('pow of 2 and 3', () => {let actual = pow(2, 3);assert.equal(actual, 8);})it('pow of string and 3', () => {let actual = pow("a", 3);assert.equal(actual, 8);})})

正如你所看到的,一个规范包含三个部分:

  1. describe

表示我们正在描述的功能是什么。在我们的例子中我们正在描述函数 pow。描述的作用是组织测试用例(it),在一个描述中,通常会包含多个 it 用例。

  1. it

需要执行的用例,第二个参数是用于测试 pow 函数的代码,通常来说是一个函数。

  1. assert

断言,表示测试的结果是否符合预期。

cypress 框架 对 mocha 进行了集成,编写测试代码用的正是 mocha 的表示方法,所以学好 mocha, cypress 就学会了一半。下面这个例子就是 cypress 执行浏览器测试的代码,可以看出,和 mocha 没有区别,只是在 cypress 中,不能直接使用 assert 这种显性断言方式。

 describe("go to the home page", () => {it('title contains', () => {cy.visit("http://www.testingpai.com")cy.title().should('include', '测试派')});})

9、总结

要进行浏览器端的自动化测试,掌握核心的 js 用法是必不可少的,本文提到的 8 个知识点,都会频繁用到。

  • 通过 let 关键字命名变量。
  • 通过 if 和三元表达式控制条件。
  • 普通的 function 形式函数定义。
  • 箭头函数也经常使用,有点类似匿名函数。
  • 回调函数在 js 当中非常常见,但是会遇到回调地狱的问题。
  • Promise 是解决回调地狱的有效手段,promise 和 then 的用法会经常碰到。
  • Async / Await 是另一种更优雅的使用 promise 的方式,更推荐使用。

感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

 

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/619264.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux文件描述符管理

在实际的项目开发中,文件描述符是经常用到的并且在释放资源过程中也是很容易忽略的,使用之后不释放就会增加cpu负担,无异于内存泄漏;所以时刻掌握文件描述符的状态是非常重要的!下面介绍文件描述符的管理方法。 1. 文…

好用的便签有哪些?windows便签工具在哪打开?

每当我8点准时上班,在等待电脑开机的过程,我都会习惯性地思考整理今天要晚上的任务,列出所要完成的待办事项。随着每一项任务的清晰呈现,我的心情也逐渐明朗起来。当然了,这个时候,我迫切需要一款好用的便签…

VS游戏打包教程

我用得天天酷跑小游戏做的例子 1:安装打包插件 2:在解决方案里新建一个项目 3:新建一个setup项目 4:界面如下(通过右键folder,可以创建folder目录和输出) 5:素材文件 6:素材放完了就项目输出 7:创建快捷方式 右键这个主输出选择第一个create shortcut 8:将这个快捷方式,拖到,…

算法通关村番外篇-LeetCode编程从0到1系列一

大家好我是苏麟 , 今天开始带来LeetCode编程从0到1系列 . 编程基础 0 到 1 , 50 题掌握基础编程能力 大纲 1768.交替合并字符串389. 找不同28. 找出字符串中第一个匹配项的下标242. 有效的字母异位词459. 重复的子字符串283. 移动零66. 加一1822. 数组元素积的符号1502. 判断能…

02二位数组算法

1.杨辉三角 算法思想&#xff1a; a[i][j]a[i-1][j]a[i-1][j-1];代码&#xff1a; #include<iostream> using namespace std; const int N 1e2 10; int a[N][N]; int main() {int n; cin >> n;a[1][1] a[2][1] a[2][2] 1;for (int i 3; i < n; i) {for…

【已解决】C语言如何使用宽字符输出中文

本博文源于笔者正在运行的程序想要在宽字符下运行中文wchar_t wstr[10]L"12凡人";想要正确输出它。 问题来源 想要正确输入宽字符下的中文 问题解决方案 #include<stdio.h> #include<locale.h> int main() {setlocale(LC_ALL, "zh-cn");wc…

Canopen学习笔记——sync同步报文增加数据域(同步计数器)

1.Canfestival同步报文sync的设置 在OD表中的配置如下&#xff1a; 如果0x1006索引的同步报文循环周期时间设置为0则禁用同步报文&#xff0c;这里要注意的就是&#xff0c;上面第一张图也提到了&#xff0c;时间单位是us。第二张图&#xff0c;我的0x1006就设置为0xF4240,也就…

Java面试之虚拟机

1、前言 本篇的面试题基于网络整理&#xff0c;和自己编辑。在不断的完善补充哦。 2、什么是虚拟机&#xff1f; Java 虚拟机&#xff0c;是一个可以执行 Java 字节码的虚拟机进程。Java 源文件被编译成能被 Java 虚拟机执行的字节码文件( .class )。 Java 被设计成允许应用程…

LeetCode讲解篇之90. 子集 II

文章目录 题目描述题解思路题解代码 题目描述 题解思路 初始化一个变量start表示当前从哪里开始遍历nums 搜索过程的数字组合加入结果集 从start开始遍历nums 如果当前元素和前一个元素相等&#xff0c;前一个元素没被使用&#xff0c;则触发剪枝去重操作&#xff0c;跳过当…

华为机试真题实战应用【算法代码篇】-字符串比较(附C++和JAVA代码实现)

目录 题目描述 思路解析 思路1 思路2 代码实现 Java 代码2

58.leetcode 最后一个单词的长度

一、题目 二、解答 1. 思路 分2种情况 第一种情况只有一个单词&#xff0c;不包含空格&#xff1a;这种情况直接返回单词本身的长度。第二种情况包含空格&#xff1a;先去掉首尾的空格&#xff0c;根据空格切割字符串生成一个字符串列表&#xff0c;返回倒数第一个索引位置字…

Java8之Stream API

计算集合数据 一、Sream的四种实例化方式 1、通过集合&#xff0c;集合.stream() 2、通过数组工具类Arrays&#xff0c;Arrays.stream() 3、通过Stream.of() 4、创建无限流,主要用于创造数据 生成10个随机数 Stream.generate(Math::random).limit(10).forEach(System.ou…

QT周五作业

题目&#xff1a;实现简单水果的价格重量计算 点击一次水果重量1 自动计算总价 代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QListWidgetItem> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAME…

PostgreSQL与Java JDBC数据类型对照

序号数据库类型Java类型JDBC索引JDBC类型1varcharjava.lang.String12VARCHAR2charjava.lang.String1CHAR3cidrjava.lang.Object1111OTHER4inetjava.lang.Object1111OTHER5macaddrjava.lang.Object1111OTHER6textjava.lang.String12VARCHAR7int8java.lang.Long-5BIGINT8byteabyt…

openssl3.2 - 官方demo学习 - cms - cms_sign2.c

文章目录 openssl3.2 - 官方demo学习 - cms - cms_sign2.c概述笔记END openssl3.2 - 官方demo学习 - cms - cms_sign2.c 概述 用多个证书进行CMS消息联合签名 笔记 /*! * \file cms_sign2.c * \note openssl3.2 - 官方demo学习 - cms - cms_sign2.c 用多个证书进行CMS消息联…

js unshift方法的使用

JavaScript的unshift()方法是数组对象的方法之一&#xff0c;用于在数组的开头插入一个或多个元素&#xff0c;并返回新数组的长度。它接受一个或多个参数&#xff0c;每个参数都将插入到数组的开头。 以下是unshift()方法的基本语法&#xff1a; var newLength array.unshi…

java的是堆内存、参数如何设置?

什么是堆内存&#xff1f;参数如何设置&#xff1f; 堆内存是指由程序代码自由分配的内存&#xff0c;与栈内存作区分。 在 Java 中&#xff0c;堆内存主要用于分配对象的存储空间&#xff0c;只要拿到对象引用&#xff0c;所有线程都可以访问堆内存。 &#xff08;1&#xff0…

HarmonyOS@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化

Observed装饰器和ObjectLink装饰器&#xff1a;嵌套类对象属性变化 上文所述的装饰器仅能观察到第一层的变化&#xff0c;但是在实际应用开发中&#xff0c;应用会根据开发需要&#xff0c;封装自己的数据模型。对于多层嵌套的情况&#xff0c;比如二维数组&#xff0c;或者数…

每日算法打卡:蚂蚁感冒 day 13

文章目录 原题链接题目描述输入格式输出格式数据范围输入样例1&#xff1a;输出样例1&#xff1a;输入样例2&#xff1a;输出样例2&#xff1a; 题目分析示例代码 原题链接 1211. 蚂蚁感冒 题目难度&#xff1a;简单 题目来源&#xff1a;第五届蓝桥杯省赛C A/B组 题目描述…

echarts 3D地图

vueecharts 3D地图,可自定义地图背景底图。鼠标放上显示弹窗&#xff0c;弹窗自动切换。 <template><div id"gbznt" class"gbznt" ref"gbznt"><img class"mapBg" src"../../../img/propertyTransaction/echart-bg…