澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

测量检验你的前端代码,端到端测量检验

2019-11-04 作者:澳门新萄京赌场网址   |   浏览(133)

测验你的前端代码:可视化测量检验

2017/10/25 · CSS · 1 评论 · 测试

初藳出处: Gil Tayar   译文出处:oschina   

测验 App,你从哪儿最初?在最后那么些局地,第五有的,Gil Tayar 计算了她为前端测验新人写的多元小说。最后那篇文章中,Tayar 陈述了可视化测量检验,以至为啥它是测量试验前端代码的最后一步。

几天前,作者一个适逢其时进入特出前端世界的意中人打电话问笔者该怎么测量检验他的应用程序。小编告诉她有太多必要学习的事物,在对讲机里常常有说不清楚。笔者答应发送一些对他前端之路有所扶持的链接。

于是作者在计算机前坐下,通过 谷歌(Google卡塔尔寻找相关的大旨。笔者找到非常多链接,也发送给她了,但本人对那几个链接商讨的纵深并不称心。作者找不到贰个圆满的指南 —— 以新入行的前端的角度 —— 指引如何测验前端采用。笔者没找到有个别指南既讲理论又讲实践,同有的时候常候还是面向前端采纳的商议。

为此,作者主宰写多个。那已然是那风度翩翩雨后春笋的第五有的了。你能够在底下看看其它一些:

  • 介绍
  • 单元测验
  • 端到端(E2E)测试
  • 集成测验
  • 可视化测量试验

此外,为了写那篇文章,笔者写了五个小应用 —— Calculator(计算器) —— 小编要用它躬体力行测量试验的两样档案的次序。你能够在这里地看看它的源代码。

测量试验你的前端代码 – part3(端到端测量试验卡塔尔国

2017/06/05 · 底蕴技艺 · 测试

原稿出处: Gil Tayar   译文出处:胡子大哈   

上大器晚成篇小说《测量试验你的前端代码 – part2(单元测量试验卡塔尔》中,小编介绍了关于单元测量检验的基本知识,从本文介绍端到端测量试验(E2E 测验卡塔 尔(英语:State of Qatar)。

       见到大神们,都在做前端的自动化测量检验,去快捷高效的书写测量试验脚本,节省人力,物力,升高效能,作为多少个前端生手动和自动然是体贴连连!于是决定也要深入学一下前端自动化测量试验,上网后生可畏找,相关材料说多十分少,说少不少。于是最初上学之旅

可视化测试

软件测量试验一向是本身的一大爱好。近些日子,我以为未有测量检验就写不出代码。对自家的话,有意气风发种原始的主见,运营的指标就是为了证实代码是还是不是准确。你的意趣是报告作者,在原先,每一趟开采者改进他们的代码,都急需有人手工业去表明早先通常的事务仍然平常?是这么呢?

因此,小编写测量试验。因为本人爱好解说和写博客,笔者会演说或写关于软件测验的源委。假使有机缘进来二个对压实软件测验有着超人远见的商店,写代码来救助其余人写测验,并加大她们的付加物,作者会脱口而出的参与。

正是如此,作者近年参与了 Applitools (若是您想明白职位,是布道师和高端架构师卡塔 尔(阿拉伯语:قطر‎。因为她俩的产物,Applitools Eyes,与自家写的那些种类具有间接调换,作者说了算在此个体系中多写三个有的 —— 二个关于“可视化测量检验”的一些。

还记得作者的吸引呢?开辟者实际总是会在历次改过他们的代码之后运转他们的运用。嗯,到如今停止,软件出品供给手工业测量检验—— 那是在使用的可视化方面。还从未艺术检查接受看起来照旧是好的 —— 字体是精确的,对齐未有的时候常,颜色也还在,等等。

答辩上你是能够写代码来实行有关的检讨。大家在第三有的叩问到哪边行使 Selenium Webdriver 测量检验 Web 应用的 UI。大家得以选拔 Selenium 的 getScreenShot API 来获得页面包车型地铁截图,将其保存为准绳,之后种种测量试验都会将页面截图与那一个规格举办相比较:

图片 1

啊哈!借使那般简单就好了。小编尝试过那个方案,结果遇见超多题目,最后一定要扬弃这一个方案。而且可笑的是自家老是修正了代码都要运维应用。主要的主题素材在少数才具:浏览器在表现内容的时候存在部分渺小的差距—— 形成那个差别的要素或然出自显示器或许GPU,对剧情举办抗锯齿渲染的法子略有分歧。未有两张截图会具有完全相符的像素。这一个差别人眼觉察不到,也正是说,按像素举行比较毫无意义。你要求运用图像分析手艺来管理那么些难题。

况且,还应该有其余难题,仅从本身依照 Applitools 的干活就会总括出如下难题:

  • 你不能够对任何页面截图 —— 你只可以对能够观察标一些截图。
  • 例如页面中设有动漫,那就无法拿它和基础图像进行相比较。
  • 动态数据,举个例子广告,会让事情变得复杂,难以寻觅与典型比较的实在差距。
  • 页面怎么时候才会“完全加载”?什么日期本事对其截图?以前在 DOM 加载达成时截图是远远不足的。要搜索什么日期才方可截图是件拾贰分劳碌的业务。

端到端测验

在第二有个别中,我们接纳 Mocha 测量检验了利用中最主旨的逻辑,calculator模块。本文中大家将利用端到端测量检验整个应用,实际上是模仿了顾客具有希望的操作进行测量检验。

在大家的例证中,计算器展现出来的前端即为整个应用,因为从没后端。所以端到端测验就是说直接在浏览器中运营应用,通过键盘做生龙活虎雨后冬笋总计操作,且保证所体现的出口结果都是没有错的。

是否需要像单元测验那样,测量检验各样组合呢?实际不是,我们早就在单元测量检验中测验过了,端到端测量试验不是检查某些单元是否ok,而是把它们放到一同,检查依旧否能够科学生运动营。

1.selenium IDE

      生机勃勃款神器 。能够直接在火狐浏览器下飞速地展开前端自动化测量试验,具有自个儿的客商端界面,操作也很简短,看懂文字的 平常都会使用 这里附上海大学百度的安装介绍,大家能够谐和尝尝。(ps:有ide下载官方网站说 firefox版本要在v34.0左右的本子,然后近日的firefox已经更新到v53.0,找不到低版本firefox,可是本人这里亲测 高版本也能健康跑通,纵然放心!卡塔 尔(英语:State of Qatar)

selenium ide 安装与行使

我们做获得

可是大家就像是能够编写制定自动的可视化测量试验。存在着无数本身并不知道的工具得以越来越好的截图并将之与正式图像比较。当中一些之类:

  • Wraith
  • WebdriverCSS
  • 自然还也有 Applitools Eyes
  • (照旧别的的,但本文已经有一点长了…)

这么些工具得以减轻一切或部分地方提到的标题。在多元的那么些部分,作者想向您显示什么利用 Applitools Eyes 来编排可视化测量试验。

急需有些端到端测量检验

首先付诸结论:端到端测量检验无需太多。

先是个原因,如若已经通过了单元测验和集成测量检验,那么或许早已把具有的模块都测量检验过了。那么端到端测量检验的意义正是把富有的单元测量检验绑到一齐进行测验,所以不要求过多端到端测量检验。

其次个原因,那类测量试验日常都超级慢。假设像单元测量检验那样有几百个端到端测验,这运营测量试验将会要命慢,那就违背了叁个非常重视的测量试验原则——测量检验飞速上报结果。

其四个原因,端到端测验的结果不时候会并发 flaky的情景。Flaky 测验是指平日情状下得以测量检验通过,但是一时会合世测量试验败北的景观,也正是不平稳测量试验。单元测量试验差不离不会现出不稳固的情况,因为单元测量检验日常是粗略输入,轻易输出。风流洒脱旦测量试验涉及到了 I/O,那么不平稳测验也许就出现了。那能够削减动荡测量试验呢?答案是肯定的,能够把不安宁测量检验现身的效能减弱到能够选拔的程度。这能够透顶消弭不牢固测量检验呢?恐怕能够,不过自身到前段时间还未看见过[笑着哭]。

之所以为了减弱大家测验中的不平稳因素,尽量收缩端到端测量试验。拾三个以内的端到端测验,每种都测验应用的显要专门的学问流。

2.selenium webdriver

       人家大神都是走coding路径的,你拿个ide 不是显的很low么,对吧!何况ide也不曾coding测验周到,特别随便!不过大神们都以技多不压身的主,又会python,又会java的!好在居家也给了node的api,让本身如此的会的超少的,也不至于饿死了!上边正是node 版本的selenium webdriver的coding了!

1.找到大家的大github,  

下载selenium-webdriver

      npm install selenium-webdriver  -g

大家为了 以后测量检验的时候直接require进来就能够,所以加了-g,然而项目中运用 require('selenium-webdriver') 

而是有的时候会不知恩义的报错现身 Cannot find module 'selenium-webdriver'

(自个儿也被深深地坑了少年老成道!卡塔尔

案由 是你未曾布署情状变量NODE_PATH 所以自然会报错咯

windows下正是 系统-》景况变量-》path 本人去增多吧(具体请自行百度!卡塔 尔(英语:State of Qatar)

这里根本说下mac下喽(当然用mac啦,写代码这么苦逼,还不对友好好点啊!卡塔尔

在Linux下的node 项目后生可畏道到Mac OS X 下开采无法健康运行,全局包正视未有收效,

意识须要安装 NODE_PATH变量:

     export NODE_PATH=/usr/local/lib/node_modules

重国民党的新生活运动行符合规律。(好的 一劳永逸,今后-g安装的 文件require都能引进到了!卡塔 尔(阿拉伯语:قطر‎ 

2.从头编写制定脚本 在firefox下测量试验

var webdriver = require('selenium-webdriver'),

       By = webdriver.By,

       until = webdriver.until;

var driver = new webdriver.Builder()

     .forBrowser('firefox')

     .build();

     driver.get('');

     driver.findElement(By.id('kw')).sendKeys('selenium');

driver.findElement(By.id('su')).click();

driver.wait(until.titleIs('test_百度寻觅'), 1000);

driver.quit();

愉快地node运行

题外话:假使出现static createSession(...args) {}    SyntaxError: Unexpected token ...

而你不知道...args  是吗,建议 再学一下es6 ,而那些缘故便是你丫的倒霉好学习 node 好久没更新了,es6语法不识别了呢,要么你本身官方网址下载最新的node安装覆盖一下 要么就动用 npm update  更新一下node  不过如此只能祝你刚巧,因为npm更新node 真的好慢!何况你首先是翻墙的(哎,作者的大天朝啊!卡塔尔国

假使现身:

The geckodriver executable could not be found on the current PATH. Please download the latest version from and ensure it can be found on your PATH.

留神生龙活虎看 gecko不是firefox的内核么!哦,那意味就是你未曾设置geckodriver驱动,你怎么打开firefox,不能够,乖乖地安装

npm install -g geckodriver

不过 豆蔻年华坑不平 朝气蓬勃坑又起  又冒出

InvalidArgumentError: Could not convert 'text' to string

在driver.findElement(By.id('kw')).sendKeys()

凌虐笔者阅读少, 这不是string类型是啥,百般尝试,new String('selenium')  也要命,看github上的request 上鬼子也蒙受那么些题目,何况还未有曾缓慢解决,本身就心满意足的,可是不能够就那样放着不消亡呀!不过在chrome里面是健康的,这里勇敢的张望或许是因为firefox的本子过高有关!

故而大家这么肃清

将driver.findElement(By.id('kw')).sendKeys('selenium')换成

var longstring = "test";

inputField = driver.findElement(webdriver.By.id('kw'));

driver.executeScript("arguments[0].setAttribute('value', '" longstring "')", inputField);

得逞跑通。不过跑通firefox不行,大家还应该有chrome

3.上马编写制定脚本 在chrome下测验

  测度大家早已想到 对了只须求下载

npm install chromedriver -g

var webdriver = require('selenium-webdriver'),

By = webdriver.By,

until = webdriver.until;

var driver = new webdriver.Builder()

.forBrowser('chrome')

.build();

driver.get('');

var longstring = "test",

driver.findElement(By.id('kw')).sendKeys(longstring);//平常使用

driver.findElement(By.id('su')).click();

driver.wait(until.titleIs('test_百度搜索'), 1000);

driver.quit();

供给注意的是

session not created exception: Chrome version must be >= 56.0.2884.0

一向不的话,你就急匆匆官方网站更新chrome吧 

测量检验你的前端代码,端到端测量检验。写叁个可视化测量检验

既是可视化测量检验是测验的最后成品,它们应该用于端到端浏览器的前端测量检验中。所以那是自笔者的可视化测验。这几个代码极度风趣,它比正规的端到端测量检验越来越小。它由八个部分组成 —— 设置浏览器,测量试验 Applitools Eyes 和测量检验本身。

我们再看一下 Selenium Driver 浏览器设置,它与其三局地的端到端测验相同:

let driver before(async () => { driver = new webdriver.Builder().forBrowser('chrome').build() }) after(async () => await driver.quit())

1
2
3
4
5
6
let driver
before(async () => {
  driver = new webdriver.Builder().forBrowser('chrome').build()
})
after(async () => await driver.quit())

那会展开二个浏览器并等候驱动命令。可是在开头测验早先,大家供给安装(以至拆除与搬迁卡塔 尔(阿拉伯语:قطر‎Applitools Eyes:

const {Eyes} = require('eyes.selenium') let eyes before(async () => { eyes = new Eyes() eyes.setApiKey(process.env.APPLITOOLS_APIKEY) await eyes.open(driver, 'Calculator App', 'Tests', {width: 800, height: 600}) }) after(async () => await eyes.close())

1
2
3
4
5
6
7
8
9
10
11
const {Eyes} = require('eyes.selenium')
let eyes
before(async () => {
  eyes = new Eyes()
  eyes.setApiKey(process.env.APPLITOOLS_APIKEY)
  await eyes.open(driver, 'Calculator App', 'Tests', {width: 800, height: 600})
})
after(async () => await eyes.close())

我们创设了有的新的 Eyes(第5行卡塔 尔(阿拉伯语:قطر‎,并张开它们(第8行卡塔尔国—— 可爱的术语,不是啊?不忘记了从 Applitools 获取三个 API 的 Key,那是我们会在下一小节商讨的事物,然后把它设置给 Eyes(第6行卡塔 尔(英语:State of Qatar)。

到现在我们早就安装好浏览器和 Eyes,大家得以写测量试验了,那和大家的端到端测量试验特别像:

it('should look good', async function () { await driver.get('') await eyes.checkWindow('Initial Page') const digit4Element = await driver.findElement(By.css('.digit-4')) const digit2Element = await driver.findElement(By.css('.digit-2')) const operatorMultiply = await driver.findElement(By.css('.operator-multiply')) const operatorEquals = await driver.findElement(By.css('.operator-equals')) await digit4Element.click() await digit2Element.click() await operatorMultiply.click() await digit2Element.click() await operatorEquals.click() await eyes.checkWindow('After calculating 42 * 2 =') })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it('should look good', async function () {
   await driver.get('http://localhost:8080')
   await eyes.checkWindow('Initial Page')
   const digit4Element = await driver.findElement(By.css('.digit-4'))
   const digit2Element = await driver.findElement(By.css('.digit-2'))
   const operatorMultiply = await driver.findElement(By.css('.operator-multiply'))
   const operatorEquals = await driver.findElement(By.css('.operator-equals'))
   await digit4Element.click()
   await digit2Element.click()
   await operatorMultiply.click()
   await digit2Element.click()
   await operatorEquals.click()
   await eyes.checkWindow('After calculating 42 * 2 =')
})

与其生龙活虎种类的前后生可畏篇小说中的端到端测量检验对照,你可以看来它很像,但更加短。代码中重点的不一致是对特定成分的求证被生龙活虎行轻松的代码取代了:

await eyes.checkWindow(‘’)

1
await eyes.checkWindow(‘’)

在端到端测验中,我们是如此做的:

await retry(async () => { const displayElement = await driver.findElement(By.css('.display')) const displayText = await displayElement.getText() expect(displayText).to.equal('0') })

1
2
3
4
5
6
await retry(async () => {
  const displayElement = await driver.findElement(By.css('.display'))
  const displayText = await displayElement.getText()
  expect(displayText).to.equal('0')
})

咱俩由此重试等待页面“稳固”。但进展可视化测量检验的时候,你没有须求拭目以俟页面可以预知—— eyes.checkWindow 会帮您干那一个职业!

eyes.checkWindow 会截取页面图像并将之与前面一个测量试验爆发的规范化图像实行相比(参阅下边包车型客车小节“运营可视化测验”卡塔尔国。纵然比较结实是新图像与法规等价,则测验成功,不然测量试验战败。

写端到端测量试验代码

好了,废话非常少说,开头介绍写端到端代码。首先供给预备好两件业务:1. 三个浏览器;2. 运营前端代码的服务器。

因为要利用 Mocha 进行端到端测验,就和事先单元测量检验同样,供给先对浏览器和 web 服务器进行一些配备。使用 Mocha 的 before 钩子设置初步化状态,使用 after钩子清理测量试验后情形。before 和 after 钩子分别在测量试验的上马三保得了时运营。

下边一齐来看下 web 服务器的装置。

好了!

api:webdriver api文档    祝大家幸福!

可视化测验是端到端测量检验更加好的工具

打开可视化测验的气概不凡收益是 —— 系统管理的平稳。並且 —— 你不是只检查后生可畏八个因素 —— 你是在二遍断言中检查整个页面。你可能会发觉有个别压根没想去找的标题!

看来,看起来可视化测验是端到端测量检验中唯后生可畏的预感方法。但不幸的是,近年来可视化断言不快,所以您要求优秀地把风姿浪漫部分检查一定成分的例行断言和自小编舆情整个页面包车型大巴可视化断言组合起来。

纪事 —— 未有特效药妙药:没有某三个测量试验项目能够做有所职业!混合不一样门类的测量检验能够越来越好的树立平衡,建议如此的混杂要求测验涉世。所以今后就开端测量试验!的确,测量检验必要时日和权利。不过假设您初阶测量检验,你就无法回头是岸了。

设置 Web 服务器

配备一个 Node Web 服务器,首先想到的正是 express了,话相当的少说,直接上代码:

JavaScript

let server before((done) = > { const app = express() app.use('/', express.static(path.resolve(__dirname, '../../dist'))) server = app.listen(8080, done) }) after(() = > { server.close() })

1
2
3
4
5
6
7
8
9
10
let server
before((done) = > {
    const app = express()
    app.use('/', express.static(path.resolve(__dirname, '../../dist')))
    server = app.listen(8080, done)
})
after(() = > {
    server.close()
})

代码中,before 钩子中开创多少个 express 应用,指向 dist 文件夹,并且监听 8080 端口,截至的时候在 after 钩子中关闭服务器。

dist 文件夹是何等?是我们打包 JS 文件的地点(使用 Webpack打包卡塔尔国,HTML 文件,CSS 文件也都在那地。能够看一下 package.json 的代码:

JavaScript

{ "name": "frontend-testing", "scripts": { "build": "webpack && cp public/* dist", "test": "mocha 'test/**/test-*测量检验你的前端代码,端到端测量检验。.js' && eslint test lib", ... },

1
2
3
4
5
6
7
{
      "name": "frontend-testing",
      "scripts": {
        "build": "webpack && cp public/* dist",
        "test": "mocha 'test/**/test-*.js' && eslint test lib",
    ...
      },

对于端到端测量试验,要记得在实行 npm test 之前,先执行 npm run build。其实那样特别不方便人民群众,想转手从前的单元测验,不要求做这么复杂的操作,正是因为它能够直接在 node 意况下运维,既不用转译,也不用包装。

出于完整性思虑,看一下 webpack.config.js 文件,它是用来报告 webpack 怎么样管理打包:

JavaScript

module.exports = { entry: './lib/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, ... }

1
2
3
4
5
6
7
8
module.exports = {
    entry: './lib/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    ...
}

上边包车型地铁代码指的是,Webpack 会读取 app.js 文件,然后将 dist 文件夹中具有应用的公文都打包到 bundle.js 中。dist 文件夹会同时采取在分娩条件和端到端测量试验情状。这里要当心二个比较重大的事务,端到端测验的运作景况要尽量和分娩条件保持生机勃勃致。

从今现在的恢弘操作就靠你本身了 node的语法忘了,就再看看node吧!

关于ie嘛,如今未曾test,希望有色金属研究所究的敌人,也能够留言给本身,小编好学不倦一下!

运作可视化测量试验

作者们怎么才行运营可视化测量检验更看见结果?

就算你未有应用场境变量 应用程式LITOOLS_APIKEY 来提供叁个 API Key,npm test 就能够跳过可视化测量试验。所以需求拿到叁个 API Key 来运维测验,去 Applitools 注册个客户就好。你能够在你的 Applitools 账户分界面找到 API Key。把它拷贝下来,用到测量检验中去(在 Linux/MacOS 中卡塔 尔(阿拉伯语:قطر‎:

APPLITOOLS_APIKEY=<the-api-key> npm test

1
APPLITOOLS_APIKEY=<the-api-key> npm test

借令你使用的是 Windows,那么:

set APPLITOOLS_APIKEY=<the-api-key> && npm test

1
set APPLITOOLS_APIKEY=<the-api-key> && npm test

完毕后就足以开展测验了。第二回测量试验会退步并告知错误 EYES: NEW TEST ENDED。

图片 2

那是因为尚未曾用来相比的规格。其他方面,借使您看看 Applitools Eyes 分界面,走访到:

图片 3

从 Applitools 来看,测验通过了,因为那是多个准绳,它假诺条件是对的的。你可以通过分界面上各类截图的“Like(像卡塔 尔(阿拉伯语:قطر‎/Unline(不像卡塔尔国”使其“战败”。

其次次运维 npm test,测量检验会马到功成:

图片 4

Applitools 分界面也会显得为:

图片 5

假使大家有意识让测量试验战败,(举个例子卡塔 尔(英语:State of Qatar)通过点击 43 * 3 而不是 42 * 2,测量试验会退步,Applitools 分界面会突显测量试验并高亮不一样之处:

图片 6

修复这么些“Bug”必要在 Mocha 和 Applitools 中让测量试验再一次经过。

安装浏览器

到现在大家早已安装完了后端,应用已经有了服务器提供服务了,今后要在浏览器中运作大家的计算器应用。用什么包来驱动自动实践顺序吗,笔者时时利用 selenium-webdriver,那是二个很盛行的包。

率先看一下怎么使用驱动:

JavaScript

const { prepareDriver, cleanupDriver } = require('../utils/browser-automation') //... describe('calculator app', function () { let driver ... before(async() = > { driver = await prepareDriver() }) after(() = > cleanupDriver(driver)) it('should work', async function () { await driver.get('') //... }) })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const {
    prepareDriver, cleanupDriver
} = require('../utils/browser-automation')
//...
describe('calculator app', function () {
    let driver
        ...
    before(async() = > {
        driver = await prepareDriver()
    })
    after(() = > cleanupDriver(driver))
    it('should work', async
    function () {
        await driver.get('http://localhost:8080')
        //...
    })
})

before 中,思量好驱动,在 after 中把它清理掉。策动好驱动后,会自行运维浏览器(Chrome,稍后拜望到卡塔 尔(英语:State of Qatar),清理掉现在会关闭浏览器。这里注意,筹划驱动的进度是异步的,再次来到叁个promise,所以大家选用 async/await 功用来使代码看起来更加精彩(Node7.7,第2个地面援助 async/await 的版本卡塔 尔(英语:State of Qatar)。

最后在测量试验函数中,传递网站:http:/localhost:8080,依然接受 await,让 driver.get 成为异步函数。

您是否有好奇 prepareDrivercleanupDriver 函数长什么吗?一齐来看下:

JavaScript

const webdriver = require('selenium-webdriver') const chromeDriver = require('chromedriver') const path = require('path') const chromeDriverPathAddition = `: $ { path.dirname(chromeDriver.path) }` exports.prepareDriver = async() = > { process.on('beforeExit', () = > this.browser && this.browser.quit()) process.env.PATH = chromeDriverPathAddition return await new webdriver.Builder() .disableEnvironmentOverrides() .forBrowser('chrome') .setLoggingPrefs({ browser: 'ALL', driver: 'ALL' }) .build() } exports.cleanupDriver = async(driver) = > { if (driver) { driver.quit() } process.env.PATH = process.env.PATH.replace(chromeDriverPathAddition, '') }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const webdriver = require('selenium-webdriver')
const chromeDriver = require('chromedriver')
const path = require('path')
const chromeDriverPathAddition = `: $ {
    path.dirname(chromeDriver.path)
}`
exports.prepareDriver = async() = > {
    process.on('beforeExit', () = > this.browser && this.browser.quit())
    process.env.PATH = chromeDriverPathAddition
    return await new webdriver.Builder()
        .disableEnvironmentOverrides()
        .forBrowser('chrome')
        .setLoggingPrefs({
        browser: 'ALL',
        driver: 'ALL'
    })
        .build()
}
exports.cleanupDriver = async(driver) = > {
    if (driver) {
        driver.quit()
    }
    process.env.PATH = process.env.PATH.replace(chromeDriverPathAddition, '')
}

能够见到,上边这段代码很笨重,而且一定要在 Unix 系统上运营。理论上,你能够不用看懂,直接复制/粘贴到您的测量试验代码中就足以了,这里自身依然长远讲一下。

前两行引进了 webdriver 和大家应用的浏览器驱动 chromedriver。Selenium Webdriver 的行事规律是由此 API(第风流倜傥行中引入的 selenium-webdriver卡塔尔国调用浏览器,那信任于被调浏览器的驱动。本例中被调浏览器驱动是 chromedriver,在第二行引进。

chrome driver 无需在机械上装了 Chrome,实际上在你运转 npm install 的时候,已经装了它自带的可进行 Chrome 程序。接下来 chromedriver 的目录名急需增添进碰到变量中,见代码中的第 9 行,在清理的时候再把它删掉,见代码中第 22 行。

安装了浏览器驱动现在,大家来设置 web driver,见代码的 11 – 15 行。因为 build 函数是异步的,所以它也使用 await。到现行反革命竣事,驱动部分就早就安装甘休了。

小结

此间对测量检验前端代码的多元进行多个计算。假让你感到本身疏漏了哪些,恐怕有其余的主题材料/商议/嘲笑,请推@giltayar,大概回应本文。

自己必须要承认本人很想在此个连串中再多写风度翩翩篇小说 —— 关于测验富含 Ajax 调用的应用,实际的应用程序都会稍微须求。

哪个人知道啊?

1 赞 2 收藏 1 评论

图片 7

测试吧!

设置完驱动现在,该看一下测量试验的代码了。完整的测量试验代码在此边,上面列出部分代码:

JavaScript

// ... const retry = require('promise-retry') // ... it('should work', async function () { await driver.get('') await retry(async() = > { const title = await driver.getTitle() expect(title).to.equal('Calculator') }) //...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ...
const retry = require('promise-retry')
// ...
it('should work', async
function () {
    await driver.get('http://localhost:8080')
    await retry(async() = > {
        const title = await driver.getTitle()
        expect(title).to.equal('Calculator')
    })
    //...

此处的代码调用总计器应用,检查选拔标题是还是不是 “Calculator”。代码中第 6 行,给浏览器赋地址:http://localhost:8080,记得要动用 await。再看第 9 行,调用浏览器并且重临浏览器的标题,在第 10 行中与预期的标题进行比较。

那边还会有二个主题素材,这里引进了 promise-retry 模块进行重试,为啥要求重试?原因是这么的,当我们告知浏览器推行某吩咐,比如固定到叁个U奥迪Q5L,浏览器会去实施,可是是异步实践。浏览器推行的老大快,那个时候对于开采人员来说,确切地知道浏览器“正在实行”,要比单独知道叁个结果更关键。正是因为浏览器试行的一点也不慢,所以固然不重试的话,比较轻易被 await 所愚弄。在末端的测量检验中 promise-retry 也会不经常利用,这便是为啥在端到端测量检验中须求重试的缘故。

测试 Element

来看测量试验的下意气风发阶段,测验成分:

JavaScript

const { By } = require('selenium-webdriver') it('should work', async function () { await driver.get('') //... await retry(async() = > { const displayElement = await driver.findElement(By.css('.display')) const displayText = await displayElement.getText() expect(displayText).to.equal('0') }) //...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const {
    By
} = require('selenium-webdriver')
it('should work', async
function () {
    await driver.get('http://localhost:8080')
    //...
    await retry(async() = > {
        const displayElement = await driver.findElement(By.css('.display'))
        const displayText = await displayElement.getText()
        expect(displayText).to.equal('0')
    })
    //...

下叁个要测量检验的是发轫化状态下所体现的是否“0”,那么首先就要求找到调节展现的 element,在大家的事例中是 display。见第 7 行代码,webdriver 的 findElement 方法重返大家所要找的要素。能够透过 By.id或者 By.css 再或者其余找成分的艺术。这里笔者利用 By.css,它很常用,其它提一句 By.javascript 也很常用。

(不理解您是还是不是注意到,By 是由最上边的 selenium-webdriver 所引进的卡塔 尔(阿拉伯语:قطر‎

当大家赢得到了 element 以后,就足以选用 getText()(还足以选拔别的操作 element 的函数卡塔尔国,来赢得成分文本,何况检查它是不是和预期相通,见第 10 行。对了,不要遗忘:

图片 8

测试 UI

后日该来从 UI 层面测量检验应用了,点击数字和操作符,测量试验总结器是否安分守纪预期的运营:

JavaScript

const digit4Element = await driver.findElement(By.css('.digit-4')) const digit2Element = await driver.findElement(By.css('.digit-2')) const operatorMultiply = await driver.findElement(By.css('.operator-multiply')) const operatorEquals = await driver.findElement(By.css('.operator-equals')) await digit4Element.click() await digit2Element.click() await operatorMultiply.click() await digit2Element.click() await operatorEquals.click() await retry(async() = > { const displayElement = await driver.findElement(By.css('.display')) const displayText = await displayElement.getText() expect(displayText).to.equal('84') })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const digit4Element = await driver.findElement(By.css('.digit-4'))
const digit2Element = await driver.findElement(By.css('.digit-2'))
const operatorMultiply = await driver.findElement(By.css('.operator-multiply'))
const operatorEquals = await driver.findElement(By.css('.operator-equals'))
await digit4Element.click()
await digit2Element.click()
await operatorMultiply.click()
await digit2Element.click()
await operatorEquals.click()
await retry(async() = > {
    const displayElement = await driver.findElement(By.css('.display'))
    const displayText = await displayElement.getText()
    expect(displayText).to.equal('84')
})

代码 2 – 4 行,定义数字和操作;6 – 10 行模拟点击。实际上想达成的是 “42 * 2 = ”。最后收获不错的结果——“84”。

运转测量试验

早就介绍完了端到端测验和单元测量试验,未来用 npm test 来运营具有测量试验:

图片 9

三遍性全部经过!(这是本来的了,不然怎么写随笔。卡塔 尔(阿拉伯语:قطر‎

想说点有关利用 await 的部分话

您在只怕网络上别样地点看见有个别例证,它们并从未选用 async/await,可能是行使了 promise。实际上那样的代码是同台的。那么为何也能 work 的很行吗?坦白地说,笔者也不亮堂,看起来像是在 webdriver 中某些 trick 的拍卖。正如 selenium文书档案中切磋,在 Node 援救 async/await 此前,那是叁个临时的解决方案。

Selenium 文档是 Java 语言。它还残缺,但是包蕴的音讯也丰盛了,你做两次测验就能够控制那个技术。

总结

正文中任重先生而道远介绍了怎么:

  • 介绍了端到端测量检验中装置浏览器的代码;
  • 介绍了什么样运用 webdriver API 来调用浏览器,以至如何获得 DOM 中的 element;
  • 介绍了接受 async/await,因为具备 webdriver API 都以异步的;
  • 介绍了怎么端到端测量检验中要接收 retry。

    1 赞 收藏 评论

图片 10

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:测量检验你的前端代码,端到端测量检验

关键词:

  • 上一篇:没有了
  • 下一篇:没有了