Cypress 是一个现代化的前端自动化测试框架，它具有易用、高效和可靠的特点。Cypress 4.0 版本于 2020 年 2 月 4 日发布，在该版本中，Cypress 引入了多项新特性，例如 TypeScript 支持、自定义命令别名、更好的错误信息、可重试的断言等。本文将介绍 Cypress 4.0 版本的特性与使用方法，帮助读者更好地了解和使用 Cypress 进行前端自动化测试。
TypeScript 支持
Cypress 4.0 版本引入了 TypeScript 支持，这使得 Cypress 的代码更加类型安全，可以在编码期间检查类型错误。要使用 TypeScript，需要安装 Cypress 的 TypeScript 定义文件：
npm install --save-dev @types/cypress
然后，添加 tsconfig.json 文件到项目根目录，指定 TypeScript 编译选项：
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress"]
}
}在 Cypress 代码中，可以使用 TypeScript 的语法，例如：
describe('hello', () => {
it('world', () => {
cy.visit('/');
cy.contains('h1', 'Hello World');
});
});自定义命令别名
Cypress 4.0 版本引入了自定义命令别名的功能，可以将一组命令打包成一个自定义命令，并使用别名调用。这使得测试代码更加简洁，易读性更高。例如，将一组访问登录页面、输入用户名密码、点击登录按钮的命令打包成一个命令别名 login：
Cypress.Commands.add('login', (username: string, password: string) => {
cy.visit('/login');
cy.get('[name=username]').type(username);
cy.get('[name=password]').type(password);
cy.get('button').click();
});然后，在测试代码中可以使用 cy.login('john', 'passw0rd') 调用该命令别名，而不需要重复输入一组相同的命令。
更好的错误信息
在 4.0 版本中，Cypress 改进了错误信息的显示方式，使得异常信息更加直观和易于理解。当断言失败或出现异常时，Cypress 会在命令行界面显示错误信息，并提供哪个测试用例、哪个命令出现了问题。例如：
AssertionError: expected [] to have a length of 3, but got 0 at Object.eval (http://localhost:3000/__cypress/tests?p=tests/hello.spec.ts:5:30) at Hook.eval (http://localhost:3000/__cypress/runner/cypress_runner.js:101170:16) at Hook.Cypress.utils.tryCatchWrapper.eval (http://localhost:3000/__cypress/runner/cypress_runner.js:49945:19)
在错误信息中，可以看到断言失败的具体原因和位置，使得排查问题更加方便和迅速。
可重试的断言
在 Cypress 4.0 中，断言支持可重试的特性，如果断言失败，Cypress 会自动重试直到断言成功或超过最大重试次数。例如：
cy.get('#button').should('contain', 'Submit').should('be.visible');在上面的例子中，should 方法带有两个断言，即应该包含文本 Submit，并且应该可见。如果其中任何一个断言失败，Cypress 会自动重试该命令，直到达到最大重试次数或两个断言都成功为止。这使得测试代码更加健壮和不易受到网络波动等因素的影响。
示例代码
下面是一个使用 Cypress 进行自动化测试的示例代码：
// www.javascriptcn.com code example
describe('login', () => {
beforeEach(() => {
cy.visit('/');
});
it('should render login page', () => {
cy.contains('h1', 'Login');
});
it('should login with correct credentials', () => {
cy.login('john', 'passw0rd');
cy.url().should('include', '/dashboard');
});
it('should show error message with incorrect credentials', () => {
cy.login('john', 'wrongpassword');
cy.contains('.error', 'Wrong username or password');
});
});
Cypress.Commands.add('login', (username: string, password: string) => {
cy.visit('/login');
cy.get('[name=username]').type(username);
cy.get('[name=password]').type(password);
cy.get('button').click();
});在这个示例中，对登录页面进行了三个测试用例的测试，分别是页面是否正确渲染、使用正确的用户名和密码登录是否成功跳转到了 dashboard 页面、使用错误的密码登录是否出现了错误提示。login 方法是一个自定义命令别名，将多个命令打包成一个命令别名，方便测试代码的复用。使用 TypeScript 语法，可以使得代码更加类型安全和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d75395a941bf7134d330d9