如何在Cypress中验证Alert文本？断言失败问题排查

问题描述 #

尝试断言点击按钮后弹出的Alert文本为：

Error: There was an unexpected problem with SQL query execution.

在Cypress中断言失败，测试运行输出显示：

assert expected [Error: There was an unexpected problem with SQL query execution.] to equal [Error: There was an unexpected problem with SQL query execution.]

使用.contains()和.should()方法均无法匹配一致，当前代码：

cy.button().click();
cy.on('window:alert', (str) => {
     expect(str).to.equal('[Error: There was an unexpected problem with SQL query execution.]')
})

问题分析 #

Cypress输出中的**是测试报告的高亮格式化标记，并非实际Alert字符串的内容。断言失败的核心原因是实际Alert字符串与预期字符串存在细微差异，可能是：

• 字符串前后包含不可见控制字符、全角空格、换行符
• 实际字符串带有额外的符号（比如代码中的[]）
• 字符串首尾有多余空格

解决方案 #

1. 先排查实际字符串的真实内容 #

添加日志打印，对比实际字符串与预期的字符编码、长度，定位差异：

const expectedAlert = 'Error: There was an unexpected problem with SQL query execution.';
cy.button().click();
cy.on('window:alert', (str) => {
  // 打印基础信息
  console.log('实际Alert字符串:', str);
  console.log('实际长度:', str.length);
  console.log('预期长度:', expectedAlert.length);
  
  // 逐字符对比编码，定位差异位置
  for (let i = 0; i < Math.max(str.length, expectedAlert.length); i++) {
    console.log(`位置${i}: 实际字符编码=${str.charCodeAt(i)}, 预期=${expectedAlert.charCodeAt(i)}`);
  }
})

2. 针对性调整断言方式 #

根据排查结果选择对应断言：

情况一：字符串前后有多余空格/不可见字符

使用trim()清理后再断言：

const expectedAlert = 'Error: There was an unexpected problem with SQL query execution.';
cy.button().click();
cy.on('window:alert', (str) => {
  expect(str.trim()).to.equal(expectedAlert);
})

情况二：字符串包含额外符号（如代码中的[]）

先移除多余符号再断言：

const expectedAlert = 'Error: There was an unexpected problem with SQL query execution.';
cy.button().click();
cy.on('window:alert', (str) => {
  const cleanedStr = str.replace(/^\[|\]$/g, '').trim(); // 移除首尾的[]
  expect(cleanedStr).to.equal(expectedAlert);
})

情况三：存在不确定的细微差异

使用正则表达式匹配核心内容：

const expectedRegex = /Error: There was an unexpected problem with SQL query execution\./;
cy.button().click();
cy.on('window:alert', (str) => {
  expect(str.trim()).to.match(expectedRegex);
})

情况四：使用Cypress内置的alert断言方式

也可以直接用Cypress的cy.stub来拦截并断言alert：

const expectedAlert = 'Error: There was an unexpected problem with SQL query execution.';
cy.window().then((win) => {
  cy.stub(win, 'alert').as('alert');
  cy.button().click();
  cy.get('@alert').should('have.been.calledWith', expectedAlert);
});

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