User Testing Guide - Chathai Framework

ภาพรวม

คู่มือนี้จะสอนให้คุณใช้งาน Chathai Framework ในการสร้าง Cypress test scripts จาก Excel templates โดยจะใช้เว็บ demo ที่ https://docs.chathai.site/demo เป็นตัวอย่าง

ข้อกำหนดเบื้องต้น

Node.js (เวอร์ชัน 14 หรือใหม่กว่า)
npm หรือ yarn
Google Sheets หรือ Microsoft Excel
ความรู้พื้นฐานเกี่ยวกับ Cypress

การติดตั้ง Chathai

1. ติดตั้ง Chathai CLI

# ติดตั้งแบบ global
npm install -g chathai

# หรือติดตั้งในโปรเจกต์
npm install chathai --save-dev

2. สร้างโปรเจกต์ Cypress

# สร้างโฟลเดอร์โปรเจกต์
mkdir chathai-demo-test
cd chathai-demo-test

# ติดตั้ง Cypress
npm init -y
npm install cypress --save-dev

# เปิด Cypress เพื่อสร้างโครงสร้างโฟลเดอร์
npx cypress open

การใช้งาน Excel Template

Template ที่พร้อมใช้งาน

คุณสามารถใช้ template ที่เตรียมไว้แล้วได้จาก Google Sheets:

📊 Chathai Framework Template

Template นี้มีตัวอย่าง test cases พร้อมใช้งาน:

Simple Web Page Tests: ทดสอบการแสดงผล title และการคลิกปุ่ม
Form Data-Driven Testing: ทดสอบการกรอกฟอร์มด้วยข้อมูลหลายชุด

โครงสร้าง Template

Chathai ใช้ Excel template ที่มีคอลัมน์ดังนี้:

คอลัมน์	คำอธิบาย	ตัวอย่าง
TestScenario(des)	ชื่อ scenario สำหรับ describe block	"Simple Web Page Tests"
Test case(IT)	ชื่อ test case สำหรับ it block	"Verify title is displayed correctly"
Describe	คำอธิบายขั้นตอน	"Navigate to demo page"
only	ใช้ it.only (YES/ONLY)	YES
hook	ชื่อ hook (before, beforeEach, after, afterEach)	beforeEach
command	คำสั่ง Cypress	visit, get, click, type, should
value/target	ค่าที่ใช้กับคำสั่ง	URL, selector, text
chaining?	ต่อจากคำสั่งก่อนหน้า (YES/NO)	YES

คำสั่ง Cypress ที่รองรับ

คำสั่งพื้นฐาน

visit - เปิดหน้าเว็บ
get - ค้นหา element
click - คลิก element
type - พิมพ์ข้อความ
should - ตรวจสอบ assertion

คำสั่งเพิ่มเติม

contains - ค้นหา element ที่มีข้อความ
select - เลือก option จาก dropdown
check/uncheck - เลือก/ยกเลิก checkbox
clear - ล้างค่าใน input

Test Case 1: Simple Test (แบบง่าย)

วัตถุประสงค์

ทดสอบการทำงานพื้นฐานของเว็บ demo เช่น การแสดงผล title และการคลิกปุ่ม

โจทย์ที่ 1: ทดสอบการแสดงผล Title

TestCase ID	TestSteps	InputData	Expected Results
TC001	เปิดหน้าเว็บ demo	http://docs.chathai.site/demo	หน้าเว็บโหลดสำเร็จ
TC001	ตรวจสอบ title หลัก	h1 element	แสดงข้อความ "Chathai Demo Website"
TC001	ตรวจสอบ title ย่อย	h3 element	แสดงข้อความ "Welcome to Simple Web Page"

โจทย์ที่ 2: ทดสอบการคลิกปุ่ม

TestCase ID	TestSteps	InputData	Expected Results
TC002	เปิดหน้าเว็บ demo	http://docs.chathai.site/demo	หน้าเว็บโหลดสำเร็จ
TC002	ค้นหาปุ่มคลิก	#click-me-btn	ปุ่มปรากฏและคลิกได้
TC002	คลิกปุ่ม	คลิกปุ่ม	แสดงข้อความ "Button Clicked!"
TC002	ตรวจสอบข้อความ	#message element	แสดงข้อความ "Button Clicked!"

คำอธิบาย Test Cases

โจทย์ที่ 1: ทดสอบการแสดงผล Title

TC001: ทดสอบการแสดงผลของ title หลักและ title ย่อยในหน้าเว็บ demo
ตรวจสอบว่า h1 element แสดงข้อความ "Chathai Demo Website"
ตรวจสอบว่า h3 element แสดงข้อความ "Welcome to Simple Web Page"

โจทย์ที่ 2: ทดสอบการคลิกปุ่ม

TC002: ทดสอบการทำงานของปุ่มคลิกและข้อความที่แสดงผล
ตรวจสอบว่าปุ่ม #click-me-btn ปรากฏและคลิกได้
ตรวจสอบว่าหลังคลิกปุ่มแล้วจะแสดงข้อความ "Button Clicked!" ใน #message element

โจทย์ที่ 3: ทดสอบการกรอกฟอร์ม (Data-Driven Testing)

TestCase ID	TestSteps	InputData	Expected Results
TC003	เปิดหน้าเว็บ demo	http://docs.chathai.site/demo	หน้าเว็บโหลดสำเร็จ
TC003	กรอกชื่อ	`{{name}}`	ชื่อถูกกรอกในฟิลด์ #name
TC003	กรอกอีเมล	`{{email}}`	อีเมลถูกกรอกในฟิลด์ #email
TC003	กรอกเบอร์โทร	`{{phone}}`	เบอร์โทรถูกกรอกในฟิลด์ #phone
TC003	เลือกประเทศ	`{{country}}`	ประเทศถูกเลือกในฟิลด์ #country
TC003	กรอกข้อความ	`{{message}}`	ข้อความถูกกรอกในฟิลด์ #message
TC003	เลือก newsletter	`{{newsletter}}`	checkbox newsletter ถูกเลือก/ไม่เลือกตามข้อมูล
TC003	เลือก terms	`{{terms}}`	checkbox terms ถูกเลือก
TC003	ส่งฟอร์ม	คลิกปุ่ม submit	ฟอร์มถูกส่งสำเร็จ
TC003	ตรวจสอบข้อความสำเร็จ	#success-message	แสดงข้อความ "Form Submitted Successfully!"

คำอธิบาย Test Case เพิ่มเติม

โจทย์ที่ 3: ทดสอบการกรอกฟอร์ม (Data-Driven Testing)

TC003: ทดสอบการกรอกฟอร์มด้วยข้อมูลหลายชุดโดยใช้ Data-Driven Testing
ใช้ placeholders เช่น {{name}}, {{email}}, {{phone}} เพื่อแทนที่ค่าจาก fixture data
ทดสอบการกรอกข้อมูลในฟิลด์ต่างๆ: ชื่อ, อีเมล, เบอร์โทร, ประเทศ, ข้อความ
ทดสอบการเลือก checkbox สำหรับ newsletter และ terms
ตรวจสอบว่าฟอร์มถูกส่งสำเร็จและแสดงข้อความยืนยัน

การสร้าง Excel Template

เปิด Google Sheets หรือ Excel
สร้างตารางตามโครงสร้างข้างต้น
กรอกข้อมูลดังนี้:

TestScenario(des)	Test case(IT)	Describe	hook	command	value/target	chaining?
Simple Web Page Tests	Verify title is displayed correctly	Navigate to demo page	beforeEach	visit	http://docs.chathai.site/demodemo
Simple Web Page Tests	Verify title is displayed correctly	Check main title		get	h1
Simple Web Page Tests	Verify title is displayed correctly	Verify title text		should	contain, Chathai Demo Website	YES
Simple Web Page Tests	Verify title is displayed correctly	Check welcome title		get	h3
Simple Web Page Tests	Verify title is displayed correctly	Verify welcome text		should	contain, Welcome to Simple Web Page	YES
Simple Web Page Tests	Verify clicking button shows message	Navigate to demo page	beforeEach	visit	http://docs.chathai.site/demodemo
Simple Web Page Tests	Verify clicking button shows message	Find click button		get	#click-me-btn
Simple Web Page Tests	Verify clicking button shows message	Verify button is visible		should	be.visible	YES
Simple Web Page Tests	Verify clicking button shows message	Click the button		click		YES
Simple Web Page Tests	Verify clicking button shows message	Check message appears		get	#message
Simple Web Page Tests	Verify clicking button shows message	Verify message text		should	contain, Button Clicked!	YES

การสร้าง Test Script

วิธีที่ 1: ใช้ Google Sheets Template

เปิด Chathai Framework Template
คลิก File → Download → Microsoft Excel (.xlsx)
บันทึกไฟล์เป็น chathai-template.xlsx

วิธีที่ 2: สร้าง Template ใหม่

เปิด Google Sheets หรือ Excel
สร้างตารางตามโครงสร้างข้างต้น
กรอกข้อมูลตามตัวอย่าง

การ Generate Test Script

# สร้าง test script จาก Excel
npx chathai generate chathai-template.xlsx

# หรือระบุ output directory
npx chathai generate chathai-template.xlsx --output-dir cypress/e2e

ผลลัพธ์ที่ได้

describe('Simple Web Page Tests', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/demo');
  });

  it('Verify title is displayed correctly', () => {
    cy.get('h1').should('contain', 'Chathai Demo Website');
    cy.get('h3').should('contain', 'Welcome to Simple Web Page');
  });

  it('Verify clicking button shows message', () => {
    cy.get('#click-me-btn').should('be.visible').click();
    cy.get('#message').should('contain', 'Button Clicked!');
  });
});

Test Case 2: Data-Driven Testing (DDT)

วัตถุประสงค์

ทดสอบการกรอกฟอร์มด้วยข้อมูลหลายชุด โดยใช้ Data-Driven Testing

การสร้าง Fixture Data

สร้างไฟล์ cypress/fixtures/ecommerce_ddt.json:

[
  {
    "name": "John Doe",
    "email": "john.doe@example.com",
    "phone": "+1-555-123-4567",
    "country": "us",
    "message": "This is a test message from John",
    "newsletter": true,
    "terms": true
  },
  {
    "name": "Jane Smith",
    "email": "jane.smith@example.com",
    "phone": "+66-123-456-789",
    "country": "th",
    "message": "สวัสดีครับ นี่คือข้อความทดสอบ",
    "newsletter": false,
    "terms": true
  },
  {
    "name": "Hans Mueller",
    "email": "hans.mueller@example.com",
    "phone": "+49-30-12345678",
    "country": "de",
    "message": "Hallo, das ist eine Testnachricht",
    "newsletter": true,
    "terms": true
  }
]

การสร้าง Excel Template สำหรับ DDT

TestScenario(des)	Test case(IT)	Describe	hook	command	value/target	chaining?
Form Data-Driven Testing	Fill and submit form with different user data	Navigate to demo page	beforeEach	visit	http://localhost:3000/demo
Form Data-Driven Testing	Fill and submit form with different user data	Fill name field		get	#name
Form Data-Driven Testing	Fill and submit form with different user data	Clear and type name		clear		YES
Form Data-Driven Testing	Fill and submit form with different user data	Type name value		type	`{{name}}`	YES
Form Data-Driven Testing	Fill and submit form with different user data	Fill email field		get	#email
Form Data-Driven Testing	Fill and submit form with different user data	Clear and type email		clear		YES
Form Data-Driven Testing	Fill and submit form with different user data	Type email value		type	`{{email}}`	YES
Form Data-Driven Testing	Fill and submit form with different user data	Fill phone field		get	#phone
Form Data-Driven Testing	Fill and submit form with different user data	Clear and type phone		clear		YES
Form Data-Driven Testing	Fill and submit form with different user data	Type phone value		type	`{{phone}}`	YES
Form Data-Driven Testing	Fill and submit form with different user data	Select country		get	#country
Form Data-Driven Testing	Fill and submit form with different user data	Choose country option		select	`{{country}}`	YES
Form Data-Driven Testing	Fill and submit form with different user data	Fill message field		get	#message
Form Data-Driven Testing	Fill and submit form with different user data	Clear and type message		clear		YES
Form Data-Driven Testing	Fill and submit form with different user data	Type message value		type	`{{message}}`	YES
Form Data-Driven Testing	Fill and submit form with different user data	Handle newsletter checkbox		get	input[name="newsletter"]
Form Data-Driven Testing	Fill and submit form with different user data	Check newsletter if true		check		YES
Form Data-Driven Testing	Fill and submit form with different user data	Handle terms checkbox		get	input[name="terms"]
Form Data-Driven Testing	Fill and submit form with different user data	Check terms		check		YES
Form Data-Driven Testing	Fill and submit form with different user data	Submit form		get	[data-testid="submit-button"]
Form Data-Driven Testing	Fill and submit form with different user data	Click submit button		click		YES
Form Data-Driven Testing	Fill and submit form with different user data	Verify success message		get	[data-testid="success-message"]
Form Data-Driven Testing	Fill and submit form with different user data	Check message is visible		should	be.visible	YES

การสร้าง DDT Test Script

ใช้ Google Sheets Template

เปิด Chathai Framework Template
ดูตัวอย่างในส่วน "Form Data-Driven Testing"
ดาวน์โหลดเป็น Excel (.xlsx)
สร้าง fixture file cypress/fixtures/ecommerce_ddt.json ตามตัวอย่างข้างต้น

# สร้าง DDT test script
npx chathai generate chathai-template.xlsx --ddt ecommerce_ddt

# หรือใช้ flag แบบสั้น
npx chathai generate chathai-template.xlsx -ddt ecommerce_ddt

ผลลัพธ์ที่ได้

หมายเหตุ: Framework จะปรับปรุงโค้ดที่ generate ให้ใช้ Cypress best practices โดยอัตโนมัติ:

Smart Fixture Access: ใช้ this.rows.forEach() แทน cy.get('@rows').then()
Command Chaining: รวมคำสั่งที่เกี่ยวข้องเข้าด้วยกัน (เช่น cy.get('#name').clear().type(row.name))
Conditional Logic: เพิ่มการตรวจสอบเงื่อนไขสำหรับ checkbox
Better Selectors: ใช้ data-testid แทน class selectors
Enhanced Assertions: เพิ่มการตรวจสอบข้อความใน success message
Timing: เพิ่ม cy.wait() ระหว่าง iterations

describe('Form Data-Driven Testing', () => {
  beforeEach(() => {
    cy.fixture('ecommerce_ddt.json').as('rows');
  });

  it('Fill and submit form with different user data', function () {
    cy.visit('http://localhost:3000/demo');
    
    this.rows.forEach((row) => {
      // Fill form fields with chaining
      cy.get('#name').clear().type(row.name);
      cy.get('#email').clear().type(row.email);
      cy.get('#phone').clear().type(row.phone);
      cy.get('#country').select(row.country);
      cy.get('#message').clear().type(row.message);
      
      // Handle checkboxes with conditional logic
      if (row.newsletter) {
        cy.get('input[name="newsletter"]').check();
      } else {
        cy.get('input[name="newsletter"]').uncheck();
      }
      
      cy.get('input[name="terms"]').check();
      
      // Submit form
      cy.get('[data-testid="submit-button"]').click();
      
      // Verify success message
      cy.get('[data-testid="success-message"]').should('be.visible');
      cy.get('[data-testid="success-message"] h3').should('contain', 'Form Submitted Successfully!');
      
      // Wait between iterations
      cy.wait(500);
    });
  });
});

การรัน Tests

หลังจากที่คุณได้ Cypress test scripts จาก Chathai แล้ว ขั้นตอนต่อไปคือการรัน tests

1. การเตรียมความพร้อม

ตรวจสอบโครงสร้างโปรเจกต์

your-project/
├── cypress/
│   ├── e2e/
│   │   ├── simple-test.cy.js
│   │   └── form-ddt-test.cy.js
│   ├── fixtures/
│   │   └── ecommerce_ddt.json
│   └── support/
│       ├── commands.js
│       └── e2e.js
├── cypress.config.js
└── package.json

ตรวจสอบ cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    supportFile: 'cypress/support/e2e.js',
    specPattern: 'cypress/e2e/**/*.cy.js',
    fixturesFolder: 'cypress/fixtures',
    viewportWidth: 1280,
    viewportHeight: 720,
    video: true,
    screenshotOnRunFailure: true
  }
})

2. รันในโหมด Headed (มี UI) - แนะนำสำหรับผู้เริ่มต้น

เปิด Cypress Test Runner

npx cypress open

ขั้นตอนการใช้งาน Cypress UI:

เลือก E2E Testing - คลิก "E2E Testing"
เลือก Browser - เลือก Chrome, Firefox, หรือ Edge
เลือก Test File - คลิกที่ไฟล์ test ที่ต้องการรัน
ดูผลลัพธ์ - ดูการทำงานของ test แบบ real-time

ฟีเจอร์ใน Cypress UI:

Command Log - ดูคำสั่งที่รันทีละขั้นตอน
Application Preview - ดูเว็บไซต์ที่กำลังทดสอบ
Time Travel - กลับไปดูสถานะก่อนหน้าได้
Element Inspector - ตรวจสอบ DOM elements

3. รันในโหมด Headless (ไม่มี UI) - สำหรับ CI/CD

รัน test ทั้งหมด

npx cypress run

รัน test เฉพาะไฟล์

# รัน simple test
npx cypress run --spec "cypress/e2e/simple-test.cy.js"

# รัน DDT test
npx cypress run --spec "cypress/e2e/form-ddt-test.cy.js"

# รันหลายไฟล์
npx cypress run --spec "cypress/e2e/simple-test.cy.js,cypress/e2e/form-ddt-test.cy.js"

รัน test เฉพาะ browser

# Chrome
npx cypress run --browser chrome

# Firefox
npx cypress run --browser firefox

# Edge
npx cypress run --browser edge

รัน test พร้อม options

# รันแบบ headless พร้อม record
npx cypress run --record --key YOUR_RECORD_KEY

# รันแบบ parallel
npx cypress run --parallel --record --key YOUR_RECORD_KEY

# รันแบบ group
npx cypress run --group "smoke-tests" --record --key YOUR_RECORD_KEY

4. การรัน Test แบบ Interactive

รัน test เฉพาะ test case

# รันเฉพาะ test case ที่มี .only
npx cypress run --spec "cypress/e2e/simple-test.cy.js"

# หรือแก้ไขไฟล์ test ให้มี it.only()

รัน test แบบ debug

# เปิด debug mode
npx cypress run --headed --no-exit

5. การดูผลลัพธ์

ในโหมด Headed

ผลลัพธ์แสดงใน Cypress UI
สามารถดู screenshots และ videos ได้ทันที
มี command log แสดงการทำงานทีละขั้นตอน

ในโหมด Headless

# ดูผลลัพธ์ใน terminal
npx cypress run --reporter spec

# สร้าง HTML report
npx cypress run --reporter html

# ดู videos และ screenshots
ls cypress/videos/
ls cypress/screenshots/

6. การแก้ไขปัญหาการรัน Test

ปัญหา: Test ไม่พบเว็บไซต์

# ตรวจสอบว่าเว็บไซต์รันอยู่
curl http://localhost:3000/demo

# หรือแก้ไข baseUrl ใน cypress.config.js

ปัญหา: Element ไม่พบ

// เพิ่ม timeout
cy.get('#element', { timeout: 10000 });

// รอให้ element ปรากฏ
cy.get('#element').should('be.visible');

ปัญหา: Test ล้มเหลว

# รันแบบ headed เพื่อดูปัญหา
npx cypress open

# ดู error logs
npx cypress run --reporter json > results.json

7. การตั้งค่า Environment Variables

สร้างไฟล์ cypress.env.json

{
  "baseUrl": "http://localhost:3000",
  "apiUrl": "http://localhost:3000/api",
  "testUser": {
    "email": "test@example.com",
    "password": "password123"
  }
}

ใช้งานใน test

// ใช้ environment variables
cy.visit(Cypress.env('baseUrl') + '/demo');

8. การรัน Test แบบ Batch

สร้างไฟล์ package.json scripts

{
  "scripts": {
    "test": "cypress run",
    "test:headed": "cypress open",
    "test:simple": "cypress run --spec 'cypress/e2e/simple-test.cy.js'",
    "test:ddt": "cypress run --spec 'cypress/e2e/form-ddt-test.cy.js'",
    "test:chrome": "cypress run --browser chrome",
    "test:firefox": "cypress run --browser firefox"
  }
}

รันด้วย npm scripts

# รัน test ทั้งหมด
npm test

# รันแบบ headed
npm run test:headed

# รัน simple test
npm run test:simple

# รัน DDT test
npm run test:ddt

9. การติดตามผลลัพธ์

ดู test results

# ดูผลลัพธ์แบบละเอียด
npx cypress run --reporter spec

# บันทึกผลลัพธ์เป็นไฟล์
npx cypress run --reporter json > test-results.json

ดู videos และ screenshots

# ดู videos
ls -la cypress/videos/

# ดู screenshots
ls -la cypress/screenshots/

10. Tips สำหรับการรัน Test

รัน test อย่างมีประสิทธิภาพ

# รันเฉพาะ test ที่ล้มเหลว
npx cypress run --spec "cypress/e2e/**/*.cy.js" --reporter json | grep "failing"

# รัน test แบบ parallel
npx cypress run --parallel --record --key YOUR_KEY

การ debug

// ใช้ cy.pause() เพื่อหยุด test
cy.get('#element').click();
cy.pause(); // หยุดที่นี่
cy.get('#result').should('be.visible');

// ใช้ cy.debug() เพื่อดูข้อมูล
cy.get('#element').debug();

เทคนิคและเคล็ดลับ

1. การใช้ Placeholders ใน DDT

ใช้ {{fieldName}} สำหรับแทนที่ค่าจาก fixture
รองรับ nested properties เช่น {{user.name}}
รองรับ template strings เช่น "Hello {{name}}"

2. การใช้ Chaining

ใช้ chaining? = YES เมื่อต้องการต่อจากคำสั่งก่อนหน้า
คำสั่งที่รองรับ chaining: get, find, parent, children
คำสั่งที่ chain ได้: click, type, should, check, select

3. การใช้ Hooks

before - รันก่อน describe block
beforeEach - รันก่อนแต่ละ it block
after - รันหลัง describe block
afterEach - รันหลังแต่ละ it block

4. การใช้ only และ skip

only = YES - รันเฉพาะ test case นี้
skip = SKIP - ข้าม test case นี้

การแก้ไขปัญหาที่พบบ่อย

1. Element ไม่พบ

// ใช้ wait เพื่อรอ element
cy.get('#element').should('be.visible');

// ใช้ timeout ที่นานขึ้น
cy.get('#element', { timeout: 10000 });

2. การรอ AJAX

// รอ network request เสร็จ
cy.intercept('GET', '/api/data').as('getData');
cy.wait('@getData');

3. การจัดการ Dynamic Content

// ใช้ contains แทน exact match
cy.contains('button', 'Submit');

// ใช้ regex
cy.get('[data-testid*="user-"]');

สรุป

Chathai Framework ช่วยให้คุณสร้าง Cypress test scripts ได้อย่างง่ายดายจาก Excel templates โดยรองรับทั้งการทดสอบแบบปกติและ Data-Driven Testing การใช้งานที่ถูกต้องจะช่วยให้คุณสร้าง test cases ที่ครอบคลุมและบำรุงรักษาได้ง่าย

สำหรับข้อมูลเพิ่มเติม กรุณาเยี่ยมชม https://docs.chathai.site/

ภาพรวม​

ข้อกำหนดเบื้องต้น​

การติดตั้ง Chathai​

1. ติดตั้ง Chathai CLI​

2. สร้างโปรเจกต์ Cypress​

การใช้งาน Excel Template​

Template ที่พร้อมใช้งาน​

โครงสร้าง Template​

คำสั่ง Cypress ที่รองรับ​

คำสั่งพื้นฐาน​

คำสั่งเพิ่มเติม​

Test Case 1: Simple Test (แบบง่าย)​

วัตถุประสงค์​

โจทย์ที่ 1: ทดสอบการแสดงผล Title​

โจทย์ที่ 2: ทดสอบการคลิกปุ่ม​

คำอธิบาย Test Cases​

โจทย์ที่ 3: ทดสอบการกรอกฟอร์ม (Data-Driven Testing)​

คำอธิบาย Test Case เพิ่มเติม​

การสร้าง Excel Template​

การสร้าง Test Script​

วิธีที่ 1: ใช้ Google Sheets Template​

วิธีที่ 2: สร้าง Template ใหม่​

การ Generate Test Script​

ผลลัพธ์ที่ได้​

Test Case 2: Data-Driven Testing (DDT)​

วัตถุประสงค์​

การสร้าง Fixture Data​

การสร้าง Excel Template สำหรับ DDT​

การสร้าง DDT Test Script​

ใช้ Google Sheets Template​

ผลลัพธ์ที่ได้​

การรัน Tests​

1. การเตรียมความพร้อม​

ตรวจสอบโครงสร้างโปรเจกต์​

ตรวจสอบ cypress.config.js​

2. รันในโหมด Headed (มี UI) - แนะนำสำหรับผู้เริ่มต้น​

เปิด Cypress Test Runner​

ขั้นตอนการใช้งาน Cypress UI:​

ฟีเจอร์ใน Cypress UI:​

3. รันในโหมด Headless (ไม่มี UI) - สำหรับ CI/CD​

รัน test ทั้งหมด​

รัน test เฉพาะไฟล์​

รัน test เฉพาะ browser​

รัน test พร้อม options​

4. การรัน Test แบบ Interactive​

รัน test เฉพาะ test case​

รัน test แบบ debug​

5. การดูผลลัพธ์​

ในโหมด Headed​

ในโหมด Headless​

6. การแก้ไขปัญหาการรัน Test​

ปัญหา: Test ไม่พบเว็บไซต์​

ปัญหา: Element ไม่พบ​

ปัญหา: Test ล้มเหลว​

7. การตั้งค่า Environment Variables​

สร้างไฟล์ cypress.env.json​

ใช้งานใน test​

8. การรัน Test แบบ Batch​

สร้างไฟล์ package.json scripts​

รันด้วย npm scripts​

9. การติดตามผลลัพธ์​

ดู test results​

ดู videos และ screenshots​

10. Tips สำหรับการรัน Test​

รัน test อย่างมีประสิทธิภาพ​

การ debug​

เทคนิคและเคล็ดลับ​

1. การใช้ Placeholders ใน DDT​

2. การใช้ Chaining​

3. การใช้ Hooks​

4. การใช้ only และ skip​

การแก้ไขปัญหาที่พบบ่อย​

1. Element ไม่พบ​

2. การรอ AJAX​

3. การจัดการ Dynamic Content​

สรุป​

ภาพรวม

ข้อกำหนดเบื้องต้น

การติดตั้ง Chathai

1. ติดตั้ง Chathai CLI

2. สร้างโปรเจกต์ Cypress

การใช้งาน Excel Template

Template ที่พร้อมใช้งาน

โครงสร้าง Template

คำสั่ง Cypress ที่รองรับ

คำสั่งพื้นฐาน

คำสั่งเพิ่มเติม

Test Case 1: Simple Test (แบบง่าย)

วัตถุประสงค์

โจทย์ที่ 1: ทดสอบการแสดงผล Title

โจทย์ที่ 2: ทดสอบการคลิกปุ่ม

คำอธิบาย Test Cases

โจทย์ที่ 3: ทดสอบการกรอกฟอร์ม (Data-Driven Testing)

คำอธิบาย Test Case เพิ่มเติม

การสร้าง Excel Template

การสร้าง Test Script

วิธีที่ 1: ใช้ Google Sheets Template

วิธีที่ 2: สร้าง Template ใหม่

การ Generate Test Script

ผลลัพธ์ที่ได้

Test Case 2: Data-Driven Testing (DDT)

วัตถุประสงค์

การสร้าง Fixture Data

การสร้าง Excel Template สำหรับ DDT

การสร้าง DDT Test Script

ใช้ Google Sheets Template

ผลลัพธ์ที่ได้

การรัน Tests

1. การเตรียมความพร้อม

ตรวจสอบโครงสร้างโปรเจกต์

ตรวจสอบ cypress.config.js

2. รันในโหมด Headed (มี UI) - แนะนำสำหรับผู้เริ่มต้น

เปิด Cypress Test Runner

ขั้นตอนการใช้งาน Cypress UI:

ฟีเจอร์ใน Cypress UI:

3. รันในโหมด Headless (ไม่มี UI) - สำหรับ CI/CD

รัน test ทั้งหมด

รัน test เฉพาะไฟล์

รัน test เฉพาะ browser

รัน test พร้อม options

4. การรัน Test แบบ Interactive

รัน test เฉพาะ test case

รัน test แบบ debug

5. การดูผลลัพธ์

ในโหมด Headed

ในโหมด Headless

6. การแก้ไขปัญหาการรัน Test

ปัญหา: Test ไม่พบเว็บไซต์

ปัญหา: Element ไม่พบ

ปัญหา: Test ล้มเหลว

7. การตั้งค่า Environment Variables

สร้างไฟล์ cypress.env.json

ใช้งานใน test

8. การรัน Test แบบ Batch

สร้างไฟล์ package.json scripts

รันด้วย npm scripts

9. การติดตามผลลัพธ์

ดู test results

ดู videos และ screenshots

10. Tips สำหรับการรัน Test

รัน test อย่างมีประสิทธิภาพ

การ debug

เทคนิคและเคล็ดลับ

1. การใช้ Placeholders ใน DDT

2. การใช้ Chaining

3. การใช้ Hooks

4. การใช้ only และ skip

การแก้ไขปัญหาที่พบบ่อย

1. Element ไม่พบ

2. การรอ AJAX

3. การจัดการ Dynamic Content

สรุป