Cypress跨测试块登录优化技巧

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《Cypress跨测试块保持登录最佳实践》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

在Cypress自动化测试中，默认的测试隔离机制会导致每个it测试块之间浏览器状态被重置，使得before()钩子中的一次性登录操作无法在后续测试块中保持。本文将深入探讨这一问题，并提供两种解决方案：不推荐的testIsolation: false配置及其潜在风险，以及强烈推荐使用cy.session()管理会话，实现高效、可靠且隔离性良好的跨测试块登录状态保持。

Cypress测试隔离机制与before()钩子的局限性

Cypress设计之初就强调测试的隔离性，即每个it测试块都应独立运行，互不影响。这意味着在默认情况下，当一个it块执行完毕后，Cypress会清除浏览器状态（包括Cookies、LocalStorage、SessionStorage等），并重新加载页面，以确保下一个it块在一个干净的环境中开始。

这种隔离性对于确保测试的稳定性和可重复性至关重要，但同时也带来了一个常见问题：如果你的测试套件需要多个测试块（it）都依赖于一个已登录的用户状态，那么仅在describe块中使用一次before()钩子进行登录，将无法满足需求。因为before()钩子只在所有it块执行之前运行一次，其建立的登录状态在第一个it块结束后就会被清除，导致后续的it块无法在登录状态下执行。

解决方案一：禁用测试隔离 (testIsolation: false)

一种直接但不推荐的方法是禁用Cypress的测试隔离功能。通过在cypress.config.js文件中设置testIsolation: false，可以阻止Cypress在每个it块之间重置浏览器状态。

配置方法： 在 cypress.config.js 文件中添加或修改 e2e 或 component 配置：

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    testIsolation: false, // 禁用测试隔离
  },
});

优点：

• 实现简单，只需一行配置。
• before()钩子中执行的登录操作将对所有后续it块生效。

缺点（强烈不推荐的原因）：

• 状态污染 (State Bleeding)： 这是最主要的问题。禁用测试隔离意味着前一个测试块对浏览器状态的任何修改（如添加/删除元素、修改数据、导航到其他页面等）都会保留并影响到下一个测试块。这可能导致测试之间产生意料之外的依赖，使得测试结果不稳定或出现“假阳性”（False Positive），即测试通过但实际上代码存在问题。
• 测试不可靠性： 维护和调试变得困难，因为测试失败的原因可能不是当前测试块的逻辑问题，而是之前某个测试块遗留的状态问题。
• 不符合最佳实践： 自动化测试的核心原则之一是测试的独立性，禁用隔离性违背了这一原则。

解决方案二：使用cy.session()管理会话（推荐）

Cypress提供了一个更优雅、更健壮的解决方案来管理跨测试块的会话状态：cy.session()命令。cy.session()允许你缓存一组登录凭据或会话状态，并在需要时恢复它们，而无需每次都执行完整的登录流程。它通常与beforeEach()钩子结合使用。

cy.session()的工作原理：

1. 你定义一个会话（通常是登录操作），并给它一个唯一的名称。
2. 当cy.session()第一次被调用时，它会执行你提供的登录代码，并缓存生成的会话状态（如Cookies、LocalStorage等）。
3. 在后续的cy.session()调用中（只要会话名称和依赖项不变），Cypress会直接恢复缓存的会话状态，而不会重新执行登录代码。这大大提高了测试效率。
4. 即使会话被恢复，Cypress仍会为每个it块提供一个相对干净的环境，避免了状态污染。

使用cy.session()实现登录状态保持：

describe('VerifyLoginFunctionality', () => {
    // 实例化页面对象，确保它们在所有测试块中都可访问
    const loginpage = new LoginPage();
    const dashbord = new Dashboard();
    const createtask = new Createtask();

    // 在每个测试块执行前，尝试恢复或创建会话
    beforeEach(() => {
        // 定义一个名为 'loginSession' 的会话
        // 这里的回调函数只会在会话第一次创建时执行
        cy.session('loginSession', () => {
            cy.viewport(1280, 800); // 可以在这里设置视口，如果这是登录的一部分

            // 加载 fixture 数据，确保登录凭据可用
            cy.fixture('example').then((data) => {
                cy.visit(Cypress.env('login_url'));
                cy.title().should('eq', data.Pagetitle);

                // 执行完整的登录流程
                loginpage.SigninMannuallyButton().click();
                loginpage.TeamSpace().type(data.TeamspaceName);
                loginpage.NextButton().click();
                loginpage.Email().type(data.email);
                loginpage.Password().type(data.Password);
                loginpage.SigninButton().click();
                cy.wait(3000); // 等待登录完成
            });
        });
        // 每次 beforeEach 执行时，cy.session 都会确保会话已存在并恢复
        // 如果会话已缓存，则不会再次执行上述登录代码
    });

    it('Verify the user profile', () => {
        // 此时，cy.session 已经确保用户处于登录状态
        dashbord.UserProfileButton().click();
        cy.wait(2000);
        dashbord.UserProfilePopupMiddleLayer().should('be.visible');

        dashbord.Firstname()
            .invoke('val')
            .then(text => {
                const someText = text;
                cy.log("aaa> " + someText);
                expect(someText).to.equal("Toyota");
                assert.equal(someText, "Toyota");
            });

        cy.wait(3000);
        dashbord.Givenname().clear();
        dashbord.Givenname().type("jjjjjjj");
        dashbord.Firstname().should('have.value', "jjjjjjj");
        cy.wait(1500);
        dashbord.CloseIconOnProfile().click();
    });

    it('Verify the create task', () => {
        // 此时，用户也处于登录状态
        createtask.CreateNewTaskButton().click();
        // ... 继续创建任务的测试步骤
    });

    // 可以在这里添加更多依赖登录状态的测试块
    it('Verify another feature', () => {
        // ...
    });
});

cy.session()的优势：

• 高效： 登录操作只在第一次需要时执行一次，后续测试块直接恢复缓存的会话，大大减少了测试运行时间。
• 隔离性： 尽管会话被恢复，但Cypress仍然会在每个it块开始前提供一个相对干净的环境，减少了测试间状态污染的风险。
• 可靠性： 确保每个测试块都以预期的登录状态开始，提高了测试的稳定性和可重复性。
• 可维护性： 登录逻辑集中管理，便于修改和调试。

总结与最佳实践

当需要在Cypress中跨多个it测试块保持登录状态时，强烈推荐使用cy.session()命令结合beforeEach()钩子。它提供了一种高效、可靠且符合测试最佳实践的解决方案，避免了禁用测试隔离所带来的状态污染风险。

关键点回顾：

• 默认行为： Cypress默认在每个it块之间重置浏览器状态，以确保测试隔离。
• before()局限： before()钩子只运行一次，其建立的状态在第一个it块结束后可能失效。
• testIsolation: false： 简单但风险高，不推荐用于生产测试。
• cy.session()： 最佳实践，缓存并恢复会话，提高效率同时保持隔离性。将其置于beforeEach()中，确保每个测试块开始前都处于正确的登录状态。

通过采纳cy.session()，你的Cypress测试套件将更加健壮、高效，并且易于维护。

今天关于《Cypress跨测试块登录优化技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！