凯旋门074网址,测量检验你的前端代码:可视化测量检验

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

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

测量试验 App,你从哪个地方开始?在终极这些片段,第五局地,Gil Tayar
总结了她为前端测验新人写的三番五次串文章。最后那篇文章中,Tayar
陈述了可视化测量试验,以及为啥它是测量检验前端代码的结尾一步。

最近,小编一个正要走入完美前端世界的对象打电话问作者该怎么测量试验他的应用程序。小编告诉她有太多供给上学的东西,在对讲机里常有说不清楚。小编答应发送一些对她前端之路有所接济的链接。

进而笔者在Computer前坐下,通过 Google找寻相关的主旨。小编找到相当多链接,也发送给她了,但本身对这么些链接商量的吃水并不合意。笔者找不到一个两全的指南
—— 以新入行的前端的角度 ——
指引怎么着测量检验前端选用。我没找到有个别指南既讲理论又讲施行,同有的时候候照旧面向前端选取的商讨。

进而,笔者控制写多少个。那已经是这一多种的第五部分了。你能够在下边看到别的一些:

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

澳门凯旋门注册网址,除此以外,为了写那篇小说,作者写了贰个小应用 ——
Calculator(计算器) ——
作者要用它亲自过问测量检验的不如档期的顺序。你能够在此间看到它的源代码。

可视化测验

软件测量检验平素是自个儿的一大爱好。近日,小编感到未有测量检验就写不出代码。对自个儿来讲,有一种原始的主张,运维的目标便是为着印证代码是不是科学。你的意趣是报告自个儿,在原先,每趟开辟者修改他们的代码,都亟需有人手工业去印证以前不奇怪的政工仍然不奇怪?是如此吧?

据此,小编写测量检验。因为自身垂怜阐述和写博客,我会演讲或写关于软件测量试验的原委。要是有机会踏向二个对进步软件测验有着一级远见的百货店,写代码来救助别的人写测量检验,并放大他们的出品,小编会不暇思索的投入。

就是如此,作者多年来参与了
Applitools
(即便您想知道职位,是布道师和高等架构师)。因为他俩的成品,Applitools
Eyes,与自己写的那个体系具备直接调换,作者决定在那个连串中多写贰个部分 ——
一个有关“可视化测量检验”的有的。

还记得笔者的思疑呢?开垦者实际总是会在每一回修改他们的代码之后运营他们的应用。嗯,到近年来停止,软件出品必要手工业测验—— 这是在采取的可视化方面。还从未艺术检查采纳看起来依旧是好的 ——
字体是科学的,对齐未有毛病,颜色也还在,等等。

力排众议上您是足以写代码来打开相关的检讨。大家在第三片段打听到怎么使用
Selenium Webdriver 测量试验 Web 应用的 UI。我们能够动用 Selenium 的
getScreenShot API
来得到页面包车型客车截图,将其保存为尺度,之后种种测量试验都会将页面截图与这些原则举办相比较:

澳门凯旋门注册网址 1

啊哈!若是那样轻易就好了。笔者尝试过这几个方案,结果遇见相当多难点,最终只可以放任这些方案。而且可笑的是自个儿老是修改了代码都要运转应用。首要的标题在少数技巧:浏览器在展现内容的时候存在一些细小的差别—— 变成那些出入的因素可财富于荧屏可能GPU,对故事情节开始展览抗锯齿渲染的措施略有分歧。未有两张截图会具有完全同样的像素。这么些差距人眼觉察不到,也正是说,按像素进行相比毫无意义。你须求动用图像深入分析本领来管理这些难题。

并且,还应该有其余难题,仅从笔者遵照 Applitools 的干活就会总计出如下难题:

  • 您无法对总体页面截图 —— 你不得不对可以见见的一对截图。
  • 若是页面中留存动画,那就不能够拿它和基本功图像实行相比。
  • 动态数据,譬如广告,会让事情变得复杂,难以搜索与标准相比的其实差距。
  • 页面怎么时候才会“完全加载”?哪一天手艺对其截图?未来在 DOM
    加载实现时截图是非常不足的。要搜索如哪天候才得以截图是件极其困难的职业。

咱俩做获得

而是大家就如能够编制自动的可视化测验。存在着无数自个儿并不知道的工具得以越来越好的截图并将之与正式图像相比较。其中有的之类:

  • Wraith
  • WebdriverCSS
  •    译文出处。当然还会有 Applitools
    Eyes
  • (照旧另外的,但本文已经有一些长了…)

   译文出处。那么些工具得以解决全体或局地地方提到的标题。在多级的那一个部分,我想向您来得如何行使
Applitools Eyes 来编排可视化测量试验。

写多少个可视化测验

既然如此可视化测量试验是测量试验的最终产品,它们应该用于端到端浏览器的前端测量试验中。所以那是自家的可视化测量试验。这几个代码非常风趣,它比正规的端到端测量试验更加小。它由多少个部分组成
—— 设置浏览器,测量试验 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行)。

现行反革命大家早就安装好浏览器和
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
会截取页面图像并将之与前面二个测验发生的规格图像进行比较(参阅上面包车型客车小节“运维可视化测量试验”)。要是比较结实是新图像与标准等价,则测验成功,不然测量试验失利。

可视化测验是端到端测量试验越来越好的工具

拓展可视化测试的皇皇利润是 —— 系统管理的平安。并且 ——
你不是只检查一八个要素 ——
你是在二遍断言中反省整个页面。你恐怕会发觉部分压根没想去找的主题材料!

总的来讲,看起来可视化测量检验是端到端测量试验中独步天下的断言方法。但不幸的是,前段时间可视化断言极慢,所以你须要优秀地把一些反省一定成分的例行断言和自己斟酌整个页面包车型地铁可视化断言组合起来。

纪事 ——
未有特效药妙药:未有某贰个测试项目能够做有所事情!混合分裂品类的测验能够更加好的创设平衡,提议那样的插花供给测量试验经验。所以现在就伊始测量试验!的确,测验必要时刻和职分。不过即使您从头测量试验,你就不可能悔过自新了。

运作可视化测验

我们怎么才行运营可视化测量试验更看到结果?

若是您未曾运用意况变量 APPLITOOLS_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

假定我们有意让测验失败,(比方)通过点击 43 * 3 而不是 42 *
2,测量试验会失利,Applitools 分界面会展现测验并高亮差异之处:

澳门凯旋门注册网址 6

修补那个“Bug”要求在 Mocha 和 Applitools 中让测量试验再一次经过。

小结

那边对测量试验前端代码的家家户户举行二个总括。纵然您认为自个儿遗漏了如何,也许有其余的主题材料/商量/嘲讽,请推@giltayar,大概回应本文。

笔者必须承认本人很想在这一个类别中再多写一篇小说 —— 关于测量检验包蕴 Ajax
调用的运用,实际的应用程序都会有一点需求。

何人知道吗?

1 赞 2 收藏 1
评论

澳门凯旋门注册网址 7

相关文章