Cypress动态调用setCookie时变量传入path参数报错如何解决？

问题原因 #

你的报错核心是传入的Cookie参数格式非法：

1. 你使用模板字符串时给key、value、path都额外包裹了一层单引号，导致最终传入的参数会自带多余的单引号，比如json中path值为/时，实际传入setCookie的是'/'（带单引号的字符串），不符合浏览器Cookie的参数规范，触发Chrome DevTools协议底层报错。
2. 你示例中auth.json的path占位值da_path不符合Cookie路径要求，合法的Cookie路径必须以/开头。

解决方法 #

1. 修正参数写法 #

直接读取json中的字段值，不要额外加任何引号包裹，正确写法如下：

const auth = require('../../fixtures/auth')

context('Assertions', () => {
  beforeEach(() => {
    // 单条Cookie设置
    cy.setCookie(auth.cookies[0].key, auth.cookies[0].value, { path: auth.cookies[0].path })
  })
})

2. 批量设置优化 #

如果有多条Cookie，直接循环批量处理即可：

beforeEach(() => {
  auth.cookies.forEach(cookie => {
    cy.setCookie(cookie.key, cookie.value, {
      path: cookie.path,
      // 如需其他Cookie属性也可直接从json读取传入，比如：
      // domain: cookie.domain,
      // secure: cookie.secure,
      // httpOnly: cookie.httpOnly
    })
  })
})

3. 校验auth.json格式 #

确保json中所有path字段的值都以/开头，示例如下：

{
  "cookies": [
    {"key": "da_key", "value": "da_value", "path": "/", "name": "da_name"},
    {"key": "user_token", "value": "xxx", "path": "/user", "name": "user_token"}
  ]
}

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