Cypress中获取URL字符串用于后续命令失败问题排查

问题出在Cypress的异步执行特性：

• Cypress的命令（比如cy.url()）是异步加入执行队列的，不会阻塞同步代码的运行。
• 你的cy.log(schoolDistrictViewLink1)是同步代码，会在cy.url().then()的回调执行之前就运行，所以此时schoolDistrictViewLink1还没被赋值，自然是null。

正确的写法有这几种： #

1. 把依赖变量的代码放到then回调内 #

所有需要使用schoolDistrictViewLink1的操作都要在回调里执行，保证变量已经被赋值：

let schoolDistrictViewLink1 = null;
cy.url().then(($url) => {
  schoolDistrictViewLink1 = $url;
  cy.log($url); // 这里能拿到正确值
  cy.log(schoolDistrictViewLink1); // 这里也能拿到正确值
  // 其他需要用这个变量的代码都写在这里
});

2. 使用Cypress别名存储 #

如果需要在多个命令中复用这个URL，可以用as()存为别名，之后用cy.get()或者this.xxx（注意it块要使用普通函数，不能用箭头函数）获取：

cy.url().as('currentUrl');

// 后续使用时
cy.get('@currentUrl').then((url) => {
  cy.log(url);
  // 这里可以使用url变量做其他操作
});

// 或者在it块用普通函数的话：
it('获取并使用URL', function() {
  cy.url().as('currentUrl');
  cy.then(() => {
    cy.log(this.currentUrl);
  });
});

3. 使用async/await（Cypress 7.0+支持） #

给it块加上async，然后用await等待cy.url()的结果：

it('获取URL并赋值', async () => {
  const schoolDistrictViewLink1 = await cy.url();
  cy.log(schoolDistrictViewLink1); // 这里能拿到正确值
});

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