使用jest和puppeteer做自动化测试，登录后无法识别页面locators怎么办

• 未正确等待页面跳转/元素加载完成
  登录操作触发后如果直接执行元素定位，此时跳转页面尚未加载完成，自然无法识别元素。注意以下两种场景的处理：

  1. 全页重载跳转场景：需要将点击登录操作和等待导航并行触发，避免错过导航监听时机，示例代码：

  await Promise.all([
    page.click('#login-submit'), // 点击登录按钮的操作
    page.waitForNavigation({ waitUntil: 'networkidle2' }) // 等待页面跳转完成，networkidle2表示网络连接数少于2时判定加载完成
  ])
  

  2. 所有场景通用：定位元素前先等待目标元素加载，示例代码：

  // 等待目标元素出现，最长等待10秒
  await page.waitForSelector('#target-element', { timeout: 10000 })
  

• 跳转后上下文切换遗漏
  两种常见的上下文切换场景容易被忽略：

  1. 登录成功后新开标签页：此时原page对象仍然指向旧的登录页，需要监听新标签页事件获取新的页面实例再操作，示例代码：

  const [newPage] = await Promise.all([
    new Promise(resolve => browser.once('targetcreated', target => target.type() === 'page' && resolve(target.page()))),
    page.click('#login-submit')
  ])
  // 后续使用newPage对象操作新页面元素
  

  2. 目标元素位于iframe内：puppeteer默认上下文为顶层页面，无法直接定位iframe内元素，需要先切换到iframe上下文，示例代码：

  const iframeEle = await newPage.$('#content-iframe')
  const iframeCtx = await iframeEle.contentFrame()
  await iframeCtx.waitForSelector('#target-in-iframe')
  

• SPA前端路由跳转适配问题
  如果你的项目是单页应用，登录后的跳转属于前端路由切换，不会触发全页重载，此时page.waitForNavigation()会因为监听不到导航事件超时，无需调用该方法，直接等待目标页的特征元素/URL变更即可：

  // 等待URL跳转到目标路径
  await page.waitForFunction(() => window.location.pathname === '/dashboard')
  // 再执行元素定位
  

• 跨域/隔离策略限制
  如果登录前后页面跨域，puppeteer默认的安全策略可能会阻止上下文访问，启动浏览器时添加相关参数关闭限制即可：

  const browser = await puppeteer.launch({
    args: [
      '--disable-web-security',
      '--disable-features=IsolateOrigins,site-per-process'
    ]
  })
  

• 登录态未实际生效
  可以先打印跳转后的页面内容确认是否真的进入了目标页，避免登录请求被拦截、校验失败等情况导致实际停留在错误页/登录页：

  console.log(await page.content()) // 输出当前页面完整HTML
  console.log(await page.cookies()) // 确认登录态cookie是否写入
  

• 选择器本身有效性问题
  现代前端框架常使用动态生成的类名、id作为样式标识，写死的选择器很容易失效，建议前端开发配合在待测试元素上添加data-testid自定义属性，使用该属性定位稳定性更高，示例：

  await page.waitForSelector('[data-testid="dashboard-card"]')
  

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