Cypress测试：获取子元素数量与验证动态内容更新的最佳实践

本教程探讨了在cypress中正确获取dom元素子节点数量的方法，特别是在`cy.then()`回调中处理jquery对象。我们将详细介绍如何使用jquery的`.children()`方法或原生dom属性来获取子元素数量，并强调在测试动态内容增长时，应避免在单个测试中使用`if-else`逻辑，提倡通过设置清晰的测试前置条件来确保测试覆盖率和可维护性。

引言：Cypress中获取动态元素数量的挑战

在使用Cypress进行UI自动化测试时，经常需要获取某个容器内子元素的数量，并在其基础上进行后续操作或断言。例如，我们可能需要在一个“添加项目”功能中，先获取列表的初始长度，点击添加按钮后再验证列表长度是否增加了。然而，初学者在使用cy.get().then()时，可能对回调函数中DOM元素的类型和操作方式存在疑惑，导致获取子元素数量不准确，进而引发测试失败。

理解cy.get().then()中的元素上下文

当Cypress的cy.get()命令成功定位到元素后，通过.then(($element) => { ... })回调函数传递的$element参数，实际上是一个jQuery对象。这意味着，您需要使用jQuery对象的方法来操作它，而不是直接使用原生DOM元素的属性，除非您显式地将其转换为原生DOM元素。

例如，如果您尝试直接使用$container.children.length来获取子元素数量，这可能会导致错误或不符合预期的结果，因为$container.children在jQuery对象上通常不是一个直接的属性，而是需要通过方法调用来获取子元素集合。

正确获取容器子元素数量的方法

在Cypress的then回调中，获取jQuery对象子元素数量主要有两种推荐方法：

方法一：使用jQuery的.children()方法（推荐）

这是在Cypress中处理jQuery对象时，获取子元素集合的推荐方式。$container.children()会返回一个包含所有直接子元素的新的jQuery对象，然后您可以通过.length属性获取其数量。

cy.get('#container').then(($container) => {
  // 使用 jQuery 的 .children() 方法获取子元素集合，再获取其长度
  const beforeLength = $container.children().length;
  console.log('初始子元素数量 (jQuery):', beforeLength);
  // ... 后续操作
});

方法二：转换为原生DOM元素后使用.children属性

如果您偏好使用原生JavaScript DOM API，可以通过索引[0]从jQuery对象中提取出第一个原生DOM元素，然后使用其.children属性。原生DOM元素的.children属性返回的是一个HTMLCollection，它也有.length属性。

新CG儿

数字视觉分享平台 | AE模板_视频素材

147

查看详情

cy.get('#container').then(($container) => {
  // 转换为原生 DOM 元素后，使用其 .children 属性
  const beforeLength = $container[0].children.length;
  console.log('初始子元素数量 (原生DOM):', beforeLength);
  // ... 后续操作
});

示例代码整合

以下是一个完整的代码示例，展示了两种获取方式以及后续的点击和断言逻辑。请注意，addItemButton和addBlockButton应该在您的测试中预先定义或通过cy.get()获取。

// 假设 addItemButton 和 addBlockButton 已经通过 cy.get() 获取
// 例如：
// const addItemButton = cy.get('#add-item-button');
// const addBlockButton = cy.get('#add-block-button');

cy.get('#container').then(($container) => {
  // 推荐方式：使用 jQuery 的 .children() 方法获取初始子元素数量
  const beforeLength = $container.children().length;

  // 或者，如果您更倾向于原生DOM操作：
  // const beforeLength = $container[0].children.length;

  if (beforeLength === 0) {
    // 如果初始没有子元素，点击添加项目按钮，并断言现在有一个项目
    cy.get('#add-item-button').click(); // 假设这是添加第一个项目的按钮
    cy.get('.item').should('have.length', 1);
  } else {
    // 如果初始已有子元素，点击添加块按钮，并断言项目数量增加一个
    cy.get('#add-block-button').click(); // 假设这是添加更多项目的按钮
    cy.get('.item').should('have.length', beforeLength + 1);
  }
});

Cypress测试的最佳实践：避免if-else结构

在上述示例中，为了处理容器初始状态（空或非空）的不同逻辑，我们使用了if-else结构。然而，在Cypress（以及大多数E2E测试框架）中，在单个测试用例中避免使用if-else逻辑来处理不同的初始状态是一种重要的最佳实践。

问题所在

• 测试覆盖率不明确： 一个包含if-else的测试用例，在每次运行时只能覆盖其中一个分支。这意味着您无法保证两个分支都得到了测试，或者需要运行多次才能覆盖所有情况。
• 测试意图模糊： 一个测试用例应该只关注一个特定的场景或行为。if-else结构使得测试用例承担了两种不同的责任，降低了其可读性和可维护性。
• 调试困难： 当测试失败时，很难快速判断是哪个分支的逻辑出了问题。

推荐方案：分离测试场景

为每个不同的初始状态编写独立的测试用例是更清晰、更健壮的方法。通过在beforeEach钩子或单独的it块中设置特定的测试前置条件，来确保每次测试都在一个已知且一致的状态下运行。

describe('动态内容增加功能测试', () => {

  // 场景一：容器初始为空
  it('当容器为空时，点击添加项目按钮应成功添加一个项目', () => {
    // 设置前置条件：确保 #container 初始为空
    // 这可以通过访问一个特定的URL，或者在 beforeEach 中通过 API/fixture 清空数据来完成
    cy.visit('/your-page?initialState=empty');

    cy.get('#add-item-button').click();
    cy.get('.item').should('have.length', 1);
  });

  // 场景二：容器已有项目
  it('当容器已有项目时，点击添加块按钮应使项目数量增加一个', () => {
    // 设置前置条件：确保 #container 初始有项目
    // 这可以通过访问一个特定的URL，或者在 beforeEach 中通过 API/fixture 预置数据来完成
    cy.visit('/your-page?initialState=hasItems');

    cy.get('#container').then(($container) => {
      const initialLength = $container.children().length;
      cy.get('#add-block-button').click();
      cy.get('.item').should('have.length', initialLength + 1);
    });
  });

});

优势

• 清晰的测试意图： 每个it块都描述了一个明确的测试场景。
• 完整的测试覆盖： 您可以确保所有重要的初始状态都得到了独立且充分的测试。
• 易于调试和维护： 当某个测试失败时，您可以立即知道是哪个特定场景出了问题。

总结

在Cypress中进行UI自动化测试时，正确获取DOM元素的子节点数量是基础且关键的一步。理解cy.get().then()回调中$element参数作为jQuery对象的特性，并使用.children().length或[0].children.length是解决此类问题的关键。更重要的是，为了构建健壮、可维护且覆盖率高的测试套件，我们强烈建议避免在单个测试用例中使用if-else逻辑来处理不同的初始状态。相反，通过设置明确的测试前置条件，将不同的场景分离到独立的测试用例中，将大大提高测试的质量和效率。

以上就是Cypress测试：获取子元素数量与验证动态内容更新的最佳实践的详细内容，更多请关注php中文网其它相关文章！