Puppeteer เป็น Node library ที่มีชุดของ API สำหรับการควบคุม Google Chrome หรือ Chromium ผ่าน DevTool protocol ทำงานในรูปแบบ headless โดย default แต่สามารถกำหนดให้ทำงานแบบ full (non-headless) Chrome ได้  ที่สำคัญไม่ต้องทำงานผ่าน Web Driver อีกต่อไป puppeteer สามารถทำงานได้ทุกอย่างที่สามารถทำได้โดย manual บน browser เช่น สร้าง screenshots และ PDFs ของ page Automate form submission UI testing keyboard input การติดตั้ง Puppeteer การติดตั้ง Puppeteer เพื่อใช้งานใน project สามารถทำได้ผ่านทาง NPM โดยใช้คำสั่ง npm i puppeteer เมื่อทำการติดตั้ง Puppeteer จะทำการ downloads Chromium version ล่าสุดซึ่งสามารถทำงานร่วมกับ api ได้อย่างสมบูรณ์ (ประมาณ 170 Mb สำหรับ Mac, 282 Mb สำหรับ Linux และ 280 Mb สำหรับ Windows) ถ้าไม่ต้องการ download Chromium ในระหว่างการติดตั้ง สามารถยกเลิกได้โดยการกำหนดค่า “PUPPETEER_SKIP_CHROMIUM_DOWNLOAD”  environment variables การใช้งาน Puppeteer Puppeteer API ให้ความสามารถในการสร้าง instance ของ  browser, เปิด webpage และบันทึก screenshot โดยสร้าง file ชื่อ example.js และเขียน code ดังนี้ เรียกใช้งาน script  บน command line โดยใช้คำสั่ง node example.js Puppeteer กำหนด default ขนาดของ page ที่ 800 x 600px  และสามารถเปลี่ยน page size โดยใช้ page.setViewport() ซึ่งสามารถศึกษาเพิ่มเติมการใช้งาน Puppeteer API ได้ที่ https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md ผลของการ run script  จะทำการบันทึก screenshot ของ https://example.com ไปที่ file “example.png” จะเห็นว่าในระหว่างการ run script ไม่ได้ปรากฎ browser ขึ้นมาให้เห็น เนื่องจากโดยค่า default จะทำงานเป็น headless mode แต่สามารถเปลี่ยนการทำงานได้โดยกำหนด headless = false หากต้องการดูการทำงาน const browser = await puppeteer.launch({ headless: true }); // default is true   อ้างอิง https://github.com/GoogleChrome/puppeteer/

จากบทความ Visual test automation ที่ได้กล่าวถึง Appraise ที่ใช้สำหรับทำการทดสอบการแสดงผลแบบอัตโนมัติในเบื้องต้น ตั้งแต่การติดตั้ง ตัวอย่าง test page, test fixture การเรียกใช้งานการทดสอบ และผลการทดสอบ บทความนี้จะมาลงรายละเอียดในการสร้าง test page Creating test pages Appraise สามารถกำหนดรูปแบบข้อกำหนดการทดสอบสำหรับการทดสอบส่วนแสดงผลได้ไม่ยุ่งยาก โดย Appraise จะทำการอ่านข้อมูลนำเข้า และ ผลลัพธ์ที่คาดหวัง จาก file ที่เขียนในรูปแบบ Markdown แล้วส่งต่อให้กับระบบทำการทดสอบ จากนั้นจะบันทึกภาพการแสดงผลที่เกิดขึ้น เปรียบเทียบภาพการแสดงผลที่ได้จริงกับผลลัพธ์ที่คาดหวัง โดยมีสิ่งที่จำเป็นที่จะต้องกำหนดสำหรับการทดสอบ 3 ส่วน คือ input expect output fixture Input (parameters ของ example) input parameters อยู่ในรูปแบบ text JSON หรือ YAML  ในการกำนด input parameters สำหรับแต่ละการทดสอบหรือ example จะต้องกำหนด block ของ example และกำหนดชื่อให้กับ example ในส่วนเริ่มต้น block ในรูปแบบ example=”ชื่อ” จากรูปข้างต้น จะเห็นว่ามี example ชื่อ “first” ถูกกำหนดรูปแบบเป็น YAML ซึ่ง Appraise จะรู้ว่าจะนำข้อมูลไปได้อย่างไร ในแต่ละ test page สามารถมี eaxmple ได้มากกว่าหนึ่ง example โดยที่แต่ละ example จะต้องมีชื่อที่ไม่ซ้ำกัน ซึ่งจำเป็นในการใช้สำหรับเปรียบเทียบกับผลลัพธ์ที่คาดหวังด้วย Expect output ecpect output – ผลลัพธ์ที่คาดหวัง ซึ่งอยู่ในรูปแบบ file รูปภาพ .png  การกำหนดผลลัพธ์ที่คาดหวังใน test page ทำได้โดยระบุ  ซึ่งจะอยู่ส่วนใดๆใน test page ก็ได้ ไม่ว่าจะอยู่ก่อน example input ก็ได้ โดยที่ความเชื่อมโยงระหว่าง input กับ expect output ก็คือชื่อของ example ที่กำหนดใน [] ในการสร้าง test page อาจจะไม่ต้องกำหนด expect output ก่อนก็ได้เช่นกัน เมื่อทำการ run test ครั้งแรก ผลที่ออกมาจะ failed เนื่องจากไม่ได้ระบุ expect output แต่สามารถที่จะบันทึกผลที่ได้จากการ run test ใช้เป็น expect output สำหรับการ run test ครั้งต่อไปได้ Fixture fixture คือส่วนของ code ที่ Apprise ใช้ในการเชื่อมต่อกับระบบที่จะทดสอบ รวมทั้งกำหนดการใช้งานและการประมวลผล input ในการทดสอบ โดยทั่วไป examples ที่เชื่อมโยงกันจะใช้ fixture เดียวกัน การกำหนด fixture ทำโดยการระบุ fixture =”ชื่อ fixture” ในส่วนของ header ของ example block จากรูปข้างต้น จะเห็นว่ามี example ชื่อ “first” มีการกำหนด fixture คือ “hello.js” จากตัวอย่าง fixture ด้านบน เป็น fixture ที่มีการสร้าง output page ออกมาโดยตรงโดยไม่ได้เชื่อมต่อกับระบบใดๆ ซึ่งในการใช้งานจริง จะต้องเชื่อมต่อกับระบบหรือส่วนที่จะทำการทดสอบจริงที่ทำการ render ผลลัพธ์ออกมา input

ในการพัฒนา software นั้น เรื่อง Look and Feel เป็นสิ่งที่สำคัญมาก ๆ software ที่ทำงานได้ดียังไม่พอ ต้องดูดีสวยงามและใช้งานง่ายอีกด้วย คำถามที่น่าสนใจคือ จะทำการทดสอบในส่วนของการแสดงผลอย่างไรบ้าง โดยปกติในการทำการทดสอบการแสดงผล จะใช้คนเป็นผู้ทดสอบ มานั่งดู มาใช้งาน แล้วพิจารณาและตัดสินว่า ถูกหรือไม่ ทำให้ต้องใช้เวลาและกำลังคนในการทดสอบค่อยข้างมาก เพราะว่าในส่วนของการแสดงผลนั้นมันยากมาก ๆ สำหรับการทดสอบ มีหลายสิ่งอย่างให้พิจารณา ยกตัวอย่างเช่น ในแต่ละ element แต่ละส่วนงานทำงานและแสดงผลได้อย่างถูกต้องแต่เมื่อนำมารวมกัน กลับทำงานไม่ถูกต้อง หรือ แสดงผลผิดพลาด การลดเวลาและต้นทุนในการทดสอบลงโดยใช้การทดสอบแบบอัตโนมัติ เป็นสิ่งจำเป็น และต้องมีเครื่องมือช่วย ในบทความนี้ขอแนะนำ Appraise ซึ่ง Appraise นั้นได้นำแนวทางของ Specification by Example มาใช้ นั่นหมายความว่า ในแต่ละ test case ต้องมี concrete example ที่ชัดเจน นำ test case เหล่านี้ไปทดสอบแบบอัตโนมัติ ทำการทดสอบด้วย Google Chrome Headless ซึ่งจะทำการ snapshot ส่วนที่ต้องการเป็นรูปภาพและเปรียบเทียบกับผลที่คาดหวังหรือไม่ ถ้าผลออกมาไม่ตรงกับที่คาดหวัง Appraise จะแสดงผลที่แตกต่างออกมาให้เห็น จากนั้นจะให้คนมา approve ว่าผลที่แตกต่างถูกหรือไม่ต่อไป ถ้าทำการยอมรับความแตกต่างก็จะบันทึกผลใหม่ให้ทันที ซึ่งง่ายต่อการดูแลรักษา test case อย่างมาก เริ่มต้นการใช้งาน Appraise ทำการติดตั้ง Appraise ด้วย NPM npm install appraise -g จะทำการติดตั้ง Appraise เป็น global command line uitlity อย่างไรก็ตาม สามารถติตั้งเป็นแบบ NPM package dependency โดยใช้ NPM script เรียกใช้ commamd line ก็ได้เช่นกัน สร้าง test page เริ่มต้นสร้าง folder “examples” เป็นที่เก็บ test page  (default folder สำหรับเก็บ test page ของ Appraise คือ “examples”)  Appraise ใช้  Github-flavoured Markdown syntax  ในการประมวลผล test page สร้าง file : hello-world.md ใน folder “examples” และเพิ่มข้อความดังนี้ This paragraph is just an intro, it will be ignored for testing ~~~yaml example=”first” fixture=”hello.js” color: blue ~~~ สร้าง test fixture test fixture ใช้สำหรับ Appraise สำหรับประมวลผล example ไปเป็น test result โดยสร้าง file : hello.js ใน folder “examples”และเพิ่ม code ดังนี้ ทำการ run ทดสอบ ทดสอบโดยใช้คำสั่ง appraise run ซึ่งจะได้ผลดังนี้ Appraise บันทึกผลการทดสอบไว้ใน folder “results” ซึ่งได้ผลการทดสอบ file : result/hello-world.htm ดังนี้ จะเห็นได้ว่าผลการทดสอบ failed เนื่องจาก test case นี้ยังไม่ได้กำหนด expected result หรือผลที่คาดหวัง อย่างไรก็ตาม ถ้าพิจารณาผลการทำงานว่าใช้ได้ Appraise มีทางเลือกให้สามารถ capture ผลเพื่อใช้ในการทดสอบครั้งต่อไป โดยทำการ approve ผลการทำงานนี้ก่อนเพื่อทำการยอมรับผลนี้ ด้วยคำสั่ง appraise approve –page “hello-world” Appraise จะทำการบันทึกผลเป็นรูปภาพลงใน 

ในการพัฒนา application ในปัจจุบันที่มีความเปลี่ยนแปลงอย่างรวดเร็ว ปัญหาที่จะพบตามมาด้วยก็คือ bug ของตัวระบบอันเนื่องมาจากความเร่งรีบในการพัฒนา ซึ่งการที่จะลด bug ที่อาจจะเกิดขึ้นก็จำเป็นที่จะต้องมีการทดสอบ (testing) ในส่วนต่างๆทั้งหมดเพื่อหาความผิดพลาด หรือผลกระทบที่เกิดขึ้นจากการเปลี่ยนแปลง เพิ่มเติม code ใหม่ๆ เข้าสู่ระบบหรือ application การทำ testing ส่วนต่างๆซ้ำทั้งหมดเพื่อหาความผิดพลาดที่เกิดขึ้นจากการเปลี่ยนแปลง เพิ่มเติม code ใหม่ๆ ต้องใช้เวลาค่อนข้างมาก อาจจะทำให้ผู้พัฒนาเลือกที่จะทำการ testing เฉพาะส่วน และนั่นอาจนำมาซึ่ง bug ที่เกิดจากส่วนอื่นๆที่ไม่ได้ทดสอบ การทำการทดสอบแบบอัตโนมัติทำให้สามารถลดเวลาใน testing ลงแต่ยังคงไว้ซึ่งการทดสอบ ส่วนต่างๆทั้งหมด สิ่งจำเป็นที่ควรจะรู้ในการทำ automation test คือการเขียนชุดทดสอบโดยเฉพาะ unit test ที่ดี แต่ละ test case ต้องทำงานได้รวดเร็ว แต่ละ test case มีความเป็นอิสระแก่กัน นั่นคือแต่ละ test case จะไม่เกี่ยวข้องกัน ทำให้สามารถทดสอบแบบสุ่มและแบบขนานได้ แต่สิ่งที่พบเจอเป็นประจำคือ ผลจาก test case ที่ 1 เป็น input ของ test case ที่ 2 แล้วผลจาก test case ที่ 2 เป็น input ของ test case ที่ 3 และ …. ซึ่งถ้าเป็นแบบนี้หมายความว่าแต่ละ test case ผูกมัดกันไปหมด และต้องทำงานแบบเรียงลำดับกันด้วย อีกสิ่งหนึ่งที่สำคัญคือ แต่ละ test case จะต้องไม่มีการทำงานร่วมกับระบบ Network และ Database ใด ๆ ทั้งสิ้น และใช้ Mock หรือ Fake ทำการควบคุมสิ่งที่ควบคุมไม่ได้ ทำให้สามารถเขียน test case ได้ดีขึ้น เนื่องจากการทำงานกับ Network และ Database อาจเกิดเหตุการณ์ที่ไม่สามารถควบคุมได้ทำให้ ผลของการทดสอบผิดพลาด ซึ่งแต่ละ test case ต้องสามารถทำงานซ้ำ ๆ และควรได้ผลเหมือนเดิมทุกครั้ง ไม่ใช่ทำงานผ่านบ้างไม่ผ่านบ้าง ไม่มีความน่าเชื่อถือ สุดท้ายก็จะเลิกใช้ เลิกทำและกลับไปทำแบบเดิมก่อนหน้านี้ โครงสร้างของชุดการทดสอบต้องดีด้วย เริ่มตั้งแต่ชื่อของ test case ต้องสื่อถึงสิ่งที่ต้องการจะทดสอบ ทั้ง input และ expected result ชื่อยาวไม่มีปัญหากับเรื่องของ performance ว่าจะช้าเนื่องจากมันอยู่ในส่วนของการทดสอบไม่ใช่ระบบงานจริง โครงสร้างหลัก ๆ ของแต่ละ test case ควรประกอบไปด้วย การกำหนดหรือจัดการค่าเริ่มต้นที่ต้องการ, การกระทำที่ต้องการทดสอบ และ ตรวจสอบผลการทำงานว่าเป็นไปตามที่คาดหวังหรือไม่ อย่าลืมว่าชุดการทดสอบ มันคือเอกสารชนิดหนึ่งที่ใช้อธิบายการทำงานภายในของระบบ ทั้ง class และ function ต่าง ๆ เพื่อให้คนอื่น ๆ เข้ามาอ่านอีกด้วย การคิดก่อนทำ นั่นคือก่อนที่จะเริ่มต้นทำ จะต้องเข้าใจปัญหาหรือมีเป้าหมายก่อน จากนั้นจึงแบ่งปัญหาใหญ่ออกเป็นปัญหาย่อยเพื่อให้แก้ไขปัญหาได้ง่ายขึ้น การทดสอบจะง่ายหรือไม่นั้นสิ่งที่สำคัญมาก ๆ คือโครงสร้างของ code ที่พัฒนานั้นได้คิดหรือออกแบบการทดสอบกันอย่างไรหรือไม่ ซึ่งถ้าไม่ได้คิดถึงการทดสอบตั้งแต่แรก การทดสอบจะทำได้ยากมาก   แหล่งอ้างอิง : http://www.somkiat.cc/write-automation-test/

บทความนี้นำเสนอขั้นตอนการพัฒนา Unit Test อย่างง่ายโดยแสดงให่้เห็นการพัฒนาทีละขั้นตอน สำหรับระบบที่พัฒนาบน .NET Core โดยใช้ MSTest เพื่อทำความเข้าใจการพัฒนาแบบ test-driven development (TDD) ซึ่งในขั้นแรก เริ่มต้นด้วยการสร้าง source project ชื่อ “CalcTool” ใช้สำหรับการทดสอบ อยู่ภายใต้ folder “TestSample” ซึ่งขั้นตอนการสร้าง project สามารถดูได้จาก บทความ การพัฒนา Unit Testing โดย xUnit test library (.NET Core) ซึ่งจะได้ class “Calc” ซึ่งประกอบไปด้วย method “AbsAddByOne(int value)” ที่ยังไม่ได้เขียน code การทำงาน สร้าง test project ที่ใช้ MSTest library โดยเปิด command prompt เข้าไปที่ folder “TestSample” และสร้าง sub folder ชื่อ “CalcTool.MSTests” จากนั้นเข้าไปที่ folder “CalcTool.MSTests” ทำการสร้าง .NET Core project โดยใช้คำสั่ง dotnet new mstest โดยคำสั่งนี้จะทำการสร้าง test project ที่ใช้ MSTest test library และกำหนดค่า test runner <ItemGroup> <PackageReference Include=”Microsoft.NET.Test.Sdk” Version=”15.0.0″/> <PackageReference Include=”MSTest.TestAdapter” Version=”1.1.11″/> <PackageReference Include=”MSTest.TestFramework” Version=”1.1.11″/> </ItemGroup> เพิ่ม reference ไปยัง project ที่ต้องการทดสอบซึ่งในที่นี้คือ CalcTool project โดยใช้คำสั่ง dotnet add reference ../CalcTool/CalcTool.csproj จากนั้นให้ execute คำสั่ง dotnet restore เพื่อ restore NuGet package ที่จำเป็นต้องใช้ในแต่ละ project เริ่มพัฒนา unit testing โดยลบ file “UnitTest1.cs” และสร้าง file ใหม่โดยใช้ชื่อว่า “CalcTest.cs” และเขียน code ดังนี้ using System; using Microsoft.VisualStudio.TestTools.UnitTesting; namespace CalcTool.MSTest { [TestClass] public class CalcTest { [TestMethod] public void AbsAddByOneTest() { var c = new Calc(); var result = c.AbsAddByOne(5); Assert.AreEqual(result, 6); } } } *[TestClass] attribute ใช้เพื่อบอกว่ามี unit test อยู่ใน class นั้น *[TestMethod] attribute ใช้เพื่อกำหนดว่า method นั้นๆเป็นแบบ single test ทำการทดสอบโดยการ execute dotnet test ซึ่งจะทำการ build และ start MSTest test runner ซึ่งพบว่าผลการทดสอบ fail เนื่องจากยังไม่ได้ implement code ใน method “AbsAddByOne” ของ class “Calc” ดังนั้นกลับไปที่ method