React项目中Jest+Puppeteer的waitForSelector无法识别DOM元素问题

针对你在React项目中使用Jest搭配Puppeteer做登录页面自动化测试时，waitForSelector无法识别已存在DOM元素的问题，可按以下步骤排查修复：

1. 确保页面完全加载（React Hydration完成） #

page.goto默认等待load事件，但React的客户端渲染（Hydration）可能在load之后才完成。修改visit方法，等待网络空闲并确认React根元素存在：

async visit() {
  await page.goto('http://localhost:3000/user/signin', {
    waitUntil: 'networkidle2' // 等待网络请求结束，适配SPA场景
  });
  // 等待React根元素加载完成（替换为你项目的根元素选择器）
  await page.waitForSelector('#root');
}

2. 修正Page类的实例引用 #

你的SignInPage直接使用全局page变量，可能存在实例未正确绑定的问题。修改BasePage和SignInPage，确保page实例被正确传递：

// BasePage.js
export default class BasePage {
  constructor(page) {
    this.page = page;
  }
}

// SignInPage.js
export default class SignInPage extends BasePage {
  constructor(page) {
    super(page);
  }

  async visit() {
    await this.page.goto('http://localhost:3000/user/signin', { waitUntil: 'networkidle2' });
  }

  async isSignInHeadingDisplayed() {
    await this.page.waitForSelector("#login-heading", { visible: true, timeout: 10000 });
  }
}

// 测试文件中初始化
beforeAll(async () => {
  // ...数据库操作
  signInPage = new SignInPage(page); // 传递Jest-Puppeteer的全局page实例
  generalNavbarPage = new GeneralNavbarPage(page);
  await signInPage.visit();
})

3. 强制等待元素可见 #

默认waitForSelector仅检查元素是否存在于DOM，若元素存在但被隐藏（如CSS覆盖、未渲染完成），需指定visible: true确保元素可见：

async isSignInHeadingDisplayed() {
  await this.page.waitForSelector("#login-heading", { 
    visible: true, 
    timeout: 10000 
  });
}

4. 排查页面导航/重定向问题 #

确认测试执行时页面未被意外重定向，可在visit方法中打印当前URL：

async visit() {
  await this.page.goto('http://localhost:3000/user/signin', { waitUntil: 'networkidle2' });
  console.log('当前页面URL:', await this.page.url()); // 验证是否停留在登录页
}

5. 添加调试定位问题 #

通过截图或打印页面HTML，直观确认元素是否存在：

async isSignInHeadingDisplayed() {
  // 生成页面截图，查看当前渲染状态
  await this.page.screenshot({ path: 'signin-debug.png' });
  // 打印页面完整HTML，检查目标元素是否存在
  const pageHtml = await this.page.content();
  console.log('页面HTML:', pageHtml);
  
  await this.page.waitForSelector("#login-heading", { visible: true, timeout: 10000 });
}

6. 优化Jest超时设置 #

将超时设置放在describe顶部，避免每个测试重复配置：

describe('Sign In', () => {
  jest.setTimeout(15000); // 全局设置测试超时时间
  
  // ...其余测试代码
})

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