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,一经查实,立即删除!

相关文章

好用的便签有哪些?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. 判断能…

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

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

Java面试之虚拟机

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

LeetCode讲解篇之90. 子集 II

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

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

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

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…

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…

Django教程第2章| Web开发实战 |用户管理模块

前言 从第2章开始&#xff0c;我们正式以实战为核心开发用户管理系统&#xff0c;计划实现效果图所有模块功能。 本章我们将开始实现我们第一个功能模块&#xff1a;用户管理。 技术栈 Boostrap、jQuery、​​​Django 功能模块 模块进度功能点部门管理完成增删改查&…

nodejs+vue+ElementUi音乐分享社交网站77l8j

本文介绍的系统主要分为两个部分&#xff1a;一是前台界面&#xff1a;用户通过注册登录可以实现音乐播放、新闻浏览、留言评论等功能&#xff1b;另一个是后台界面&#xff1a;音乐网站管理员对用户信息进行管理&#xff0c;上传更新音乐资源&#xff0c;发布最新音乐资讯等功…

NUS CS1101S:SICP JavaScript 描述:五、使用寄存器机进行计算

原文&#xff1a;5 Computing with Register Machines 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 我的目标是表明天堂机器不是一种神圣的生命体&#xff0c;而是一种钟表&#xff08;相信钟表有灵魂属性的人将制造者的荣耀归功于作品&#xff09;&#xff0c;因为…

debian12部署Gitea服务之二——部署git-lfs

Debian安装gitlfs: 先更新下软件包版本 sudo apt update 安装 sudo apt install git-lfs 验证是否安装成功 git lfs version cd到Gitea仓库目录下 cd /mnt/HuHDD/Git/Gitea/Repo/hu/testrepo.git 执行lfs的初始化命令 git lfs install客户机Windows端在官网下载并安装Git-Lfs 再…

Origin中将 x、y 轴设置为等长度

---------------------------------------------------------------------- 记录一个画图小技巧&#xff1a; 如何在 Origin 中等轴画图 第一步&#xff1a;起初画出来的图如下&#xff0c;y 轴长于 x 轴 第二步&#xff1a;点击画板的空白处&#xff0c;任意一个地方即可 第…

第十六章 i18n国际化

第十六章 i18n国际化 1.什么是i18n国际化2.i18n国际化三要素介绍3.i18n国际化基础示例4.通过请求头实现国际化5.通过语言类型选择实现国际化6.通过JSTL标签库fmt实现国际化 1.什么是i18n国际化 2.i18n国际化三要素介绍 3.i18n国际化基础示例 如果我要准备一个国际化的信息&…

Web3的应用发展及其影响

Web3&#xff0c;又被称为去中心化Web&#xff0c;是互联网发展的一个阶段&#xff0c;其核心特点是数据的去中心化和用户自主权。近年来&#xff0c;随着区块链技术的不断成熟&#xff0c;Web3的应用也得到了广泛的关注和发展。在这篇文章中&#xff0c;我们将深入探讨Web3目前…

猫狗大战(猫狗识别)

1.问题简介 1.1问题描述 在这个问题中&#xff0c;你将面临一个经典的机器学习分类挑战——猫狗大战。你的任务是建立一个分类模型&#xff0c;能够准确地区分图像中是猫还是狗。 1.2预期解决方案 你的目标是通过训练一个机器学习模型&#xff0c;使其在给定一张图像时能够准…

Open3D对产生偏差的点云数据进行校正

由于相机安装问题&#xff0c;导致点云数据两边翘起来&#xff0c;为了计算把翘起来的部分拉平整 import time import open3d as o3d; import numpy as np; import matplotlib.pyplot as plt from scipy.signal import find_peaks import pandas as pdOriginalPly o3d.io.rea…