您的位置:时时app平台注册网站 > web前端 > 测试你的前端代码:可视化测试【彩世界网址】

测试你的前端代码:可视化测试【彩世界网址】

2019-10-12 18:39

小结

此处对测量试验前端代码的多种举行一个总括。要是您感到作者遗漏了怎么,恐怕有其余的主题素材/批评/戏弄,请推@giltayar,可能回应本文。

自家不能够不认可自个儿很想在此个种类中再多写一篇文章 —— 关于测量试验包蕴 Ajax 调用的运用,实际的应用程序都会有一点点供给。

什么人知道吗?

1 赞 2 收藏 1 评论

彩世界网址 1

测试 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”。

运维可视化测验

大家怎么才行运营可视化测量试验更见到结果?

借令你未有行使情况变量 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 中让测验再一次经过。

测试 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 行。对了,不要忘记:

彩世界网址 7

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

开展可视化测量检验的皇皇好处是 —— 系统处理的平静。并且 —— 你不是只检查一七个成分 —— 你是在贰次断言中反省整个页面。你或者会发觉有的压根没想去找的标题!

如上所述,看起来可视化测量检验是端到端测验中独占鳌头的断言方法。但不幸的是,这几天可视化断言比较慢,所以您须求美貌地把有个别检查一定成分的不荒谬化断言和反省整个页面包车型大巴可视化断言组合起来。

纪事 —— 未有特效药妙药:未有某一个测验项目能够做有所事务!混合差别档期的顺序的测量试验能够越来越好的确立平衡,提议这样的混杂需求测验经验。所以今后就起始测验!的确,测验必要时刻和职责。但是如若你从头测验,你就不能够洗心革面了。

想说点有关利用 await 的片段话

你在恐怕互联网上任哪个地方方看见部分例子,它们并从未使用 async/await,只怕是使用了 promise。实际上那样的代码是一道的。那么为何也能 work 的很好啊?坦白地说,笔者也不了然,看起来疑似在 webdriver 中稍加 trick 的管理。正如 selenium文书档案中说道,在 Node 协助 async/await 在此之前,那是叁个一时半刻的减轻方案。

Selenium 文档是 Java 语言。它还不完全,但是包涵的消息也丰硕了,你做几回测量检验就能够调节那个本事。

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

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

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

测量试验 App,你从哪个地方初步?在结尾那几个部分,第五片段,Gil Tayar 计算了他为前端测验新人写的一而再串小说。最后那篇小说中,Tayar 陈诉了可视化测量试验,以至为啥它是测量试验前端代码的最后一步。

前段时间,作者一个刚刚步入优质前端世界的爱人打电话问俺该怎么测量试验他的应用程序。我告诉她有太多必要学习的东西,在机子里一贯说不清楚。作者答应发送一些对她前端之路有所辅助的链接。

就此作者在Computer前坐下,通过 谷歌寻找相关的主旨。作者找到相当多链接,也发送给她了,但自个儿对那几个链接研讨的深度并不佳听。小编找不到三个宏观的指南 —— 以新入行的前端的角度 —— 指导怎么样测量检验前端选取。作者没找到某些指南既讲理论又讲施行,同期依旧面向前端采取的批评。

所以,笔者调节写一个。那早便是这一连串的第五局地了。你能够在上边看见别的一些:

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

除此以外,为了写那篇作品,小编写了多少个小应用 —— Calculator(计算器) —— 作者要用它亲自去做测量试验的两样连串。你能够在此边看见它的源代码。

写端到端测量试验代码

好了,废话十分少说,早先介绍写端到端代码。首先供给安不忘危好两件事情:1. 二个浏览器;2. 运营前端代码的服务器。

因为要动用 Mocha 实行端到端测量试验,就和此前单元测验一样,要求先对浏览器和 web 服务器进行一些陈设。使用 Mocha 的 before 钩子设置开始化状态,使用 after钩子清理测量试验后情形。before 和 after 钩子分别在测量试验的启幕和终止时运维。

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

可视化测量试验

软件测验一直是作者的一大爱好。近些日子,笔者感到没有测验就写不出代码。对笔者来讲,有一种原始的主见,运转的指标就是为了印证代码是还是不是科学。你的意趣是告诉本身,在原先,每便开辟者修改他们的代码,都亟需有人手工业去印证在此以前平常的事情如故不奇怪?是如此啊?

故而,作者写测量试验。因为自个儿疼爱演说和写博客,笔者会演说或写关于软件测量检验的源委。如若有空子进来贰个对增高软件测量检验有着精华远见的店堂,写代码来救助任什么人写测量检验,并加大她们的成品,作者会不暇思索的插手。

就是如此,小编近年参加了 Applitools (如果你想了解职位,是布道师和高端架构师)。因为他们的产品,Applitools Eyes,与自身写的那个种类具备直接挂钩,小编调整在此个类别中多写三个片段 —— 一个关于“可视化测量试验”的部分。

还记得小编的质疑呢?开辟者实际总是会在每一次修改他们的代码之后运转他们的应用。嗯,到近来截至,软件出品须求手工业测试—— 那是在利用的可视化方面。还从未艺术检查选取看起来仍旧是好的 —— 字体是没有错的,对齐没不日常,颜色也还在,等等。

商议上您是足以写代码来进行有关的检讨。大家在第三某些领悟到什么样利用 Selenium Webdriver 测量试验 Web 应用的 UI。我们能够动用 Selenium 的 getScreenShot API 来获取页面包车型客车截图,将其保存为标准,之后各个测验都会将页面截图与这些规范进行比较:

彩世界网址 8

啊哈!即便如此轻便就好了。小编尝试过这一个方案,结果遇上不菲标题,最终只得甩掉那个方案。何况可笑的是自己老是修改了代码都要运营应用。重要的标题在好几技能:浏览器在表现内容的时候存在一些一线的差距—— 产生那几个出入的因素可财富于显示屏恐怕GPU,对剧情开展抗锯齿渲染的方法略有差异。未有两张截图会具有完全等同的像素。那些差距人眼觉察不到,也便是说,按像素实行相比毫无意义。你要求动用图像分析本事来处理这么些难点。

并且,还会有任何问题,仅从本人依据 Applitools 的职业就能够总计出如下难点:

  • 你无法对一切页面截图 —— 你不得不对能够见到的有的截图。
  • 即使页面中存在动画,那就不能拿它和基本功图像举办相比。
  • 动态数据,举个例子广告,会让专门的工作变得复杂,难以搜索与标准比较的实际上差别。
  • 页面怎么时候才会“完全加载”?哪一天能力对其截图?未来在 DOM 加载达成时截图是远远不足的。要寻找哪些时候才得以截图是件非常窘迫的政工。

端到端测量检验

在其次片段中,我们选拔 Mocha 测量试验了使用中最中央的逻辑,calculator模块。本文中大家将运用端到端测量试验整个应用,实际上是模拟了顾客全体异常的大可能率的操作实行测验。

在大家的例子中,总计器突显出来的前端即为整个应用,因为未有后端。所以端到端测量检验便是说直接在浏览器中运作应用,通过键盘做一多级总括操作,且保障所出示的出口结果都以不利的。

是还是不是供给像单元测量试验那样,测量试验种种组合呢?并不是,大家早已在单元测量检验中测量检验过了,端到端测量检验不是检查有个别单元是不是ok,而是把它们放到一齐,检查照旧否能够准确运维。

大家做赢得

但是大家就像能够编写制定自动的可视化测验。存在着广大自己并不知道的工具得以更加好的截图并将之与专门的工作图像比较。在那之中部分之类:

  • Wraith
  • WebdriverCSS
  • 本来还应该有 Applitools Eyes
  • (还是别的的,但本文已经有一点长了…)

那几个工具得以化解全数或局地地方提到的标题。在多级的这些局地,笔者想向您出示如何运用 Applitools Eyes 来编排可视化测量检验。

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

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

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

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

写多个可视化测量检验

既然可视化测试是测量检验的最后产品,它们应该用于端到端浏览器的前端测量检验中。所以那是本身的可视化测验。这几个代码挺有意思,它比常规的端到端测验更加小。它由三个部分组成 —— 设置浏览器,测量试验 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 会截取页面图像并将之与后边三个测验产生的基准图像实行相比较(参阅上边包车型大巴小节“运营可视化测量试验”)。要是相比较结实是新图像与准绳等价,则测量试验成功,不然测量试验失败。

测试吧!

设置完驱动以往,该看一下测量试验的代码了。完整的测量检验代码在这里处,上面列出部分代码:

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昂CoraL,浏览器会去实行,可是是异步试行。浏览器推行的非常的慢,那时候对于开辟人士来说,确切地驾驭浏览器“正在实施”,要比单独领会一个结果更关键。正是因为浏览器推行的格外快,所以一旦不重试的话,很轻松被 await 所愚弄。在背后的测量检验中 promise-retry 也会时不经常利用,那就是干吗在端到端测验中需求重试的缘故。

必要多少端到端测验

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

率先个原因,假若已经通过了单元测量试验和集成测量试验,那么恐怕早已把具备的模块都测量试验过了。那么端到端测量试验的效果与利益就是把装有的单元测量试验绑到一同进行测量试验,所以没有要求过多端到端测验。

其次个原因,那类测量检验日常都相当的慢。假诺像单元测验那样有几百个端到端测验,这运转测验将会足够慢,那就违背了贰个很要紧的测量检验原则——测量试验神速上报结果。

其两个原因,端到端测量试验的结果有的时候候会油不过生 flaky的状态。Flaky 测量检验是指平常状态下得以测验通过,然则一时会现出测量检验失利的情景,也等于不安定测量检验。单元测量检验大约不会冒出不安静的场馆,因为单元测量检验平常是差不离输入,轻巧输出。一旦测量检验涉嫌到了 I/O,那么不平稳测量试验恐怕就出现了。那能够减小不稳定测量试验呢?答案是一定的,可以把动荡测验出现的频率减弱到能够承受的程度。那能够通透到底解决不安静测量检验呢?可能能够,不过自个儿到现行反革命还没来看过[笑着哭]。

之所认为了减小大家测量检验中的不平稳因素,尽量减弱端到端测验。13个以内的端到端测量检验,各样都测量检验应用的机要专业流。

总结

本文中主要性介绍了怎么样:

  • 介绍了端到端测量检验中装置浏览器的代码;
  • 介绍了什么样利用 webdriver API 来调用浏览器,以致如何收获 DOM 中的 element;
  • 介绍了选取 async/await,因为具有 webdriver API 都以异步的;
  • 介绍了干吗端到端测量试验中要选拔 retry。

    1 赞 收藏 评论

彩世界网址 9

设置浏览器

近日我们早已设置完了后端,应用已经有了服务器提供劳动了,未来要在浏览器中运营我们的计算器应用。用什么包来驱动自动推行顺序吗,作者平日利用 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。到明天达成,驱动部分就早已设置完结了。

设置 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 文件夹会相同的时间选取在生产条件和端到端测量检验情状。这里要留意贰个相当的重大的事体,端到端测量试验的运行条件要尽恐怕和生产条件保持一致。

运营测量检验

早已介绍完了端到端测量检验和单元测量检验,未来用 npm test 来运维具有测量检验:

彩世界网址 10

二回性全体因而!(那是当然的了,不然怎么写文章。)

本文由时时app平台注册网站发布于web前端,转载请注明出处:测试你的前端代码:可视化测试【彩世界网址】

关键词: