Cypress全局变量未更新致cy.type()空字符串报错问题求助

你遇到的报错是因为Cypress命令的异步特性：cy.request是异步执行的，当你调用WebApiRequests.makeRequest后立刻执行QueryingPage.inputNameObject().type(text)时，接口请求还没完成，text仍然是初始的空字符串，所以触发cy.type()的空值报错。

核心是确保在接口请求完成并拿到返回值后，再执行输入操作，以下是几种可行的实现方式：

方法1：让请求方法返回值，通过链式.then()处理 #

修改WebApiRequests的makeRequest方法，让它返回接口请求的结果，然后在测试用例中通过.then()获取返回值再执行输入：

const WebApiRequests = {
  url : 'https://api.jsonbin.io/v3/b/62e129e3248d43754f074152',
    
  makeRequest : function(method, url, body) {
    // 返回cy.request的Promise，支持链式调用
    return cy.request({
      method: method,
      url: url,
      body: body
    }).then((response) => {
      return response.body['record'][0]['team']; // 返回需要的字段值
    });
  }
}

const QueryingPage = {
  inputNameObject : function(){
    return cy.get('#inputName');
  }
}

describe('Navigate to Querying page', () => {
  it('Visits the Cypress website and clicks on the Querying menu', () => {
    cy.visit('https://example.cypress.io/commands/querying');
    WebApiRequests.makeRequest('GET', WebApiRequests.url, '')
      .then((teamText) => {
        // 拿到接口返回值后再执行输入
        QueryingPage.inputNameObject().type(teamText);
      });
  })
})

方法2：在请求回调中直接执行输入操作 #

不需要全局变量，直接在cy.request的.then()回调里获取值并完成输入，天然保证执行顺序：

const WebApiRequests = {
  url : 'https://api.jsonbin.io/v3/b/62e129e3248d43754f074152',
    
  makeRequestAndFillInput : function(method, url, body) {
    cy.request({
      method: method,
      url: url,
      body: body
    }).then((response) => {
      const text = response.body['record'][0]['team'];
      QueryingPage.inputNameObject().type(text);
    });
  }
}

const QueryingPage = {
  inputNameObject : function(){
    return cy.get('#inputName');
  }
}

describe('Navigate to Querying page', () => {
  it('Visits the Cypress website and clicks on the Querying menu', () => {
    cy.visit('https://example.cypress.io/commands/querying');
    WebApiRequests.makeRequestAndFillInput('GET', WebApiRequests.url, '');
  })
})

方法3：使用Cypress环境变量存储值 #

如果需要在多个地方复用该值，可以将其存入Cypress环境变量，同样通过.then()保证顺序：

const WebApiRequests = {
  url : 'https://api.jsonbin.io/v3/b/62e129e3248d43754f074152',
    
  makeRequest : function(method, url, body) {
    return cy.request({
      method: method,
      url: url,
      body: body
    }).then((response) => {
      // 将值存入环境变量
      Cypress.env('teamText', response.body['record'][0]['team']);
    });
  }
}

const QueryingPage = {
  inputNameObject : function(){
    return cy.get('#inputName');
  }
}

describe('Navigate to Querying page', () => {
  it('Visits the Cypress website and clicks on the Querying menu', () => {
    cy.visit('https://example.cypress.io/commands/querying');
    WebApiRequests.makeRequest('GET', WebApiRequests.url, '')
      .then(() => {
        // 从环境变量取值并执行输入
        QueryingPage.inputNameObject().type(Cypress.env('teamText'));
      });
  })
})

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