布莱恩F爱
向一位来自波特兰的专注于Ayobet英雄联盟ngular、Web技术和Node.js的谷歌开发专家学习。
广告 ·ultimatecourses.com
用终极课程正确地学习Angular

用QA Wolf生成Angular测试

通过QA Wolf学习如何为Angular应用生成Jest和Puppeteer测试。yobet外围

引入QA狼

我一直在玩的QA狼为Angular项目生成测试,到目前为止,我的印象非常深刻。根据他们的文件:

QA Wolf是一个用于创建浏览器测试和脚本的开源库

开始QA Wolf

首先,让我们安装QA Wolf和相应的TypeScript定义:

npm安装- d qawolf @types /{节点、操纵木偶的人笑话}

注意,TypeScript是可选的,但因为我们是在Angular的上下文中使用QA Wolf,所以在测试中使用TypeScript是有意义的。

接下来,我们将使用npx qawolf记录命令打开我们的项目并使用Chromium记录测试。一定要先使用npm开始或者您可能正在使用的任何自定义脚本。

npx qawolf记录http://localhost:4200 home

打开Chromium后,像用户一样进行端到端测试,然后切换回终端并点击输入来编写测试文件。

QA Wolf的美妙之处在于将@qawolf/web库注入到Chromium浏览器中。该库拦截并记录您的操作,这些操作将转换为测试的工作流。

最后,我们通过以下方式执行测试:

npx qawolf测试

打开Chromium,执行我们的puppeteer和jest测试。

生成的测试

在本例中,我为主页创建了一个新测试,因此将该测试称为“home”。这导致了一种新的.qawolf /测试/ home.test.js文件:

常量{发射}=需要(“qawolf”);常量选择器=需要(“. . /选择器/家庭”);描述(“回家”,()= >{浏览器;beforeAll(异步()= >{浏览器=等待发射({url:“http://localhost: 4200 /”});});毕竟(()= >浏览器关闭());('可以点击'菜单'按钮',异步()= >{等待浏览器点击(选择器[0]);});(可以点击mat-input-0输入,异步()= >{等待浏览器点击(选择器[1]);});(可以输入“mat-input-0”输入,异步()= >{等待浏览器类型(选择器[2],“角”);});(可以进入的,异步()= >{等待浏览器类型(选择器[3.],“↑↓进入进入”);});(可以点击“Unsubscribe from RxJS Observables to avo…”,异步()= >{等待浏览器点击(选择器[4]);});});

让我们快速回顾一下由QA Wolf生成的代码:

  • 首先,我们用发射()异步功能打开Chromium浏览器到指定的URL。
  • 然后,我们有一系列的测试来利用浏览器API扩展操纵木偶的浏览器API在浏览器实例中执行操作。
  • 最后,在执行了所有测试之后,我们调用close ()方法关闭Chromium浏览器。

这里是一个关于可用方法的快速纲要浏览器实例:

  • click ()触发点击事件
  • find ()返回一个ElementHandle根据指定的选择器
  • findProperty:()根据指定的属性返回元素的属性值选择器
  • 转到()将浏览器导航到指定的URL
  • hasText ()断言页面上存在文本
  • select ()选择一个值HTMLSelectElement
  • 类型()查找一个元素,关注该元素,然后键入指定的值

我还鼓励您查看官方文档,其中有一个部分是关于评审生成的测试代码

一般来说,测试遵循规定的“AAA”模式:

  1. 安排
  2. 行为
  3. 断言

测试安排浏览器实例并启动指定的URL。测试通过与浏览器交互进行操作click (),类型()click ()方法。

但是,您会注意到,在大多数情况下,最后一步是断言在我们的测试中不见了

选择器

QA Wolff有一个生成选择器的内置策略。虽然这是一个良好的架构,但它是一个最佳实践数据-在应用程序源代码中进行绑定,以确保测试的持久性。

描述(“回家”,()= >{//为了简洁,省略代码('可以点击'菜单'按钮',异步()= >{等待浏览器点击({css:“[data-qa = ' mat-toolbar-menu-btn ']”});});(可以点击mat-input-0输入,异步()= >{等待浏览器点击({css:“[data-qa = ' menu-dialog-search-input ']”});});(可以输入“mat-input-0”输入,异步()= >{等待浏览器类型({css:“[data-qa = ' menu-dialog-search-input ']”},“角”);});(可以进入的,异步()= >{等待浏览器类型({css:“[data-qa = ' menu-dialog-search-input ']”},“↑↓进入进入”);});});

在上面的例子中,我已经删除了导入的使用选择器数组,并将它们替换为具有单个css财产。使用这个属性,我们可以指定一个CSS选择器来在DOM中定位元素。

可用于定位元素的其他属性,如超文本标记语言文本

添加断言

正如我前面提到的,我们需要向我们的测试添加断言来总结安排、行动和主张测试的基本步骤。这就是我们利用木偶师和小丑的地方。

我们要断言搜索有结果。我们可以通过坚持长度孩子们容器元素的值大于0。要做到这一点,我们需要使用find ()方法访问ElementHandle用于结果容器。让我们来看看这个测试:

描述(“回家”,()= >{//为了简洁,省略代码(“搜索结果”,异步()= >{等待浏览器类型({css:“[data-qa = ' menu-dialog-search-input ']”},“↑↓进入进入”);常量支安打=等待浏览器找到({css:“[data-qa =“搜索结果”).ais-Hits”});预计(等待支安打评估(节点= >节点孩子们长度))toBeGreaterThan(0);});});

让我们来分析一下:

  • 首先,我们用类型()方法输入“Enter”键的向下和向上键。
  • 然后,我们用find ()方法访问< div class = " ais-Hits " > < / div >元素。在我的应用中,我使用了Angular的Algolia即时搜索功能,它用这个元素包装了搜索结果。需要注意的是,这个测试现在有点脆弱,因为我的目标是由Algolia库生成的DOM中的一个元素。
  • 最后,我们期望()节点的children.length价值toBeGreaterThan (0)

当学习QA Wolf时,我发现你还需要学习一些木偶师和Jest api。在上面的例子中,我必须学习如何ElementHandleAPI在木偶师工作。

快照测试

Jest提供了快照测试,我们可以使用它来验证我们的UI自上次快照拍摄以来没有改变:

描述(“搜索”,()= >{//为了简洁,省略代码(“比赛快照”,异步()= >{常量支安打=等待浏览器找到({css:“(data-qa =“搜索结果”)”});预计(支安打jsonValue())toMatchSnapshot();});});

在上面的代码中我们:

  • 使用浏览器的APIfind ()方法来获取对ElementHandle为我们的搜索结果。
  • 使用元素句柄APIjsonValue ()方法获取对象的JSON表示
  • 使用Jest断言JSON对象与我们的快照匹配toMatchSnapshot ()方法。

结论

最后,我们了解到:

  • QA Wolf很容易上手
  • QA狼搭建并生成了(大部分)安排和行动步骤所必需的代码
  • 我们需要对使用Puppeteer和Jest来编写断言有一些基本的了解

布莱恩F爱

嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。