สวัสดีครับ ผม Frank (วิษณุ)
ผู้เชี่ยวชาญด้านระบบธุรกิจและเทคโนโลยี

Smoke Testing (Build Verification Test): เป็นการเทสฟังก์ชันหลักที่เป็นกระดูกสันหลังของระบบ (Critical Path) ในระยะเวลาสั้นๆ ทันทีที่ได้ Build ใหม่ เพื่อยืนยันว่าระบบมีความเสถียรพอที่จะส่งต่อให้ทีม QA เริ่มทำการเทสอย่างละเอียดต่อไปได้หรือไม่

Regression Testing: เป็นการรันชุด Test Suite ทั้งหมดหรือส่วนที่เกี่ยวข้อง เพื่อยืนยันว่าการแก้ไข Bug หรือการเพิ่ม Feature ใหม่ จะไม่ทำให้ฟังก์ชันเดิมที่เคยใช้งานได้เกิดความเสียหาย (Side effects) มักนำมาทำเป็น Automation Test รันใน CI/CD

A production-grade UI automation framework needs to be scalable, maintainable, and resilient against flakiness. We will structure this using Python + Pytest + Playwright following the Page Object Model (POM) pattern.

1. Enterprise Project Structure

Organize the repository cleanly to separate configuration, page interactions, test definitions, and utilities:

2. Base Page (pages/base_page.py)

Encapsulate reusable interactions to ensure uniform error handling and dynamic waiting across all pages:

3. Page Object (pages/login_page.py)

Abstract the specific UI locators and actions away from test cases:

4. Fixtures & Trace Management (tests/conftest.py)

Pytest fixtures manage browser lifecycle, isolate browser contexts per test to prevent side-effects, and capture trace zip files on test failure for debugging:

5. Clean Test Cases (tests/test_login.py)

Tests remain declarative, focused on business logic and assertions without hardcoded selectors:

6. Execution & Flakiness Mitigation Strategies

• Auto-retrying Assertions: Always prefer expect(locator).to_be_visible() over raw assert locator.is_visible(). expect automatically polls until the timeout, eliminating artificial time.sleep() calls.
• Parallel Execution: Run tests across multiple CPU cores with pytest -n auto (via pytest-xdist).
• Built-in Auto-Wait: Playwright automatically waits for elements to be actionable (visible, stable, enabled) before clicking or filling.

Headless mode runs a web browser without a graphical user interface (GUI). The browser engine executes JavaScript, parses HTML/CSS, handles network calls, and navigates pages normally in memory, but no visible browser window opens on the screen.

Key Advantages

• Faster Execution: Bypasses GUI rendering and screen painting overhead, speeding up test suites.
• Lower Resource Usage: Consumes significantly less CPU and RAM compared to headed instances.
• CI/CD Compatibility: Essential for running tests on headless server environments like Linux build agents, Docker containers, and cloud pipelines (GitHub Actions, Jenkins, GitLab CI).
• Parallelization: Allows running many concurrent browser instances on a single machine without visual clutter or window-focus conflicts.

Common Limitations

• Harder to Debug: You cannot visually watch test execution in real time; troubleshooting relies on logs, screenshots, video recordings, or traces.
• Rendering Differences: Some layouts, viewport-dependent elements, or animations can occasionally behave slightly differently than on a rendered display.
• Anti-Bot Triggers: Certain security mechanisms and CAPTCHAs detect headless browser flags (navigator.webdriver).

Code Examples

Selenium (Python)

Playwright (Python)

In software test automation, an Assertion is a checkpoint that validates whether the Actual Result produced by the system matches the Expected Result. Assertions are classified into two primary types: Hard Assertions and Soft Assertions.

Comparison: Hard Assert vs Soft Assert

Implementation Code Examples

Playwright (Python / TypeScript Built-in Soft Assert)

Pytest (Python with pytest-check)

• 200 OK: Request สำเร็จและคืนผลลัพธ์ตามปกติ
• 201 Created: สร้าง Resource ใหม่สำเร็จ (มักเกิดจากการยิง POST)
• 400 Bad Request: ส่งข้อมูลผิด Format หรือขาด Required Fields
• 401 Unauthorized: ไม่ได้แนบ Token หรือ Token หมดอายุ (ต้องล็อกอินใหม่)
• 403 Forbidden: มี Token แต่ไม่มีสิทธิ์เข้าถึง Resource นั้น (Role Permission)
• 404 Not Found: ไม่พบ Endpoint หรือ Data ID ที่ระบุ
• 500 Internal Server Error: Server เกิด Unhandled Exception หรือ Crash

1. สถาปัตยกรรมการเชื่อมต่อ: Playwright เชื่อมต่อ Browser ผ่าน Chrome DevTools Protocol (CDP) และ WebSocket แบบ Single-connection ทำให้รวดเร็วและแม่นยำกว่า Selenium ที่ส่งผ่าน HTTP WebDriver REST API

2. Auto-Waiting: Playwright มีระบบรอ Actionable Check อัตโนมัติ (Element Visible, Enabled, Stable) ก่อนคลิกหรือพิมพ์ ไม่ต้องเขียน Thread.sleep() หรือ Custom Explicit Waits ซับซ้อน

3. เครื่องมือเสริมทรงพลัง: มี Trace Viewer, Codegen (บันทึกคลิกแล้วสร้างโค้ดอัตโนมัติ), Network Interception, Multi-tab & Multi-domain contexts ครบครันในตัว

สาเหตุหลักของ Flaky Tests มักเกิดจากการ Synchronization (Timing/Network), Test Data Dependency และ Dynamic Locators

• ใช้ Explicit / Web-first Assertions: แทนที่การหน่วงเวลาแบบ Fixed Sleep (ห้ามใช้ sleep(5) เด็ดขาด)
• Isolated Test Data: สร้าง Data ใหม่แบบ Dynamic สำหรับแต่ละ Test Case เพื่อไม่ให้แย่งข้อมูลกันในการรันแบบ Parallel
• ใช้ Resilient Locators: เลือกใช้ getByRole(), getByLabel(), หรือ data-testid แทน XPath เชิงลึกที่เปราะบาง
• Network Mocking: จำลองการตอบกลับของ Third-party APIs ที่ควบคุมไม่ได้เพื่อป้องกันความล่าช้าจากเครือข่ายภายนอก

การเขียน Bug Report ที่ชัดเจนช่วยให้นักพัฒนาแก้ไขได้เร็ว ไม่ต้องสอบถามซ้ำซ้อน องค์ประกอบที่ขาดไม่ได้ได้แก่:

• 🔹 Summary / Title: สรุปปัญหาชัดเจน ตรงประเด็น (เช่น [Checkout] Discount code 'SUMMER50' throws 500 error when cart > ฿1000)
• 🔹 Environment: Staging / Prod, OS, Browser Version, App Version
• 🔹 Pre-conditions: เงื่อนไขเริ่มต้น (เช่น บัญชี VIP ที่มียอดแต้มสะสม > 100)
• 🔹 Steps to Reproduce (STR): ลำดับขั้นตอน 1, 2, 3 อย่างละเอียด
• 🔹 Expected Result vs Actual Result: สิ่งที่ควรจะเป็น เทียบกับ สิ่งที่เกิดขึ้นจริง
• 🔹 Evidence: Screenshot, Screen Recording (MP4/GIF), Network Log (HAR file), Console Errors
• 🔹 Severity & Priority: ประเมินระดับผลกระทบตามเกณฑ์ทางธุรกิจ

A Locator is a core abstraction and executable object in modern test automation frameworks (such as Playwright, Cypress, and Selenium 4) that encapsulates the logic to find and interact with element(s) on a webpage. Unlike traditional element references that store a static snapshot of the DOM node, a Locator is dynamic, resilient, and lazily evaluated.

Best Practices vs Anti-Patterns

Playwright Locator Example (Lazy Chaining & Filtering):

A Selector is a query string pattern used by browser rendering engines and test frameworks to target specific HTML DOM nodes (e.g. CSS Selectors, XPath expressions, Text patterns, or Test-ID strings).

Selector Types: Pros & Cons Comparison

Deep Comparison: Selector vs Locator

A Role Locator targets elements based on their ARIA (Accessible Rich Internet Applications) Role and accessible name, mirroring how real human users and assistive technologies (screen readers) perceive the UI.

Playwright Role Locator Cheat Sheet

A Semantic Locator identifies elements based on their human-visible meaning, intent, and user-facing content (text, input labels, placeholders, alt text) rather than technical implementation details (DOM structure, XPath, CSS classes).

Playwright's 7 Recommended Locator Priority Hierarchy

• 1. page.get_by_role(): Highest priority. Matches ARIA role and accessible name (e.g. get_by_role("button", name="Submit")).
• 2. page.get_by_text(): Locate by visible non-interactive text content (e.g. get_by_text("Welcome back, Frank!")).
• 3. page.get_by_label(): Locate form inputs associated with an explicit <label> element.
• 4. page.get_by_placeholder(): Locate input fields by placeholder text (e.g. get_by_placeholder("Search products...")).
• 5. page.get_by_alt_text(): Locate images and graphics by their descriptive alt attribute.
• 6. page.get_by_title(): Locate elements with a title tooltip attribute.
• 7. page.get_by_test_id(): Explicit testing contract attribute (e.g. data-testid="cart-badge") when user-facing text is dynamic or localized.

Semantic Locators vs Technical Locators

In modern automation frameworks like Playwright, getByRole, getByLabel, and getByPlaceholder are the three most essential User-Facing Semantic Locators designed to locate form controls and interactive components exactly how real users and assistive technologies perceive them.

Comparison Matrix: getByRole vs getByLabel vs getByPlaceholder

Complete Playwright Example Using All Three Together:

XPath (XML Path Language) is a query language used to navigate and select nodes from XML and HTML document trees. In test automation, XPath is essential when you need bidirectional navigation (traversing up to parent nodes or navigating between siblings) that standard CSS Selectors cannot achieve.

Must-Know XPath Functions & Axes Cheat Sheet

Python REPL stands for Read-Eval-Print Loop. It is an interactive programming environment / shell that takes user inputs (code), evaluates them immediately in memory, prints the results, and loops back waiting for the next command.

Interactive Debugging with Python REPL & Playwright: