企业官网建设流程全解析

ESLint Plugin Cypress实战：10个真实场景的最佳实践示例

【免费下载链接】eslint-plugin-cypressAn ESLint plugin for projects that use Cypress项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-cypress

ESLint Plugin Cypress是专为Cypress测试项目打造的ESLint插件，它能帮助开发者在编写Cypress测试代码时遵循最佳实践，避免常见错误，提升测试质量和可维护性。本文将通过10个真实场景的最佳实践示例，带你快速掌握如何利用这个强大的工具优化你的Cypress测试代码。

1. 避免在测试用例中使用async/await

问题场景：在Cypress测试中使用async/await可能导致测试执行顺序混乱，因为Cypress命令是异步执行的，但有自己的命令队列机制。

最佳实践：禁止在测试用例中使用async/await，改用Cypress的命令链风格。

// 不推荐 it('should load user data', async () => { await cy.visit('/users'); await cy.get('[data-testid="user-list"]').should('be.visible'); }); // 推荐 it('should load user data', () => { cy.visit('/users'); cy.get('[data-testid="user-list"]').should('be.visible'); });

相关规则：no-async-tests.js

2. 禁止使用force: true选项

问题场景：使用force: true会绕过Cypress的动作重试机制，可能掩盖应用中的真实交互问题。

最佳实践：避免使用force: true，确保元素在可交互状态下执行操作。

// 不推荐 cy.get('button').click({ force: true }); // 推荐 cy.get('button').should('be.enabled').click();

相关规则：no-force.js

3. 使用data-*属性选择器

问题场景：使用类名或标签名作为选择器可能因样式变更导致测试脆弱。

最佳实践：使用data-*属性作为选择器，提高测试稳定性。

// 不推荐 cy.get('.user-button').click(); // 推荐 cy.get('[data-testid="user-button"]').click();

相关规则：require-data-selectors.js

4. 避免不必要的等待

问题场景：使用固定时间的cy.wait()会增加测试执行时间，且可能因环境差异导致测试不稳定。

最佳实践：利用Cypress的自动等待机制，或等待特定请求完成。

// 不推荐 cy.wait(3000); cy.get('[data-testid="loading"]').should('not.exist'); // 推荐 cy.intercept('/api/data').as('dataRequest'); cy.visit('/dashboard'); cy.wait('@dataRequest'); cy.get('[data-testid="loading"]').should('not.exist');

相关规则：no-unnecessary-waiting.js

5. 避免链式get命令

问题场景：连续使用cy.get()会降低测试性能和可读性。

最佳实践：使用单次cy.get()结合CSS选择器或.find()方法。

// 不推荐 cy.get('.user-list').get('.user-item').first().click(); // 推荐 cy.get('.user-list .user-item').first().click(); // 或 cy.get('.user-list').find('.user-item').first().click();

相关规则：no-chained-get.js

6. 不要将Cypress命令的返回值赋值给变量

问题场景：Cypress命令返回的是Promise-like对象，而非实际值，赋值给变量会导致意外行为。

最佳实践：使用.then()回调或别名处理命令结果。

// 不推荐 const userName = cy.get('[data-testid="user-name"]').text(); cy.log(userName); // 推荐 cy.get('[data-testid="user-name"]').then(($el) => { const userName = $el.text(); cy.log(userName); }); // 或使用别名 cy.get('[data-testid="user-name"]').invoke('text').as('userName'); cy.get('@userName').then(userName => { cy.log(userName); });

相关规则：no-assigning-return-values.js

7. 截图前先进行断言

问题场景：在未确认元素状态的情况下截图，可能导致截图内容不符合预期。

最佳实践：截图前先对关键元素进行断言。

// 不推荐 cy.get('[data-testid="dashboard"]').screenshot(); // 推荐 cy.get('[data-testid="dashboard"]').should('be.visible').screenshot();

相关规则：assertion-before-screenshot.js

8. 避免使用debug命令

问题场景：提交包含cy.debug()的代码会导致测试执行中断。

最佳实践：调试完成后移除cy.debug()命令。

// 不推荐 cy.get('[data-testid="user-form"]').debug().submit(); // 推荐 cy.get('[data-testid="user-form"]').submit();

相关规则：no-debug.js

9. 避免使用pause命令

问题场景：cy.pause()会暂停测试执行，影响CI/CD流程。

最佳实践：使用交互模式调试，而非在代码中添加cy.pause()。

// 不推荐 cy.visit('/').pause(); cy.get('[data-testid="login-button"]').click(); // 推荐 cy.visit('/'); cy.get('[data-testid="login-button"]').click();

相关规则：no-pause.js

10. 避免使用and命令

问题场景：cy.and()命令可读性较差，且可能导致测试逻辑不清晰。

最佳实践：使用多个独立的断言或.should()链式调用。

// 不推荐 cy.get('[data-testid="user-email"]') .should('have.value', 'test@example.com') .and('be.enabled'); // 推荐 cy.get('[data-testid="user-email"]') .should('have.value', 'test@example.com') .should('be.enabled');

相关规则：no-and.js

如何开始使用ESLint Plugin Cypress

1. 安装插件：

npm install eslint-plugin-cypress --save-dev

2. 在ESLint配置文件中添加插件：

// .eslintrc.js module.exports = { plugins: ['cypress'], extends: [ 'plugin:cypress/recommended' ] }

3. 运行ESLint检查Cypress测试文件：

npx eslint cypress/**/*.js

通过遵循这些最佳实践，你可以编写出更健壮、更可靠的Cypress测试代码，减少维护成本，提高测试效率。更多规则详情可查看docs/rules目录下的文档。

【免费下载链接】eslint-plugin-cypressAn ESLint plugin for projects that use Cypress项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-cypress