使用AngleSharp爬取页面时QuerySelectorAll返回空的问题排查

我用C# .NET 8结合AngleSharp库爬取某网站新闻稿，目标是获取带search-result类的<a>标签，但执行代码后document.QuerySelectorAll(".search-result")获取到的元素长度始终为0。

目标HTML示例 #

<a class="search-result ng-scope" ng-repeat="result in sc.searchResults" style="margin: 15px 0px 0px; background: rgb(255, 255, 255);" href="https://www.xxxxxxx.ie/News/report-projects-600">
  <span style="text-transform:capitalize;color:#006784;font-weight:700;" class="ng-binding">press releases&nbsp; &nbsp;|&nbsp;&nbsp;</span>
  <span style="text-transform:capitalize;color: #36424a;" class="ng-binding">Friday 8 Mar 2024</span>
  <h3 class="ng-binding">report projects 600</h3>
</a>

<a ng-href="https://www.xxxxxx.ie/News/council-nominations" class="search-result ng-scope" ng-repeat="result in sc.searchResults" style="margin:15px 0 0 0;background: #FFFFFF;" href="https://www.xxxxxxx.ie/News/council-nominations">
  <span style="text-transform:capitalize;color:#006784;font-weight:700;" class="ng-binding">press releases&nbsp; &nbsp;|&nbsp;&nbsp;</span>
  <span style="text-transform:capitalize;color: #36424a;" class="ng-binding">Friday 8 Mar 2024</span>
  <h3 class="ng-binding">Council Nominations</h3>
</a>

我的C#代码 #

var config = AngleSharp.Configuration.Default.WithDefaultLoader();
var context = BrowsingContext.New(config);
var document = await context.OpenAsync("https://www.xxxxxxx.ie/News/NewsFilter/search?resource=339&resources=200");

var elements = document.QuerySelectorAll(".search-result");
if (elements != null)
{
    // Extract the data you need 
}

• 页面内容是AngularJS动态渲染的
  从HTML里的ng-repeat、ng-scope标记能看出，这个页面用了AngularJS，新闻数据是通过JavaScript动态加载的。AngleSharp默认只会抓取静态HTML，不会执行JS，所以拿不到动态生成的内容。
  解决：启用AngleSharp的JavaScript支持，先安装AngleSharp.JavaScript NuGet包，再修改配置：

  var config = AngleSharp.Configuration.Default
      .WithDefaultLoader()
      .WithJavaScript(); // 开启JS执行
  var context = BrowsingContext.New(config);
  var document = await context.OpenAsync("https://www.xxxxxxx.ie/News/NewsFilter/search?resource=339&resources=200");
  

• 请求头模拟不完整被网站拦截
  部分网站会检查请求头（比如User-Agent），识别到爬虫就返回空内容。可以添加自定义请求头：

  var config = AngleSharp.Configuration.Default
      .WithDefaultLoader(new LoaderOptions
      {
          Headers = new Dictionary<string, string>
          {
              { "User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36" }
          }
      })
      .WithJavaScript();
  

• 动态内容加载需要等待时间
  即使开了JS，动态内容也可能需要几秒加载。可以设置超时或等待目标元素：

  // 设置加载超时为5秒
  var config = AngleSharp.Configuration.Default
      .WithDefaultLoader(new LoaderOptions
      {
          Timeout = 5000,
          Headers = new Dictionary<string, string>
          {
              { "User-Agent", "你的User-Agent" }
          }
      })
      .WithJavaScript();
  

  或者等待元素出现后再抓取：

  await document.WaitForSelectorAsync(".search-result");
  var elements = document.QuerySelectorAll(".search-result");
  

• 确认请求URL的静态内容是否包含目标元素
  直接在浏览器打开请求的URL，查看页面源代码（不是开发者工具里的渲染后DOM），如果静态HTML里没有.search-result元素，那就肯定是动态加载的，必须启用JS。

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