Cypress安装与使用教程（3）—— 软测大玩家_cypress 传参

});
});

 


### 2.1 参数传递


  我们在定义业务方法的时候传参不仅仅可以传一些基础的业务参数，还可以在此基础上根据自己的业务场景来定义一些比较灵活的参数类别。比如我们在对特定元素进行业务操作时，我们可以统一的定义一个操作类或方法，来对此进行特定的传参，类似于selenium中find\_elelment方法。


  我们先在commands.js中定义，这里我们要传递的参数是一个元素选择器。这样我们就可以灵活的在页面上选择到任何一个能捕捉到的元素。

Cypress.Commands.add(‘clickAndVerify’, { prevSubject: ‘element’ }, (element, text) => {
cy.wrap(element).click();
cy.contains(text);
});

  使用的时候只需要直接调用即可。

cy.get(‘.my-button’).clickAndVerify(‘Clicked Button Text’);

 


### 2.2 链式调用


  自定义命令毫无意外的也支持了链式写法，无疑这让我们在设计脚本的过程中可以更加灵活的应对各类复杂业务场景。


  同样的现在commands.js中定义，这里我们在返回get的时候进行了链式调用。

Cypress.Commands.add(‘login’, (username, password) => {
cy.visit(‘/login’);
cy.get(‘#username’).type(username);
cy.get(‘#password’).type(password);
cy.get(‘button[type=“submit”]’).click();
return cy.get(‘.user-dashboard’);
});

  使用的时候只需要直接调用即可。

cy.login(‘your_username’, ‘your_password’).should(‘be.visible’);

 


### 2.3 自定义断言


  同样的，既然可以进行抽象，我们也完全可以将断言的操作加进自定义命令，以验证特定的状态或条件，包括一些特殊的验证逻辑。


  commands.js中定义，断言元素存在切包含text。

Cypress.Commands.add(‘shouldBeVisibleAndContain’, { prevSubject: ‘element’ }, (element, text) => {
cy.wrap(element).should(‘be.visible’).and(‘contain’, text);
});

  直接调用方法即可对元素进行断言。

cy.get(‘.my-element’).shouldBeVisibleAndContain(‘Expected Text’);

 


### 2.4 处理异步操作


  对于上一篇末尾处说到的异步操作处理，同样可以在自定义命令中进行抽象，其实在被测对象中异步操作是很常见的，比如等待某个条件成立后再继续执行后续的操作，类似的这种场景我们都可以在自定义命令中继续抽象和服用，以优化脚本的整体运行效率和维护性。


  在commands.js中定义，等待特定的条件后再执行后续的操作。

Cypress.Commands.add(‘waitForApiResponse’, () => {
cy.intercept(‘GET’, ‘/api/data’).as(‘apiCall’);
cy.wait(‘@apiCall’);
});

  调用，不再赘述。

cy.waitForApiResponse();

 


### 2.5 Cypress对象


  除了以上说的这些方法外，我们还可以将一些元素和值包装成Cypress对象，这样做的作用就是让这些抽象后的对象可以在自定义命令中使用更多的Cypress自带命令。


  在commands.js中定义，我们使用cy.wrap()将对象包装成Cypress对象，使用自带的日志命令。

Cypress.Commands.add(‘logAndDebug’, (subject) => {
cy.wrap(subject).debug().log(‘Subject:’, subject);
});

  调用，不再赘述。

cy.get(‘.my-element’).logAndDebug();

   
  


## 3. 注意点


![在这里插入图片描述](https://img-blog.csdnimg.cn/8617df82837148249ef77bb86ac32306.png#pic_center)  
   我们在使用自定义命令的同时也需要注意一些特殊的情况与场景。


 


### 3.1 关于脚本业务上下文


  在自定义命令中，当然也存在着上下文的关系，我们要确保了解Cypress中命令的上下文，其中`this`与`prevSubject` 是特别觉有代表性的关键字。它们其实是允许你在自定义命令中引用和操作前一个命令的主体，就`this`这个来说，它在自定义命令中用于引用当前命令的上下文，对于一般的命令，它指向cy对象；对于一些带有`{ prevSubject: 'element' }`选项的命令，`this`则会指向前一个命令的主体，这个是需要大家注意的。


  下面我们来举两个例子：  
   首先我们来看普通命令中的`this`，这里的`this`就是指向cy对象的。

Cypress.Commands.add(‘customCommand’, function () {
cy.log(this);
});

  调用

cy.customCommand();

  而对面带有`{ prevSubject: 'element' }`的方法时，这里的`this`就像我之前说的那样，指向的是前一个命令的主体。简单点来说`this`指向前一个命令的subject，而cy.log(subject)里的就是前一个命令的主体。

Cypress.Commands.add(‘customCommandWithSubject’, { prevSubject: ‘element’ }, function (subject) {
cy.log(this);
cy.log(subject);
});

  调用

cy.get(‘.my-element’).customCommandWithSubject();

 


  `prevSubject` 的用作为告诉cypress你的自定义命令期望前一个命令的主体作为传参，一般在多个自定义命令中共享同一个元素的场景中会频繁使用到。


  同理，这里我们对前一个命令的主体进行点击操作，所以使用`prevSubject` 来达到我们所想要的效果。

Cypress.Commands.add(‘customCommandWithSubject’, { prevSubject: ‘element’ }, function (subject) {
cy.wrap(subject).click();
});

  调用

cy.get(‘.my-element’).customCommandWithSubject();

 

### 自学几个月前端，为什么感觉什么都没学到？？

----------------------------------------------------------------------------------

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。



这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/15be8206a9f6e5bd9e8e930303b613ee.png)



还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。



所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。