Puppeteer ควบคุมและบันทึกการใช้งาน chrome สำหรับ UI testing
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 โดยใช้คำสั่ง […]
Visual test automation : Appraise test page
จากบทความ 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 […]
Stencil : Decorators
Component Decorator แต่ละ Stencil component จะต้องขึ้นต้นด้วย @Component() decorator เสมอ โดย import มาจาก @stencil.core package ซึ่งภายใต้ @Component() decorator สามารถกำหนด tag name และ styleUrl ของ component import { Component } from ‘@stencil/core’; @Component({ tag: ‘todo-list’, styleUrl: ‘todo-list.scss’ }) export class TodoList { … } @Component() decorator ให้ความสามารถในการกำหนด CSS classes และ attributes บน componnet ที่สร้างโดยใช้ host option ดังนี้ import { Component […]
Visual test automation
ในการพัฒนา software นั้น เรื่อง Look and Feel เป็นสิ่งที่สำคัญมาก ๆ software ที่ทำงานได้ดียังไม่พอ ต้องดูดีสวยงามและใช้งานง่ายอีกด้วย คำถามที่น่าสนใจคือ จะทำการทดสอบในส่วนของการแสดงผลอย่างไรบ้าง โดยปกติในการทำการทดสอบการแสดงผล จะใช้คนเป็นผู้ทดสอบ มานั่งดู มาใช้งาน แล้วพิจารณาและตัดสินว่า ถูกหรือไม่ ทำให้ต้องใช้เวลาและกำลังคนในการทดสอบค่อยข้างมาก เพราะว่าในส่วนของการแสดงผลนั้นมันยากมาก ๆ สำหรับการทดสอบ มีหลายสิ่งอย่างให้พิจารณา ยกตัวอย่างเช่น ในแต่ละ element แต่ละส่วนงานทำงานและแสดงผลได้อย่างถูกต้องแต่เมื่อนำมารวมกัน กลับทำงานไม่ถูกต้อง หรือ แสดงผลผิดพลาด การลดเวลาและต้นทุนในการทดสอบลงโดยใช้การทดสอบแบบอัตโนมัติ เป็นสิ่งจำเป็น และต้องมีเครื่องมือช่วย ในบทความนี้ขอแนะนำ Appraise ซึ่ง Appraise นั้นได้นำแนวทางของ Specification by Example มาใช้ นั่นหมายความว่า ในแต่ละ test case ต้องมี concrete example ที่ชัดเจน นำ test case เหล่านี้ไปทดสอบแบบอัตโนมัติ ทำการทดสอบด้วย Google Chrome Headless ซึ่งจะทำการ snapshot ส่วนที่ต้องการเป็นรูปภาพและเปรียบเทียบกับผลที่คาดหวังหรือไม่ ถ้าผลออกมาไม่ตรงกับที่คาดหวัง Appraise จะแสดงผลที่แตกต่างออกมาให้เห็น จากนั้นจะให้คนมา approve […]
Stencil : Web component compiler
Stencil เป็น compiler ที่ทำหน้าที่สร้าง standards-based web component (custom element) ซึ่งรวบรวมแนวคิดที่ดีของ framework ต่างๆที่ได้รับความนิยมสูง มาไว้ใน component โดย build-time tool ที่ใช้งานง่าย เช่น Virtual DOM Async rendering (inspired by React Fiber) Reactive data-binding TypeScript JSX web component ที่ได้จาก Stencil เป็น standards-based web component ทำให้สามารถใช้งานร่วมกับ framework ต่างๆที่ได้รับความนิยม และสามารถใช้ได้โดยไม่มี framework ก็ได้ จากเดิมเมื่อพัฒนาด้วย framework หนึ่งแล้ว ไม่สามารถนำไปใช้ร่วมกับ framework อื่นได้ Stencil มี APIs เช่น […]