使用Cypress origin命令传递动态URL参数时参数未定义问题排查

使用Cypress v10.4.0的cy.origin()命令传递URL的pathname和search参数时，这两个参数始终为undefined，导致cy.visit()执行失败。参考官方示例编写的代码如下：

官方参考示例 #

cy.origin(
  'supersecurelogons.com',
  // Send the args here...
  { args: sentArgs },
  // ...and receive them at the other end here!
  ({ username, password }) => {
    cy.visit('/login')
    cy.get('input#username').type(username)
    cy.get('input#password').type(password)
    cy.contains('button', 'Login').click()
  }
)

我的代码 #

const workaroundUrl = new URL('https://www.validurl.com/pathname?search=true');
const url = { pathname: workaroundUrl.pathname, search: workaroundUrl.search }
cy.origin(workaroundUrl.origin, { args: { url } }, ({ pathname, search }) => {
  cy.visit(pathname + search);
});

问题根源 #

你传递给args的是嵌套对象{ url }（等价于{ url: url }），但回调函数中直接尝试解构顶级的pathname和search属性——这两个属性并不存在于顶级对象中，因此会得到undefined。

解决方案 #

有两种修正方式，任选其一即可：

方式1：传递扁平参数对象

修改args的传递逻辑，直接传入包含pathname和search的扁平对象，回调中即可直接解构目标属性：

const workaroundUrl = new URL('https://www.validurl.com/pathname?search=true');
const urlParams = { pathname: workaroundUrl.pathname, search: workaroundUrl.search }
cy.origin(workaroundUrl.origin, { args: urlParams }, ({ pathname, search }) => {
  cy.visit(pathname + search);
});

方式2：正确解构嵌套对象

保持参数传递结构不变，在回调中先解构出url对象，再访问其内部的pathname和search属性：

const workaroundUrl = new URL('https://www.validurl.com/pathname?search=true');
const url = { pathname: workaroundUrl.pathname, search: workaroundUrl.search }
cy.origin(workaroundUrl.origin, { args: { url } }, ({ url }) => {
  cy.visit(url.pathname + url.search);
});

补充说明 #

Cypress的cy.origin()命令中，回调接收的参数结构必须与args传递的结构完全匹配。如果传递的是嵌套对象，回调中也要对应解构嵌套层级的属性。

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