Cypress 12多Toast消息校验求助：如何匹配任意单条目标Toast

DevOps 小满

2026-7-29

解决Cypress多Toast消息校验问题

问题分析

现有lookAtToast命令固定取第一条Toast（.eq(0)），当页面同时出现多条不同内容的Toast时，无法匹配非第一条的目标消息，也没法验证每条Toast的唯一性。

解决方案

1. 校验单条指定Toast（支持任意顺序，确保唯一匹配）

修改自定义命令，去掉eq(0)的限制，改用filter筛选目标消息，同时断言匹配数量为1，确保不会出现重复的Toast内容：

Cypress.Commands.add('verifyToastExistsOnce', (message) => {
  cy.get('.messenger-message-inner')
    .filter(`:contains("${message}")`)
    .should('have.length', 1); // 确保仅匹配到一条对应Toast
});

2. 依次校验全部3条Toast

如果需要按任意顺序验证所有Toast内容，可采用以下两种方式：

方式一：遍历校验每条Toast

// 测试用例中调用
const expectedToasts = ["First Toast", "Second Toast", "Third Toast"];
expectedToasts.forEach(toastMsg => {
  cy.verifyToastExistsOnce(toastMsg);
});

方式二：断言Toast文本集合匹配所有目标内容

cy.get('.messenger-message-inner')
  .should($toasts => {
    const toastTexts = $toasts.toArray().map(el => el.textContent.trim());
    const expectedToasts = ["First Toast", "Second Toast", "Third Toast"];
    // 验证两个数组内容完全一致（不考虑顺序）
    expect(toastTexts.sort()).to.deep.equal(expectedToasts.sort());
  });

3. 可选：等待Toast加载完成

如果Toast是异步弹出的，建议添加等待逻辑，确保所有Toast都渲染完成后再校验：

Cypress.Commands.add('waitForAllToasts', (count) => {
  cy.get('.messenger-message-inner').should('have.length', count);
});

// 测试用例中先等待3条Toast加载完成
cy.waitForAllToasts(3);
// 再执行校验
cy.verifyToastExistsOnce("Second Toast");