Cypress中表单提交绑定API调用失败（NS_BINDING_REDIRECTED错误）

问题现象 #

• 在Cypress控制的标签页提交表单时，关联API调用失败，抛出NS_BINDING_REDIRECTED错误，且请求体为空
• 在Cypress启动的浏览器其他标签页提交表单则正常，请求体完整，API调用成功
• 即使暂停自动化流程，在同一Cypress标签页手动输入提交，仍会触发该API错误

所用Cypress代码 #

cy.dbquery(SQL_ACTIVATE_ACCOUNT, product).then((SQL_ACTIVATE_ACCOUNT_RS) => {
        let activation_key = String(SQL_ACTIVATE_ACCOUNT_RS.rows[0]);
        cy.url().then((url) => {
            const current_url = new URL(url);
            const protocol = current_url.protocol;
            const host = current_url.hostname;
            const activation_url = `${protocol}//${host}/activate-account-creation?key=${activation_key}`;
            cy.log(`[SELF SERV] Activating MyAccount: ${activation_url}`)
            cy.visit(activation_url).then(() => {
                cy.url().should('include', '/complete-account-creation');
                cy.get('div').contains('Thank you for validating your email address.').then(($el) => {
                    expect($el).to.be.visible;
                })
            })
        })
    })

    cy.get('#title').select('Mr', { force: true })
    cy.get('#firstName').clear().type('Madhawa', { force: true })
    cy.get('#lastName').clear().type('Ratnayake', { force: true })
    cy.get('#telephoneNumber').clear().type('0713661579', { force: true })
    cy.get('#day').clear().type('27', { force: true })
    cy.get('#month').clear().type('05', { force: true })
    cy.get('#year').clear().type('1989', { force: true })

    cy.get('#postCode').clear().type('NN47YB', { force: true }).then(() => {
        cy.get('#findAddress').click().then(() => {
            cy.get('#dropDownListCompleteRegistration').select('Services', { force: true })
        })
    })
    cy.get('#activateForm').submit()

排查与解决思路 #

1. 修正页面上下文问题 #

代码中表单操作未嵌套在cy.visit的回调内，会导致操作可能在错误的页面上下文执行。将所有表单操作移到cy.visit的.then()回调中，确保在目标页面加载完成后再操作：

cy.dbquery(SQL_ACTIVATE_ACCOUNT, product).then((SQL_ACTIVATE_ACCOUNT_RS) => {
  let activation_key = String(SQL_ACTIVATE_ACCOUNT_RS.rows[0]);
  cy.url().then((url) => {
    const current_url = new URL(url);
    const protocol = current_url.protocol;
    const host = current_url.hostname;
    const activation_url = `${protocol}//${host}/activate-account-creation?key=${activation_key}`;
    cy.log(`[SELF SERV] Activating MyAccount: ${activation_url}`)
    cy.visit(activation_url).then(() => {
      cy.url().should('include', '/complete-account-creation');
      cy.get('div').contains('Thank you for validating your email address.').should('be.visible');
      
      // 所有表单操作移至此处，确保上下文正确
      cy.get('#title').select('Mr', { force: true })
      cy.get('#firstName').clear().type('Madhawa', { force: true })
      cy.get('#lastName').clear().type('Ratnayake', { force: true })
      cy.get('#telephoneNumber').clear().type('0713661579', { force: true })
      cy.get('#day').clear().type('27', { force: true })
      cy.get('#month').clear().type('05', { force: true })
      cy.get('#year').clear().type('1989', { force: true })

      cy.get('#postCode').clear().type('NN47YB', { force: true }).then(() => {
        cy.get('#findAddress').click().then(() => {
          cy.get('#dropDownListCompleteRegistration').select('Services', { force: true })
        })
      })
      cy.get('#activateForm').submit()
    })
  })
})

2. 调整Cypress安全配置 #

NS_BINDING_REDIRECTED常与重定向、跨域拦截相关，在cypress.config.js中添加以下配置：

module.exports = defineConfig({
  e2e: {
    chromeWebSecurity: false, // 禁用Chrome跨域安全策略
    modifyObstructiveCode: false, // 阻止Cypress修改页面代码
  },
})

3. 确保表单元素就绪 #

操作表单前添加断言，确认元素可交互：

cy.get('#title').should('be.enabled').select('Mr', { force: true })
cy.get('#firstName').should('be.enabled').clear().type('Madhawa', { force: true })
// 其余字段同理添加可交互断言

4. 确认页面重定向完成 #

在cy.visit后添加精确URL断言，确保页面重定向完成：

cy.visit(activation_url)
cy.url().should('eq', `${protocol}//${host}/complete-account-creation`)
cy.get('#activateForm').should('exist') // 确认表单已加载

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