Cypress别名报错：无法读取undefined的'todoItem'属性，求解决方案

问题原因 #

你遇到的报错大概率是两个原因：

1. 通过invoke('text')获取的文本可能包含多余的空格、换行符，和预期的'New Todo'不完全匹配
2. 直接使用this.todoItem访问别名时，可能存在Cypress异步执行导致的上下文问题

正确的解决方法 #

方法1：对获取的文本进行去空格处理

修改beforeEach中的代码，在获取文本后添加.trim()去除首尾空白字符，确保和预期值完全一致：

beforeEach(function() { // 用function而非箭头函数，确保this上下文正确
  cy.get(".new-todo").type("New Todo {Enter}");
  cy.get(".todo-list>li:nth-child(1)")
    .invoke("text")
    .trim() // 去除文本首尾的空格、换行
    .as("todoItem");
});

it("gets added todo item", function() {
  expect(this.todoItem).to.eq("New Todo");
});

方法2：使用Cypress链式断言（更推荐的最佳实践）

避免使用别名和this，直接在测试用例中链式验证，更符合Cypress的异步执行逻辑：

beforeEach(() => {
  cy.get(".new-todo").type("New Todo {Enter}");
});

it("gets added todo item", () => {
  cy.get(".todo-list>li:nth-child(1)")
    .invoke("text")
    .trim()
    .should("eq", "New Todo");
});

方法3：通过cy.get('@别名')访问存储的值

如果必须使用别名，也可以通过cy.get('@todoItem')来获取存储的文本，避免this上下文的问题：

beforeEach(() => {
  cy.get(".new-todo").type("New Todo {Enter}");
  cy.get(".todo-list>li:nth-child(1)")
    .invoke("text")
    .trim()
    .as("todoItem");
});

it("gets added todo item", () => {
  cy.get("@todoItem").then(todoText => {
    expect(todoText).to.eq("New Todo");
  });
});

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