如何使用 Pupeetersharp 从元素中获取计算的样式属性

Question

我正在尝试使用 PuppeteerSharp 来获取元素的计算颜色属性。我已经看到几个使用 Puppeteer（不是 Sharp）的答案，表明 window.getComputedStyle() 可能是解决方案，但我无法使用 PuppeteerSharp 让它工作。

见：

• https://browsee.io/blog/puppeteer-how-to-check-visibility-of-an-element/
• Hover on element and getComputedStyle in Node.js using Puppeteer?

到目前为止，我的代码如下所示：

await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
using (browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = IsHeadless }))
{
    using (var page = await Program.browser.NewPageAsync())
    {
        var jsCode = @"async() => {
        const element = document.querySelector('.productDetail svg[viewbox=""0 0 16 16""]');
        return window.getComputedStyle(element).getPropertyValue('color')};
        ;}";

        await page.GoToAsync("https://www.galaxus.ch/fr/s3/product/horizon-fitness-syros-e-velos-elliptiques-13874309");
        var results = await page.EvaluateFunctionAsync<string>(jsCode);
     }
}

任何帮助将不胜感激！

Answer 1

我在您的代码中发现了一些问题。首先是您的 javascript 代码中的一些小错误：您不需要异步和额外的括号。

var jsCode = @"() => {
  const element = document.querySelector('.productDetail svg[viewbox=""0 0 16 16""]');
  return window.getComputedStyle(element).getPropertyValue('color');
}";