2024年前端最新Cypress安装与使用教程（3）—— 软测大玩家_cypress 传参，2024互联网大厂前端面经合集

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

2. 自定义命令

  在Cypress中，自定义命令是一个强大的辅助功能，说直白点就是它允许你将重复使用的代码片段抽象成可重用的命令。而通过这些自定义的命令，我们可以让我们的自动化测试脚本更加的趋于模块化，可想而知的是，模块化的脚本其自身的可维护性、复用性和可阅读性就会更上一个台阶。

要使用自定义命令，我们就需要在support/commands.js中建立自己的命令。比如我们需要将登录这个业务动作进行抽象，那就先编写一段登录的相关业务代码。

我们写一个十分简单的登录操作，语法如下，可以看到整个的业务代码十分的简单，只需要将用户名和密码进行传参即可。

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();
});

那么我们在commands.js中将这段业务代码添加完成后，在实际的测试脚本中就可以直接对其进行使用。
使用起来是不是很方便，因为其本身就是将业务方法继续抽象，所以直接调用其方法名就可以达到登录代码同样的效果。

describe('login\_test', () => {
  it('should log in successfully', () => {
    cy.login('your\_username', 'your\_password');
  });
});

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. 注意点

  我们在使用自定义命令的同时也需要注意一些特殊的情况与场景。

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); 
});

调用

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】