ลองใช้ Headless Chrome ทำ ScreenShot

เรื่องก็มีอยู่ว่า Project นึง คนส่วนใหญ่ไม่ค่อยยอมทำ Test บางทีบอกว่า Coverage Report มันเปิดยาก / ตัวเค้าเองไม่รู้ว่าตอนนี้ Coverage มันลดลง แล้วต้องมาทำ Test เพิ่ม เป็นต้น ผมเลยมีไอเดียเลยว่าเดี๋ยวจะส่งตัว Report Coverage Summary ไปให้ โดยตอนนี้ใช้ Tools reportgenerator.io หลังจากที่มัน Generate เสร็จแล้ว มันจะได้ HTML Report หน้าตาสวยงามครับ ตามรูป

จากหน้าตานี้แหละ ผมได้มี Idea ว่าจะหาทาง Capture Coverage Status ตอนนี้ แล้วส่งเข้า Line Notify ครับ แล้วทีนี้การ Capture ดูมา 2 วิธีครับ

  • แบบแรก PowerShell แต่ลองไปแล้ว มันไม่ค่อย Work เท่าไหร่ครับ โดย Script จะประมาณนี้ครับ มันยาวด้วย อนาคตน่าจะดูแลลำบาก และบางทีมันไปได้ หน้าจอที่เราไม่ต้องการมาด้วย
Add-Type -AssemblyName System.Windows.Forms,
                       System.Drawing 
Start-Process -FilePath 'msedge' -ArgumentList '-inprivate', 'http://128.1.0.x6:8888/netcoverage/9.9.9.9/' -Wait

$screens=[Windows.Forms.Screen]::PrimaryScreen
$top=($screens.Bounds.Top|Measure-Object -Minimum).Minimum
$left=($screens.Bounds.Left|Measure-Object -Minimum).Minimum
$width=($screens.Bounds.Right|Measure-Object -Maximum).Maximum
$height=($screens.Bounds.Bottom|Measure-Object -Maximum).Maximum
$bounds=[Drawing.Rectangle]::FromLTRB($left, $top, $width, $height)
$bmp=New-Object System.Drawing.Bitmap ([int]$bounds.width), ([int]$bounds.height)

$graphics=[Drawing.Graphics]::FromImage($bmp)

$graphics.CopyFromScreen($bounds.Location, [Drawing.Point]::Empty, $bounds.size)
$bmp.Save("D:\tmp\testCoverage.png")
$graphics.Dispose()
$bmp.Dispose()
  • แบบถัดมา หลังลอง Research ไปสักพัก ตัว Google Chrome มันมี headless mode ที่เราสามารถให้มัน run ผ่านตัว command line ได้เลยครับ แล้ว Code น่าจะน้อยกว่า Powershell Script ข้างต้นครับ

ลองใช้ Chrome Headless ทำ Screenshot

จากที่เกริ่นไปแล้ว ตัว Google Chrome มี headless mode ทำให้เราเรียกผ่านเว็บ จาก command line ได้เลย โดยมี option ที่สำหรับทำ Screenshot

  • --headless บอกให้ chrome ทำงาน headless mode ไม่ต้องเปิด UI ขึ้นมา
  • --disable-gpu Temporarily needed if running on Windows. //ถ้าเป็น Linux ไม่จำเป็นต้องใส่ครับ
  • --hide-scrollbars
  • --window-size="1440,1024" กำหนดขนาดหน้าจอ อันนี้แล้วแต่ Device เลยครับ
  • --virtual-time-budget - หน่วงเวลาไว้เท่าไหร่ หน่วยเป็น milisecond ถ้า 5 วินาที จะเป็น 5000 ครับ
  • --screenshot บอก Path ที่เก็บภาพเว็บของเราครับ
  • <URL> ใส่ URL ที่ต้องการให้ Chrome headless เปิดขึ้นมาครับ

ลองเรียกใช้งานดูครับ

cd "C:\\Program Files\\Google\\Chrome\\Application"

.\\chrome.exe --headless --disable-gpu --hide-scrollbars --window-size="1440,1024" --virtual-time-budget=2000 --screenshot="D:\\tmp\\testCoverage.png" "http://128.1.0.x6:8888/netcoverage/9.9.9.9/" 2> \$null

ทำให้เป็น PowerShell นิดนึง

$ERROR.Clear();
$ArgumentList= @(
  '--headless',
  '--disable-gpu', 
  '--hide-scrollbars',
  '--window-size=1440,1024',
  '--virtual-time-budget=2000',
  '--screenshot=D:\tmp\testCoverage.png',
  'http://128.1.0.x6:8888/netcoverage/9.9.9.9/'
);
Start-Process 'C:\Program Files\Google\Chrome\Application\chrome.exe' -ArgumentList $ArgumentList -Wait;
$ERROR[0]

ผลลัพธ์ที่ได้ จากนั้น Script ทีข้างต้น ไปใส่ใน CI Tools อย่าง GitLab / Jenkins ได้เลยครับ

นอกจากทำ Screen Shot แล้ว ตัว Chrome headless มันยังมี Option อื่นๆอีกครับ อาทิ เช่น

  • serialized DOM ( --dump-dom )
  • saves the target page as a PDF (--print-to-pdf)
  • remote debugging (--remote-debugging-port=9222)
  • เอามาใช้กับ Puppeteer เขียน Code ทำ Web Automate Testing ครับ

แล้วตัว headless ตัว Project แม่ของ Chrome อย่างตัว Chromium มีด้วยนะครับ แสดงว่าตัว Browser ที่ fork มาจาก Chromium อย่าง MS Edge น่าจะทำได้ด้วยครับ

Reference

Discover more from naiwaen@DebuggingSoft

Subscribe to get the latest posts to your email.

Tags

Related Posts