如何使用Cypress/JavaScript截取当前URL片段并提取链接中的ID

针对你要从localhost/survey/20?vbpCategoryId中提取20的需求，有两种简单的实现方式，我分别给你演示：

方法1：基于你现有代码修改 #

你原来的代码已经通过split('/')把URL拆分成了数组，现在只需要对数组的最后一项再做一次拆分，用问号?分割，取第一个元素就是你要的ID：

cy.url().then(URL => {
  const current_url_parts = URL.split('/');
  // 拿到最后一段，比如 "20?vbpCategoryId"
  const last_part = current_url_parts[current_url_parts.length - 1];
  // 用问号分割，取第一个元素
  const survey_id = last_part.split('?')[0];
  cy.log(survey_id); // 输出 20
  cy.wrap(survey_id).as('surveyId');
});

方法2：用原生URL API（更推荐） #

原生JavaScript的URL对象可以帮你更规范地解析URL的各个部分，不用手动拆分字符串，可读性和稳定性更好：

cy.url().then(URL => {
  const urlObj = new URL(URL);
  // 先获取路径名，比如 "/survey/20"
  const pathname = urlObj.pathname;
  // 拆分路径名，取最后一段
  const survey_id = pathname.split('/').pop();
  cy.log(survey_id); // 输出 20
  cy.wrap(survey_id).as('surveyId');
});

这种方法的好处是，不管URL后面的查询参数有多少，都不会影响ID的提取，非常可靠。

除了提取路径中的ID，日常测试中还经常需要截取URL的其他部分，这里给你整理几个常用场景：

• 获取查询参数：比如要拿到vbpCategoryId的值（如果有的话），可以用URL对象的searchParams：

  cy.url().then(URL => {
    const urlObj = new URL(URL);
    const categoryId = urlObj.searchParams.get('vbpCategoryId');
    cy.log(categoryId);
  });
  

• 用Cypress内置的cy.location()命令：Cypress提供了更便捷的cy.location()来获取URL的各个属性，不用手动解析：

  cy.location().then(location => {
    // 获取路径名
    cy.log(location.pathname); // 输出 "/survey/20"
    // 获取主机名
    cy.log(location.hostname); // 输出 "localhost"
    // 获取完整查询字符串
    cy.log(location.search); // 输出 "?vbpCategoryId"
  });
  

• 截取路径的某一段：比如要获取路径中的survey部分，可以拆分路径数组后指定索引：

  cy.location('pathname').then(pathname => {
    const pathParts = pathname.split('/');
    cy.log(pathParts[1]); // 输出 "survey"，注意数组第一个元素是空字符串，因为路径以/开头
  });
  

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