Playwright无头模式获取OpenSea NFT报价数失败，有头模式正常

• OpenSea会识别无头浏览器的特征（比如默认user-agent），限制动态内容（如报价列表）的渲染或接口请求。
• 无头模式与有头模式的页面渲染时机、资源加载策略存在差异，导致报价列表未加载完成就执行了计数操作。
• 部分内容采用懒加载逻辑，无头模式下未触发加载条件（如滚动到可视区域）。

1. 模拟正常浏览器的User-Agent #

给无头浏览器设置与普通Chrome一致的user-agent，避免被识别为无头环境：

import { test, expect } from '@playwright/test';

test('count NFT offers', async ({ page }) => {
  // 设置正常Chrome的User-Agent
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36');
  
  await page.goto('https://opensea.io/assets/ethereum/0x63217dbb73e7a02c1d30f486e899ee66d0aa5e0b/6341');
  
  // 等待报价面板可见
  const offersPanel = page.locator("[id='Body offers-panel']");
  await offersPanel.waitFor({ state: 'visible' });
  
  // 滚动到面板区域，触发懒加载（如果有）
  await offersPanel.scrollIntoViewIfNeeded();
  
  // 等待列表项加载完成后计数
  const offersCount = await page.locator("[id='Body offers-panel'] li").count();
  console.log('Num of offers:', offersCount);
});

2. 等待关键API请求完成 #

如果报价数据通过接口加载，可直接等待对应请求完成后再执行计数：

import { test, expect } from '@playwright/test';

test('count NFT offers with request wait', async ({ page }) => {
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36');
  
  // 监听获取报价的API请求（URL可根据实际抓包结果调整）
  const offersRequest = page.waitForRequest(req => 
    req.url().includes('/api/v1/offers') && req.method() === 'GET'
  );
  
  await page.goto('https://opensea.io/assets/ethereum/0x63217dbb73e7a02c1d30f486e899ee66d0aa5e0b/6341');
  
  // 等待请求返回
  await offersRequest;
  
  const offersPanel = page.locator("[id='Body offers-panel']");
  await offersPanel.waitFor({ state: 'visible' });
  
  const offersCount = await page.locator("[id='Body offers-panel'] li").count();
  console.log('Num of offers:', offersCount);
});

3. 全局配置无头浏览器参数（可选） #

在playwright.config.js中统一配置，让所有无头测试更接近有头环境：

module.exports = {
  use: {
    headless: true,
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
    viewport: { width: 1920, height: 1080 },
    javaScriptEnabled: true,
  },
};

执行无头模式测试：

npx playwright test

若配置正确，控制台会输出正确的报价数量。

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