前端自动化测试框架Cypress入门(二)

2020-06-30  哎测试爱测试 
编写你的第一个测试
  • 如何在Cypress开始测试一个新项目。
  • 通过和失败的测试是什么样子
  • 测试Web导航,DOM查询和编写断言。

演示网站:https://example.cypress.io/

一.添加一个测试文件

本地已经成功地安装了Cypress 应用程序,现在是时候编写我们的第一个测试用例了。

在 cypress / integration / example 文件夹中创建一个新文件spec.js

创建完该文件后,我们应该会看到Cypress Test Runner立即将其显示在Integration Tests列表中。 Cypress会监视文件是否有任何更改,并自动显示任何更改。

二.编写你的第一个测试
  • 打开您最喜欢的 IDE,并将下面的代码添加到我们的用例 spec. js 文件中。

  • 运行spec.js文件

  • 现在让我们编写第一个失败的测试用例

  • 运行spec.js文件

三.我们来写一个真实的测试
  1. 一个测试用例通常包含三个方面

    (1)设置应用程序状态

    (2)采取行动

    (3)对结果应用程序状态进行断言

  2. 我们来对这些步骤进行详细介绍,并将它们清晰地映射到Cypress命令

    (1)访问一个网页

    (2)查询元素

    (3)与元素交互

    (4)断言页面上的内容

  3. 实现

    Step 1:首先,让我们访问一个网页。 在这个例子中,我们将访问我们的 Kitchen Sink,命令:cypress.visit()

    运行后如下图所示,此命令会打开一个网页,相当于Selenium中的driver.get("https://example.cypress.io/")

    Step 2:查询元素

    我们已经加载了Kitchen Sink页面,我们需要对其进行一些操作。 我们来查找type元素,命令:cy.contains()

    Step 3:点击元素,命令:.click()

    Step 4:做出断言,断言URL是否包含commands/actions,命令:.should()

    运行结果如下:

  4. 添加更多的命令和断言

    在给定的测试中,我们不局限于单个交互和断言。实际上,应用程序中的许多交互可能需要多个步骤,并且可能以多种方式改变应用程序状态


    运行结果如下:

  5. 总结

    这就是Cypress中的一个简短测试,它访问一个页面,查找并单击一个链接,验证URL,然后验证新页面上元素的行为。

    给用户访问https://example.cypress.io

    查找元素type

    点击元素type

    URL应该包括/commands/actions

    查找email输入框.action-email并输入mrjade@qq.com

    断言输入的email

WX搜索关注【测试工程师成长之路】公众号
102°|1029 人阅读|0 条评论
登录 后发表评论
访客 991
2
0
0/0
0
博客
讨论
问答
找茬
哎测试爱测试 的其他博文 更多