含斜杠参数的网络请求下Cypress intercept()及cy.wait()失效问题

问题原因 #

你当前的拦截规则cy.intercept('http://example.com/myPage1**')未正确匹配带日期斜杠参数的请求，或是拦截代码执行晚于请求发起时间，导致cy.wait('@myPage1')找不到对应请求触发超时。

修复方案 #

1. 调整匹配规则 #

简化glob匹配

直接匹配myPage1路径前缀，忽略后续query参数的格式：

// 匹配myPage1路径下的所有请求
cy.intercept('http://example.com/myPage1*').as('myPage1');

正则精准匹配

如果需要针对带日期斜杠的参数做精准拦截，用正则表达式匹配：

cy.intercept(/http:\/\/example\.com\/myPage1\?.*startDate=\d{2}\/\d{2}\/\d{4}.*endDate=\d{2}\/\d{2}\/\d{4}/).as('myPage1');

2. 确保拦截时机正确 #

必须在触发请求的操作（比如点击按钮、页面跳转）之前定义拦截，否则请求已发出，拦截无法捕获：

// 先设置拦截
cy.intercept('http://example.com/myPage1*').as('myPage1');
// 再触发请求
cy.get('#submit-button').click();
// 等待请求响应
cy.wait('@myPage1').its('response.statusCode').should('eq', 200);

3. 调试请求匹配情况 #

如果仍超时，可添加日志验证是否捕获到目标请求：

cy.intercept('http://example.com/myPage1*', (req) => {
  console.log('捕获到的请求URL:', req.url); // 在浏览器控制台查看匹配结果
}).as('myPage1');

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