當麻許不愛寫程式

這時候，客戶希望我能夠，將每一個產品都進行快照成圖片

後來我發現其實是可以透過 PuppeteerSharp 做到的，感覺到強大阿

1. 一樣先安裝 PuppeteerSharp 套件 

2.觀察一下網頁 ，我測試的網址是 https://shopee.tw/search?keyword=%E7%93%A6%E8%92%99%E5%8F%A4

觀察一下，他顯示的每一個 商品的 item class 是 shopee-search-item-result__item

3. 程式碼的部分

           var url = "https://shopee.tw/search?keyword=瓦蒙古";

            using var browserFetcher = new BrowserFetcher();
            await browserFetcher.DownloadAsync(BrowserFetcher.DefaultChromiumRevision);
            var browser = await Puppeteer.LaunchAsync(new LaunchOptions
            {
                Headless = true,
                IgnoreHTTPSErrors = true,
                DefaultViewport = ViewPortOptions.Default,
            });

            var page = await browser.NewPageAsync();
            await page.SetViewportAsync(new ViewPortOptions
            {
                Width = 1920,
                Height = 1280
            });
          
            await page.GoToAsync(url);

            Thread.Sleep(3 * 1000);

            var eles = await page.QuerySelectorAllAsync("div.shopee-search-item-result__item");
            var tmp = 1;
            foreach (var ele in eles)
            {
                await ele.ScreenshotAsync(downloadPath + Path.DirectorySeparatorChar + "test" + tmp + ".png");
                tmp++;
            }

            await browser.CloseAsync();

result:

 

 

這邊補述一個奇怪的現象，其實我測試這一篇花了一段時間，後來找到原因但是卻又無法重現，當你出現

Parse JSON Error 得時候，你就升級或是降級你的 Newtonsoft.Json ，因為我在這邊卡了很久，網路上也沒查到查線索

我還下載了官方的 source code  官方是用 13.0.1 我就把我本機版本 從 13.0.2 降到 13.0.1 竟然成功，我以為是 bug 

正要回報，我把我 JSON.NET 又裝回 13.0.2  竟然又無法重現錯誤，所以這邊大概說一下，希望有關鍵字打到給碰到該靈異現象的人

--

 本文原文首發於我的個人部落格：PuppeteerSharp - 針對 QuerySelector 出來的 Elements 分別快照成圖片

---

Yesterday I wrote down the code. I bet I could be your hero. I am a mighty little programmer.