Cypress访问TikTok标签页视频无法加载的问题求助

我之前也碰到过类似的TikTok页面自动化加载问题，结合你描述的情况（页面停留在加载状态，video-feed为空但显示feed-loading），咱们从几个方向来排查解决：

1. 拦截并等待视频数据的API请求 #

TikTok的视频流完全依赖异步API加载，Cypress直接访问页面后可能还没等数据返回就结束了检查。你可以用cy.intercept()捕获视频列表的请求，确保数据加载完成后再验证：

describe('tags', () => {
  it.only('loads TikTok cat videos successfully', () => {
    // 拦截TikTok的视频列表API（路径需要抓包确认，可能会有变动）
    cy.intercept('GET', '/api/post/item_list/**').as('loadVideoFeed');
    
    cy.visit('https://www.tiktok.com/tag/cats?lang=en');
    
    // 等待API请求完成，超时时间放宽到10秒应对网络延迟
    cy.wait('@loadVideoFeed', { timeout: 10000 });
    
    // 验证视频容器已加载内容
    cy.get('.video-feed').should('not.be.empty');
    // 更精准的验证：检查是否有视频卡片元素
    cy.get('.video-feed').should('have.descendants', '[data-e2e="video-card"]');
  });
});

提示：如果不确定API路径，可以打开Chrome开发者工具的「网络」标签，刷新TikTok页面，筛选XHR/fetch请求，找到返回视频列表的那个API（通常包含item_list或feed关键词）。

2. 绕过TikTok的自动化检测 #

TikTok会检测页面是否由自动化工具（比如Cypress）访问，通过一些浏览器特征判断。你可以在Cypress配置中添加Chrome启动参数，隐藏自动化标识：

在cypress.config.js中修改配置：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          // 隐藏自动化工具标识，避免被TikTok检测
          launchOptions.args.push('--disable-blink-features=AutomationControlled');
          // 配合已关闭的webSecurity，添加额外参数
          launchOptions.args.push('--allow-running-insecure-content');
          return launchOptions;
        }
      });
    },
    chromeWebSecurity: false,
  },
});

3. 处理Cookie和会话存储 #

TikTok可能依赖Cookie或LocalStorage维持会话状态，Cypress默认会在测试前清除这些数据，导致页面无法正常加载内容。你可以配置保留必要的Cookie：

describe('tags', () => {
  beforeEach(() => {
    // 保留所有Cookie，避免会话丢失
    Cypress.Cookies.defaults({
      preserve: (cookie) => true,
    });
  });

  it.only('loads TikTok cat videos', () => {
    cy.intercept('GET', '/api/post/item_list/**').as('loadVideoFeed');
    cy.visit('https://www.tiktok.com/tag/cats?lang=en');
    cy.wait('@loadVideoFeed');
    cy.get('.video-feed').should('have.descendants', '[data-e2e="video-card"]');
  });
});

4. 模拟真实用户的滚动行为 #

TikTok的无限滚动机制，初始加载可能需要触发滚动才会加载更多内容。你可以添加滚动操作来触发视频加载：

cy.visit('https://www.tiktok.com/tag/cats?lang=en');
// 先等待页面框架加载完成
cy.wait(2000);
// 模拟滚动到底部，触发视频加载
cy.scrollTo('bottom', { duration: 1000 });
// 等待API请求完成
cy.wait('@loadVideoFeed');

先从拦截API和添加浏览器参数这两步开始尝试，这两个是最常见的解决这类问题的方法。如果还是不行，可以检查Cypress版本是否为最新，或者尝试用Electron浏览器运行测试看看是否有同样的问题。

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