来自 奥门威尼斯网址 2019-09-21 03:38 的文章
当前位置: 威尼斯国际官方网站 > 奥门威尼斯网址 > 正文

可视化测试,端到端测试

测验你的前端代码 – part3(端到端测量检验)

2017/06/05 · 基本功技巧 · 测试

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

上一篇小说《测量检验你的前端代码 – part2(单元测量试验)》中,笔者介绍了有关单元测验的基本知识,从本文介绍端到端测量试验(E2E 测量检验)。

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

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

原稿出处: Gil Tayar   译文出处:oschina奥门威尼斯网址 ,   

测量检验 App,你从哪儿开始?在终极这些片段,第五片段,Gil Tayar 计算了她为前端测验新人写的三翻五次串小说。最终那篇文章中,Tayar 呈报了可视化测量试验,以及为啥它是测量检验前端代码的末段一步。

近期,小编二个恰恰步入完美前端世界的对象打电话问小编该怎么测量检验他的应用程序。我告诉她有太多需求上学的东西,在对讲机里常有说不清楚。作者答应发送一些对她前端之路有所支持的链接。

进而作者在计算机前坐下,通过 Google搜索相关的宗旨。小编找到比非常多链接,也发送给她了,但本身对这一个链接探究的深浅并不满意。作者找不到一个周密的指南 —— 以新入行的前端的角度 —— 辅导怎么样测验前端接纳。笔者没找到有个别指南既讲理论又讲实施,同期依旧面向前端选择的研商。

据此,我说了算写七个。那已经是这一多级的第五有个别了。你能够在底下看看任何一些:

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

另外,为了写那篇文章,小编写了三个小应用 —— Calculator(计算器) —— 小编要用它亲自去做测验的不等等级次序。你能够在此处看看它的源代码。

端到端测量试验

在其次局地中,大家采纳 Mocha 测验了采纳中最宗旨的逻辑,calculator模块。本文中大家将选拔端到端测验整个应用,实际上是效仿了客商全部望的操作实行测量检验。

在大家的例证中,计算器展现出来的前端即为整个应用,因为未有后端。所以端到端测量试验正是说直接在浏览器中运作应用,通过键盘做一密密麻麻总计操作,且有限扶助所出示的出口结果都以准确的。

是或不是供给像单元测量试验那样,测量试验各个组合呢?并非,我们以前在单元测验中测验过了,端到端测量检验不是检查某些单元是否ok,而是把它们放到一齐,检查依旧否能够准确运维。

可视化测验

软件测验一贯是本身的一大爱好。近期,笔者以为没有测量试验就写不出代码。对自己的话,有一种原始的主见,运转的目标就是为了求证代码是还是不是科学。你的情致是告诉自身,在原先,每回开拓者修改他们的代码,都亟需有人手工业去印证此前平常的业务还是寻常?是那般啊?

进而,笔者写测量试验。因为自己爱好演讲和写博客,作者会演说或写关于软件测量检验的剧情。假若有空子进来多个对拉长软件测验有着优良远见的商城,写代码来协理任什么人写测验,并加大她们的成品,笔者会不暇思索的加入。

便是如此,笔者多年来参预了 Applitools (就算你想驾驭职位,是布道师和高端架构师)。因为她俩的制品,Applitools Eyes,与本人写的这几个体系具有直接关系,笔者主宰在那一个连串中多写三个局地 —— 一个有关“可视化测量检验”的一些。

还记得作者的吸引呢?开荒者实际总是会在每一回修改他们的代码之后运营他们的采用。嗯,到近年来截至,软件出品必要手工业测量试验—— 那是在应用的可视化方面。还未曾主意检查采用看起来依旧是好的 —— 字体是不容置疑的,对齐未有毛病,颜色也还在,等等。

反驳上您是足以写代码来展开有关的反省。大家在第三片段精晓到何以接纳Selenium Webdriver 测验 Web 应用的 UI。大家能够运用 Selenium 的 getScreenShot API 来获得页面包车型大巴截图,将其保存为原则,之后各类测验都会将页面截图与那个原则举办比较:

奥门威尼斯网址 1

啊哈!借使那般简单就好了。笔者尝试过那一个方案,结果遇上海重机厂重标题,最终只能抛弃这么些方案。并且可笑的是本人老是修改了代码都要运行应用。首要的标题在少数技能:浏览器在表现内容的时候存在一些细微的差距—— 产生那一个出入的因素恐怕来自显示屏或然GPU,对剧情开展抗锯齿渲染的不二秘籍略有分裂。未有两张截图会具备一模二样的像素。这一个差距人眼觉察不到,也正是说,按像素实行比较毫无意义。你需求动用图像深入分析本领来管理这么些难点。

况兼,还应该有别的难题,仅从作者遵照 Applitools 的专业就能够总计出如下难题:

  • 您不能够对总体页面截图 —— 你只好对能够见见的一些截图。
  • 如若页面中设有动画,那就不能够拿它和基本功图像进行相比较。
  • 动态数据,比如广告,会让专门的学业变得复杂,难以找寻与原则比较的实在差别。
  • 页面怎么时候才会“完全加载”?什么日期技能对其截图?今后在 DOM 加载完结时截图是相当不够的。要搜索怎么着时候才足以截图是件十二分困难的作业。

亟待多少端到端测验

先是付诸结论:端到端测验无需太多。

率先个原因,假设已经因此了单元测量试验和购并测量试验,那么或然早已把装有的模块都测量试验过了。那么端到端测量试验的效果与利益正是把全数的单元测量检验绑到一齐张开测验,所以无需广大端到端测量检验。

其次个原因,那类测量试验一般都不快。假若像单元测验那样有几百个端到端测量试验,这运维测验将会充足慢,那就违反了三个很关键的测量试验原则——测量检验飞速反馈结果。

其四个原因,端到端测量检验的结果一时候会现出 flaky的意况。Flaky 测量试验是指经常情况下可以测验通过,可是临时会冒出测量检验战败的场地,也正是不安宁测量试验。单元测量试验大概不会并发不平稳的气象,因为单元测验经常是简简单单输入,轻松输出。一旦测验涉及到了 I/O,那么不牢固测量试验大概就涌出了。那能够削减不平静测量试验呢?答案是必然的,能够把不安静测量检验出现的频率减少到还行的品位。那能够深透化解不平稳测量检验呢?也许能够,可是自身到最近还没见到过[笑着哭]。

故而为了收缩大家测量试验中的不牢固因素,尽量减弱端到端测验。12个以内的端到端测验,各个都测量试验应用的第一职业流。

咱俩做赢得

可是大家如同能够编制自动的可视化测验。存在着广大作者并不知道的工具得以更加好的截图并将之与正规图像比较。在那之中一部分之类:

  • Wraith
  • WebdriverCSS
  • 当然还恐怕有 Applitools Eyes
  • (照旧另外的,但本文已经有一点点长了…)

那一个工具得以消除一切或部分地点提到的标题。在多种的那个某些,作者想向您来得怎么着使用 Applitools Eyes 来编排可视化测量检验。

写端到端测量检验代码

好了,废话非常少说,最初介绍写端到端代码。首先须要预备好两件业务:1. 三个浏览器;2. 运维前端代码的服务器。

因为要使用 Mocha 举办端到端测验,就和事先单元测量检验相同,须要先对浏览器和 web 服务器举办一些布局。使用 Mocha 的 before 钩子设置开端化状态,使用 after钩子清理测量试验后情况。before 和 after 钩子分别在测量检验的上马三保了结时运维。

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

写二个可视化测量试验

既是可视化测验是测验的最后产品,它们应该用于端到端浏览器的前端测量试验中。所以那是本人的可视化测验。这一个代码极其有意思,它比平常的端到端测量试验更加小。它由多少个部分组成 —— 设置浏览器,测量检验 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 会截取页面图像并将之与后边一个测验发生的基准图像举办相比较(参阅上面的小节“运营可视化测量试验”)。假设比较结实是新图像与原则等价,则测量试验成功,不然测量检验退步。

设置 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 文件夹会同一时间选择在生产情形和端到端测验情形。这里要留神一个很保养的事情,端到端测量试验的运行情况要尽大概和生产条件保持一致。

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

开展可视化测量检验的气概不凡收益是 —— 系统管理的安定团结。并且 —— 你不是只检查一多个成分 —— 你是在一次断言中检查整个页面。你也许会发觉部分压根没想去找的标题!

如上所述,看起来可视化测量试验是端到端测验中独一的预知方法。但不幸的是,近日可视化断言不快,所以您必要好好地把部分检查一定成分的平常断言和检查整个页面的可视化断言组合起来。

切记 —— 未有特效药妙药:未有某二个测验项目能够做有所工作!混合分歧品类的测量检验能够更加好的创制平衡,建议那样的交集必要测量试验经验。所以现在就从头测量试验!的确,测量检验供给时间和权利。但是假若你起来测验,你就不能够悔过自新了。

安装浏览器

今昔大家已经安装完了后端,应用已经有了服务器提供劳动了,未来要在浏览器中运转大家的总结器应用。用哪些包来驱动自动施行顺序吗,小编常常使用 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,稍后会看到),清理掉未来会关闭浏览器。这里注意,策画驱动的历程是异步的,重回一个promise,所以我们采纳 async/await 功能来使代码看起来更美妙(Node7.7,第一个地点协助 async/await 的版本)。

终极在测量试验函数中,传递网址: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。到方今停止,驱动部分就早就安装实现了。

运作可视化测量试验

咱俩怎么才行运转可视化测验更看到结果?

要是你未曾动用境况变量 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 中让测量检验再次经过。

本文由威尼斯国际官方网站发布于奥门威尼斯网址,转载请注明出处:可视化测试,端到端测试

关键词: