cypress(二)命令与API速查文档

八青妹
347 阅读7分钟

0. 前言

八青妹在给组员介绍Cypress的时候，有的组员一看到只有英文文档，就望而却步了，这里八青妹对照官网（英文），制作了一份中文的命令和api速查文档。

1. Cypress 命令

1.1 Queries---读取应用程序状态的命令

  • as：创建别名。
  • children：获取一组DOM元素中每个元素的子元素。
  • closest：获取与选择器匹配的第一个DOM元素。
  • contains：获取包含文本的DOM元素。
  • debug：设置调试器并记录上一个命令产生的内容。
  • document：获取 window.document 对象。
  • eq：在元素数组中获取特定索引的DOM元素。
  • filter：获取特定选择器匹配的元素。
  • find：查找特定选择器的特定后代元素。
  • first：获取一组DOM元素中的第一个DOM元素。
  • focused：获取当前获取焦点的DOM元素。
  • get：通过选择器或者别名获取一个或者多个DOM元素。
  • hash：获取当前页面地址的哈希值。
  • invoke：在前边生成的主题上调用函数。
  • its：获取前边生成的主题的属性值。
  • last：获取一组DOM元素的最后一个DOM元素。
  • location：获取活动页面的 window.location 对象。
  • next：获取紧接的下一个兄弟DOM元素。
  • nextAll：获取所有兄弟DOM元素。
  • nextUntil：获取一组匹配的DOM元素中的每个后续兄弟元素，不包括提供的元素。
  • not：过滤DOM元素。
  • parent：获取父元素。
  • parents：获取所有的父元素。
  • prev：获取前一个兄弟节点。
  • prevAll：获取前边的所有兄弟节点。
  • prevUntil：获取前边所有的兄弟节点，不包括提供的元素。
  • root：获取页面根节点。
  • shadow:遍历元素的阴影 DOM。
  • siblings：获取兄弟DOM元素。
  • title：获取活动页面的 document.title。
  • url：获取当前活动页面的URL。
  • window：获取当前活动窗口的 window 对象。

1.2 Assertions---在给定状态下断言的命令

  • and：创建断言。
  • should：创建断言，同 and()。

1.3 Actions---像用户一样与应用程序交互

  • check：选中 check 或者 radio。
  • clear：清除 input 或者 textarea 的值。
  • click：点击DOM元素。
  • dblclick：双击DOM元素。
  • rightclick:右击DOM元素。
  • scrollIntoView：将元素滚动到视图中。
  • scrollTo：滚动到特定位置。
  • select：选择 select 中的 option。
  • selectFile:在 HTML5 输入元素中选择文件，或模拟将文件拖入浏览器。
  • trigger：触发DOM元素上的事件。
  • type：给DOM元素输入内容。
  • uncheck：取消选中复选框。

1.4 Other Commands---对编写测试有用的任何其他命令

  • blur：失去焦点。
  • clearAllCookie：清除特定的浏览器 cookie。
  • clearAllLocalStorage：清除所有的localStorage。
  • clearCookie:清除特定浏览器 cookie。
  • clearCookies:清除域的浏览器 cookie。
  • clearLocalStorage:清除当前域和子域中存储的localStorage。
  • clock:覆盖浏览器内置的时间对象（Date、setTimeout 和类似对象），覆盖全局与时间相关的函数,允许通过 cy.tick() 控制它们。
  • debug:设置调试器语句并记录前一条命令的结果。
  • each:迭代数组结构,为数组中的每个项目调用回调。
  • end：结束一系列命令。
  • exec：执行系统命令。
  • fixture：加载文件中的数据集。
  • focus：使一个DOM元素获取焦点。
  • getCookie：获取浏览器的特定cookie。
  • getCookies：获取浏览器的所有cookie。
  • getAllCookies:获取浏览器所有的 cookie。
  • getAllLocalStorage:获取浏览器所有的localStorage。
  • getAllSessionStorage:获取测试与之交互的所有起源的sessionStorage。
  • go：前进或者后退。
  • hover：不存在这个命令。
  • intercept:监视和存根网络请求和响应。
  • log:打印 cypress 日志信息。
  • mount:在cypress组件开始加载前。
  • origin:在一次测试中访问多个不同来源的域。
  • pause：暂停执行 cypress 命令。
  • readFile：读取文件内容。
  • reload：重新加载页面。
  • request：发送HTTP请求。
  • screenshot：生成截图。
  • session:缓存并还原 cookie、localStorage 和 sessionStorage（即会话数据），以便在测试之间重新创建一致的浏览器上下文。
  • setCookie：设置浏览器cookie。
  • spread：将数组扩展为多个参数。
  • spy：包装方法，记录函数的调用和参数。
  • stub：替换函数，记录其用法并控制其行为。
  • submit：提交一个表单。
  • task：通过 task 插件，在 Node.js 中执行代码。
  • then：使用上一个命令产生的结果。
  • tick：移动时间。
  • viewport：控制应用程序的屏幕大小和方向。
  • visit：访问远程URL。
  • wait：等待方法。
  • within：将后续命令限制在此元素内。
  • wrap：产生传递给 .wrap() 的对象。
  • writeFile：写入指定内容到文件。

2. Cypress API

Cypress 在全局 Cypress 对象上公开了许多属性和方法。 Cypress API 与 Cypress 命令的主要区别在于，Cypress API 在调用时立即执行，而不会在稍后排队运行。

  • Cypress.arch:底层操作系统的 CPU 架构名称，由 Node 的 os.arch() 返回。
  • Cypress.browser:有关当前浏览器的信息，如浏览器系列和版本。
  • Cypress.Commands:创建新的自定义命令，扩展或覆盖现有命令。
  • Cypress.Config:获取和设置Cypress的配置。
  • Cypress.Cookie.debug:修改 cookie 时生成控制台日志。
  • Cypress.currentRetry: 代表当前测试重试次数的数字。
  • Cypress.currentTest: 包含当前执行测试信息的对象。
  • Cypress.log:这是内部 API，用于控制打印到命令日志中的内容。 在编写自己的自定义命令时非常有用。
  • Cypress.dom:DOM 相关辅助方法的集合。
  • Cypress.env:从测试内部获取环境变量。
  • Cypress.isBrowser:检查当前浏览器是否与给定的名称或过滤器匹配。
  • Cypress.isCy:检查变量是否是 cy 或 cy chainable 的有效实例。
  • Cypress.Keyboard.defaults:为 .type() 命令的执行方式设置默认值。
  • Cypress.platform:底层操作系统名称，由 Node 的 os.platform() 返回。
  • Cypress.require:启用 cy.origin() 回调函数中的依赖关系。
  • Cypress.Screenshot,defaults:为 .screenshot() 命令截取的屏幕截图和测试失败时自动截取的屏幕截图设置默认值。
  • Cypress.SelectorPlayground:配置Selector Playground。
  • Cypress.session:与 .session() 命令相关的辅助方法集合。
  • Cypress.spec:对象，其中包含有关当前执行的规范文件的信息。
  • Cypress.testingType:当前测试类型，如 "e2e "或 "组件"。
  • Cypress.version:当前的cypress版本

3.举例说明

3.1 command命令举例

关于command命令，运用的时候都需要增加前缀cy.,我们使用下Queries中的get和as命令。

cy.get('#wuyanzu').as("husband")

上述代码意思为找到id为wuyanzu的元素，并给它取个别名为husband。那后续就可以将wuyanzu作为husband来用啦。

现在用Assertions中的should和Actions中的click来试试husband能不能用吧。

cy.get('@handband').should('be.visible').click()

上述代码的意思是，我先断言husband是可见的，然后点击它，也就是id为wuyanzu的元素。

3.2 api使用举例

这里举例Cypress.Commands创建新的自定义命令。在support/commands.js文件里面添加自定义命令。例如，我们每次打开页面，几乎必做的就是登录，那我们需要封装一个登录的命令，入参为手机号或者账号，登录的验证码假设都为123456，运行cy.login('18858585858'),即执行登录的统一方法。如何实现呢？

Cypress.Commands.add('login', (mobileNo, vertifyCode = 123456) => {
//这里为登录页面要做的操作
//1. 例如找到账号输入框，输入mobileNo
//2. 站到发送验证码的按钮并点击
//3.找到验证码输入框并输入验证码
//4.然后点击确认按钮
//5.校验是否完成登录
})

在使用的时候，就可以直接用cy.login('18858585858'),即为自定义的登录命令啦。

4.总结

就八青妹在用cypress的过程中而言，难的不是找不到对应的命令，而是怎么去运用cypress去发挥更大的用途，与自己的项目相融合，为团队建设和项目质量赋能！八青妹一直觉得官网上提供的api很重要，因为它决定了这个框架能达到的高度到哪里，是不是你想要的样子它都有。如果它没有，那建议去看看playwright官网

avatar
文章
阅读
粉丝