主页 / coding / 问题 / 79215391
Accepted
Juho Rutila
Asked: 2024-11-22 22:23:24 +0800 CST

cypress 拦截除 baseUrl 调用之外的所有内容

  • 772

我有一个正在运行的单页应用程序http://localhost:3001，并且我已经进行了这样的设置baseUrl。

现在，我想拦截所有外部调用，也就是那些去往其他地方的调用localhost:3001。如何在 Cypress 中编写这种单一拦截？或者，从设计角度来看，我是否以某种“错误”的方式执行此操作？

我尝试过以下拦截，但它们都导致拦截http://localhost:3001/_nuxt文件等。

    cy.intercept("**!(localhost:3001)*", (req) => {
    cy.intercept("**!(localhost:3001)**", (req) => {
    cy.intercept(/^((?!http:\/\/localhost:3001).+)$/, (req) => {
    cy.intercept({ url: /^((?!.*localhost:3001).+)$/ }, (req) => {

奇怪的是，正则表达式/^((?!.*localhost:3001).+)$/是正确的。但它与 localhost 文件不匹配。

/^((?!.*localhost:3001).+)$/.exec("http://localhost:3001/_nuxt/components/Component.vue") => null

as it should be, and then

/^((?!.*localhost:3001).+)$/.exec("https://www.example.com")
(2) ['https://www.example.com', 'https://www.example.com', index: 0, input: 'https://www.example.com', groups: undefined]

那么，Cypressintercept所做的事情是否不仅仅是一个简单的正则表达式执行，还是我在这里遗漏了一些明显的东西？

cypress

3 个回答

  1. Best Answer

    您可以使用部分路径

    cy.intercept({url: /^((?!.*\/_nuxt).+)$/}, (req) => {

    或者将上述负面前瞻添加到您现有的正则表达式中

    cy.intercept({url: /^(?!.*localhost:3001.*)(?!.*\/_nuxt).+$/})

    正如@D.Nykl 所说 - 最好基于路径而不是主机和端口进行拦截，因为它们会根据页面的提供位置而改变。

    解释

    这个错误出现在 Cypress 代码中的_doesRouteMatch处。

    当您提供时，url它还会尝试匹配path应用程序使用的 URL 部分。

    Cypress 源代码缩写以显示相关行

    export function _doesRouteMatch (routeMatcher: RouteMatcherOptions, req: CypressIncomingRequest) {

  const matchable = _getMatchableForRequest(req)
 
  ...

  // for convenience, attempt to match `url` against `path`?    
  const shouldTryMatchingPath = field === 'url'

  ...

  if (matcher.test) {
    if (!matcher.test(value) && 
       (!shouldTryMatchingPath || !matcher.test(matchable.path))) {
                               // ^ failing here
       return false
     }
     continue
   }

    第一行的matchable解析结果为：http://localhost:3001/_nuxt/components/Component.vue

    可匹配对象（部分）由_getMatchableForRequest(req)

    matchable: {
  url: 'http://localhost:3001/_nuxt/components/Component.vue',
  path: '/_nuxt/components/Component.vue',
}

    因此它也尝试在路径上进行匹配

    /^((?!.*localhost:3001).+)$/.test('/_nuxt/components/Component.vue')

    但当然它会失败，并且_doesRouteMatch不会false像您期望的那样返回。

    path通过在正则表达式中包含部分内容，cy.intercept()您可以避免这个错误。

    • 3

  2. Cypress 拦截代码中似乎有一个关于负向前瞻的错误，我无法使任何变体起作用。

    但是，您可以在进行localhost:3001全部拦截之前“使用”这些呼叫。

    拦截按照最后设置/首次匹配的顺序进行处理，因此如果我尝试以下操作，

    cy.intercept('*', (req) => {
  console.log(req.url)
})
cy.intercept(/jsonplaceholder/, req => req.continue())

cy.visit('/')              // baseUrl is "https://example.com"

cy.window().then(win => {
  win.fetch('https://jsonplaceholder.typicode.com/todos/1')
})

    它没有记录呼叫jsonplaceholder

    在此处输入图片描述

    但如果我注释掉第二个拦截

    在此处输入图片描述

    • 1

  3. 可能有更好的方法来处理这个问题，但你可以拦截所有调用，并以不同于本地主机调用的方式处理非本地主机调用。

    cy.intercept('**/*', (req) => {
  if (req.url.includes('localhost')) {
    req.continue();
  } else {
    // whatever needs to happen to non-localhost calls
  }
});

    在上面的例子中，我们检查请求 URL 是否包含 localhost，如果包含，我们就发送请求 - 几乎和从未被拦截过一样。

    • 0

相关问题