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

Question

I am trying to use PuppeteerSharp to get the computed color property of an element. I have seen several answers using Pupeeteer (not Sharp) indicating that window.getComputedStyle() might be the solution but I can't get it to work using PuppeteerSharp.

See :

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

So far my code looks like this :

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);
     }
}

Any help would be appreciated !

Answer 1

I found a few issues in your code. First a few small errors in your javascript code: you don't need to async and an extra brackets.

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