如何使用cy.request()命令获取meta标签与script标签内容？

核心问题解析 #

你遇到的问题根源是：getElementsByTagName('meta')返回的是原生DOM的HTMLCollection，而非jQuery对象，因此无法直接使用.each()方法遍历。下面是针对需求的具体实现方案：

1. 提取Meta标签的og:title内容 #

将HTMLCollection转换为数组后遍历，通过匹配property属性定位目标标签，再提取content值：

cy.request(apiHelper.makeGeneralRequestObject("au/booking-area/zone/blue/"))
  .then((response) => {
    const htmlString = response.body;
    const parser = new DOMParser();
    const parseHtml = parser.parseFromString(htmlString, 'text/html');
    
    // 提取og:title的content值
    const metaTags = Array.from(parseHtml.getElementsByTagName('meta'));
    const ogTitleMeta = metaTags.find(meta => meta.getAttribute('property') === 'og:title');
    if (ogTitleMeta) {
      const ogTitleContent = ogTitleMeta.getAttribute('content');
      console.log('og:title内容:', ogTitleContent);
      // 可添加断言验证：expect(ogTitleContent).to.equal('Blue zone booking area')
    }
  });

2. 提取Script标签的JSON-LD中headline内容 #

筛选type="application/ld+json"的script标签，解析其文本为JSON对象后提取目标属性：

cy.request(apiHelper.makeGeneralRequestObject("au/booking-area/zone/blue/"))
  .then((response) => {
    const htmlString = response.body;
    const parser = new DOMParser();
    const parseHtml = parser.parseFromString(htmlString, 'text/html');
    
    // 提取JSON-LD中的headline
    const scriptTags = Array.from(parseHtml.getElementsByTagName('script'));
    const jsonLdScript = scriptTags.find(script => script.getAttribute('type') === 'application/ld+json');
    if (jsonLdScript) {
      try {
        const jsonLdData = JSON.parse(jsonLdScript.innerText.trim());
        const headline = jsonLdData.headline;
        console.log('JSON-LD headline内容:', headline);
        // 可添加断言验证：expect(headline).to.equal('Parcel area for Blue Zone one')
      } catch (error) {
        console.error('解析JSON-LD失败:', error);
      }
    }
  });

完整合并代码 #

将两部分逻辑整合到同一个请求回调中：

cy.request(apiHelper.makeGeneralRequestObject("au/booking-area/zone/blue/"))
  .then((response) => {
    const htmlString = response.body;
    const parser = new DOMParser();
    const parseHtml = parser.parseFromString(htmlString, 'text/html');
    
    // 处理Meta标签
    const metaTags = Array.from(parseHtml.getElementsByTagName('meta'));
    const ogTitleMeta = metaTags.find(meta => meta.getAttribute('property') === 'og:title');
    if (ogTitleMeta) {
      const ogTitleContent = ogTitleMeta.getAttribute('content');
      console.log('og:title:', ogTitleContent);
      expect(ogTitleContent).to.equal('Blue zone booking area');
    }
    
    // 处理JSON-LD Script标签
    const scriptTags = Array.from(parseHtml.getElementsByTagName('script'));
    const jsonLdScript = scriptTags.find(script => script.getAttribute('type') === 'application/ld+json');
    if (jsonLdScript) {
      try {
        const jsonLdData = JSON.parse(jsonLdScript.innerText.trim());
        const headline = jsonLdData.headline;
        console.log('JSON-LD headline:', headline);
        expect(headline).to.equal('Parcel area for Blue Zone one');
      } catch (error) {
        console.error('JSON-LD解析错误:', error);
      }
    }
  });

关键注意事项 #

• 使用Array.from()将HTMLCollection转换为数组，才能使用find()、forEach()等数组方法遍历
• 解析JSON-LD时添加try-catch，避免因格式错误导致流程中断
• 所有操作基于原始HTML响应，完全模拟搜索引擎的SSR内容抓取逻辑，不会触发浏览器JS渲染

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