Angular Academy · บทเรียน

การผสานรวม CI

เรียกใช้การทดสอบ E2E ในการผสานรวมอย่างต่อเนื่อง

การผสานรวม CI เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุผลที่ควรรันการทดสอบ E2E ใน CI

การทดสอบ E2E มีประโยชน์สูงสุดเมื่อรันโดยอัตโนมัติทุกครั้งที่มีการส่งโค้ดหรือสร้างคำขอรวมโค้ด การผสานรวมอย่างต่อเนื่อง (CI) จะตรวจจับการถดถอยก่อนรวมโค้ดเข้าด้วยกัน ทำให้ขั้นตอนการเข้าสู่ระบบที่เสียหายไม่ถูกนำไปถึงระบบจริงโดยไม่มีใครสังเกตเห็น

สิ่งที่ CI ต้องมีเพื่อรันการทดสอบ E2E

งาน CI ต้องติดตั้งสิ่งที่จำเป็น ติดตั้งเบราว์เซอร์ของ Playwright สร้างหรือให้บริการแอป Angular จากนั้นจึงรันการทดสอบในโหมดไร้ส่วนแสดงผล เครื่อง CI ไม่มีหน้าจอ ดังนั้นการทดสอบจึงรันในโหมดไร้ส่วนแสดงผลเป็นค่าเริ่มต้น

การติดตั้งเบราว์เซอร์ใน CI

เบราว์เซอร์จะไม่ถูกส่งเข้าไปในคลังโค้ดของคุณ ให้ติดตั้งเบราว์เซอร์เหล่านั้นในกระบวนการทำงานด้วยตัวติดตั้งของ Playwright รวมถึงสิ่งที่ระบบปฏิบัติการจำเป็นต้องใช้

npm ci
npx playwright install --with-deps

ให้ Playwright เริ่มต้นแอป

การตั้งค่า webServer จะบอกให้ Playwright เปิดแอปก่อนการทดสอบและปิดแอปหลังการทดสอบ ใน CI ให้ตั้งค่า reuseExistingServer: false เพื่อให้เริ่มเซิร์ฟเวอร์ใหม่ทุกครั้ง

// playwright.config.ts
export default {
  webServer: {
    command: 'ng serve --configuration production',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
};

กระบวนการทำงานของ GitHub Actions

กระบวนการทำงานทั่วไปจะดึงโค้ดออกมา ตั้งค่า Node ติดตั้งสิ่งที่จำเป็นและเบราว์เซอร์ จากนั้นรันชุดการทดสอบ

# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test

แฟล็กสำหรับโหมดไร้ส่วนแสดงผลและ CI

Playwright จะตรวจหา CI โดยอัตโนมัติผ่านตัวแปรสภาพแวดล้อม CI และปรับการทำงานดังนี้: รันการทดสอบที่ล้มเหลวซ้ำ ห้ามใช้ test.only และใช้ผู้ปฏิบัติงานหลายตัวอย่างระมัดระวัง นอกจากนี้คุณยังตั้งจำนวนครั้งที่จะลองใหม่ได้อย่างชัดเจน

export default {
  retries: process.env.CI ? 2 : 0,
  forbidOnly: !!process.env.CI,
};

การเผยแพร่รายงาน HTML

Playwright จะสร้างรายงาน HTML ให้อัปโหลดรายงานนี้เป็นอาร์ติแฟกต์ของ CI เพื่อให้ตรวจสอบความล้มเหลวได้หลังการรัน รวมถึงร่องรอยการทำงานและภาพหน้าจอ

      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

การบันทึกร่องรอยเมื่อเกิดความล้มเหลว

กำหนดค่าให้บันทึกร่องรอยเฉพาะเมื่อทดลองใหม่เป็นครั้งแรก วิธีนี้ช่วยให้การรันรวดเร็ว ขณะเดียวกันก็มีการเล่นซ้ำแบบเต็มของความล้มเหลวเพื่อใช้แก้ไขข้อบกพร่อง

export default {
  use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};

การแบ่งชุดการทดสอบเพื่อเพิ่มความเร็ว

ชุดการทดสอบขนาดใหญ่สามารถแบ่งให้เครื่องหลายเครื่องรันแบบขนานกันได้ด้วย --shard งาน CI แต่ละงานจะรันเพียงส่วนหนึ่ง จึงลดเวลารวมที่ใช้จริง

npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3

การใช้แคชเพื่อเร่ง CI

เก็บ node_modules และไบนารีเบราว์เซอร์ของ Playwright ไว้ในแคชระหว่างการรัน เพื่อไม่ให้การติดตั้งใช้เวลาส่วนใหญ่ของการสร้างแอป ผู้ให้บริการ CI ส่วนใหญ่มีการดำเนินการสำหรับแคชที่ใช้ไฟล์ล็อกของคุณเป็นกุญแจ

ทำให้การสร้างแอปล้มเหลวอย่างถูกต้อง

Playwright จะจบการทำงานด้วยรหัสที่ไม่ใช่ศูนย์เมื่อการทดสอบใด ๆ ล้มเหลว ทำให้ CI ระบุว่างานล้มเหลวและป้องกันการรวมโค้ด อย่ากลืนรหัสจบการทำงานนั้นด้วย || true มิฉะนั้นการทดสอบที่เสียหายจะผ่านไปโดยไม่มีการแจ้งเตือน

ตรวจสอบอย่างรวดเร็ว

อะไรติดตั้งเบราว์เซอร์ใน CI

สรุปทบทวน

รัน E2E ทุกครั้งที่ส่งโค้ด โดยติดตั้งสิ่งที่จำเป็นและเบราว์เซอร์ (playwright install --with-deps) ให้ webServer เริ่มต้นแอป และรันในโหมดไร้ส่วนแสดงผลพร้อมการลองใหม่ที่รับรู้ CI อัปโหลดรายงาน HTML และร่องรอยเป็นอาร์ติแฟกต์ แบ่งชุดการทดสอบเพื่อเพิ่มความเร็ว และให้รหัสจบการทำงานที่ไม่ใช่ศูนย์ป้องกันการรวมโค้ดที่มีปัญหา

คำถามที่พบบ่อย

บทเรียน “การผสานรวม CI” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การผสานรวม CI” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การผสานรวม CI”

เรียกใช้การทดสอบ E2E ในการผสานรวมอย่างต่อเนื่อง คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การผสานรวม CI” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy