在Cypress中定位特定子组件：测试Todo删除按钮定位问题

核心问题分析 #

你当前的删除代码存在两个关键问题：

1. Cypress的.get()是全局查询，调用第二个.get()时会从整个页面重新查找所有remove-icon，而非在第一个Todo容器内查找，导致选中所有删除图标。
2. 每个测试用例（it块）都会执行beforeEach重新加载页面，所以removing todo test执行时，之前添加的Test Todo已经不存在，测试必然失败。

解决方案 #

方案1：调整查询逻辑，在目标Todo容器内查找删除按钮 #

用.find()替代第二个.get()，.find()会在当前已获取的元素范围内查找子元素，确保仅定位第一个Todo里的删除按钮。同时需在删除用例里先重现添加Todo的步骤（因页面会重新加载）：

describe("App test", () => {
  beforeEach(() => {
    cy.visit("localhost:3000");
  });

  it("adding todo test", function () {
    cy.get('[data-testid="mainPage-addTodoBtn"]').click();
    cy.get('[data-testid="task-input"]').type("Test");
    cy.get('[data-testid="name-input"]').type("TestUser");
    cy.get('[data-testid="deadline-input"]').click().type("2022-11-25");
    cy.get('[data-testid="description-textarea"]').click();
    cy.get(".sc-hAZoDl").click();
    cy.get('[data-testid="AddTodo-form-wrapper"]').should(($p) => {
      expect($p.last()).to.contain("Successfully added Todo");
    });
  });

  it("removing todo test", () => {
    // 先添加测试Todo，适配页面重新加载的特性
    cy.get('[data-testid="mainPage-addTodoBtn"]').click();
    cy.get('[data-testid="task-input"]').type("Test");
    cy.get('[data-testid="name-input"]').type("TestUser");
    cy.get('[data-testid="deadline-input"]').click().type("2022-11-25");
    cy.get('[data-testid="description-textarea"]').click();
    cy.get(".sc-hAZoDl").click();
    cy.get('[data-testid="AddTodo-form-wrapper"]').should(($p) => {
      expect($p.last()).to.contain("Successfully added Todo");
    });

    // 精准定位第一个Todo内的删除按钮
    cy.get('[data-testid="main-page-todos-wrapper"]')
      .first()
      .find('[data-testid="remove-icon"]') // 用find替代get，限定查询范围
      .click();
  });
});

方案2：通过Todo唯一文本精准定位（更可靠） #

如果页面可能存在多个Todo，通过任务文本"Test"定位对应的Todo容器，再查找删除按钮，避免误删其他Todo：

it("removing todo test", () => {
  // 先添加测试Todo
  cy.get('[data-testid="mainPage-addTodoBtn"]').click();
  cy.get('[data-testid="task-input"]').type("Test");
  cy.get('[data-testid="name-input"]').type("TestUser");
  cy.get('[data-testid="deadline-input"]').click().type("2022-11-25");
  cy.get('[data-testid="description-textarea"]').click();
  cy.get(".sc-hAZoDl").click();
  cy.get('[data-testid="AddTodo-form-wrapper"]').should(($p) => {
    expect($p.last()).to.contain("Successfully added Todo");
  });

  // 通过任务文本锁定目标Todo，再点击删除按钮
  cy.contains('[data-testid="main-page-todos-wrapper"]', "Test")
    .find('[data-testid="remove-icon"]')
    .click();
});

方案3：合并添加与删除流程到同一个测试用例（减少重复代码） #

如果添加和删除是完整的业务流程，可合并到同一个it块，避免重复执行添加步骤：

it("add and remove todo test", function () {
  // 添加Todo
  cy.get('[data-testid="mainPage-addTodoBtn"]').click();
  cy.get('[data-testid="task-input"]').type("Test");
  cy.get('[data-testid="name-input"]').type("TestUser");
  cy.get('[data-testid="deadline-input"]').click().type("2022-11-25");
  cy.get('[data-testid="description-textarea"]').click();
  cy.get(".sc-hAZoDl").click();
  cy.get('[data-testid="AddTodo-form-wrapper"]').should(($p) => {
    expect($p.last()).to.contain("Successfully added Todo");
  });

  // 删除Todo
  cy.contains('[data-testid="main-page-todos-wrapper"]', "Test")
    .find('[data-testid="remove-icon"]')
    .click();

  // 验证Todo已被删除
  cy.contains('[data-testid="main-page-todos-wrapper"]', "Test").should("not.exist");
});

内容的提问来源于stack exchange，提问作者user19786344