Angular Academy · บทเรียน

การเขียนการทดสอบ Playwright

ทำโฟลว์ในเบราว์เซอร์ให้เป็นอัตโนมัติด้วย Playwright

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

การทดสอบ Playwright ครั้งแรก

การทดสอบ Playwright คือฟังก์ชันแบบอะซิงโครนัสที่รับอุปกรณ์ประกอบฉาก เช่น page คุณนำเข้า test และ expect จาก @playwright/test แล้วอธิบายสถานการณ์การใช้งานของผู้ใช้

import { test, expect } from '@playwright/test';

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

อุปกรณ์ประกอบฉาก page

ออบเจ็กต์ page แทนแท็บเบราว์เซอร์หนึ่งแท็บ การทดสอบทุกครั้งจะได้รับ page ใหม่ที่แยกเป็นอิสระในบริบทที่สะอาด จึงไม่มีการแบ่งปันคุกกี้หรือพื้นที่จัดเก็บโดยไม่ได้ตั้งใจ

การนำทางด้วย goto

page.goto(url) จะโหลด URL และรอให้หน้าพร้อมใช้งาน เมื่อใช้ร่วมกับ baseURL ในการกำหนดค่า คุณจะใช้เส้นทางแบบสัมพันธ์ได้

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

การค้นหาองค์ประกอบด้วยตัวระบุตำแหน่ง

ตัวระบุตำแหน่ง คือการอ้างอิงองค์ประกอบแบบประเมินเมื่อจำเป็นและรอโดยอัตโนมัติ ควรเลือกตัวระบุตำแหน่งเชิงความหมาย เช่น getByRole, getByLabel และ getByText แทนตัวเลือก CSS ที่เปราะบาง

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

การพิมพ์และการคลิก

ใช้ fill เพื่อกำหนดค่าของอินพุต และใช้ click เพื่อกดปุ่ม Playwright จะรอโดยอัตโนมัติจนกว่าองค์ประกอบจะมองเห็นและเปิดใช้งานได้ก่อนดำเนินการ

await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();

การรออัตโนมัติช่วยขจัดการหน่วงเวลาที่ไม่แน่นอน

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

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

จัดกลุ่มการทดสอบด้วย describe

ใช้ test.describe เพื่อจัดกลุ่มสถานการณ์ที่เกี่ยวข้อง และใช้ beforeEach เพื่อแบ่งปันการตั้งค่า

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

การทดสอบเส้นทางการใช้งานทั้งหมด

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

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

การเรียกใช้การทดสอบ

เรียกใช้ข้อกำหนดการทดสอบทั้งหมดจาก CLI เพิ่ม --headed เพื่อดูเบราว์เซอร์ หรือเพิ่ม --ui เพื่อเปิดตัวเรียกใช้การทดสอบแบบโต้ตอบของ Playwright

npx playwright test
npx playwright test --headed
npx playwright test --ui

การแก้ไขข้อผิดพลาดจากการทดสอบ

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

npx playwright test --trace on
npx playwright show-trace trace.zip

การแยกการทดสอบมีความสำคัญ

เนื่องจากการทดสอบแต่ละครั้งได้รับบริบทเบราว์เซอร์ของตนเอง อย่าพึ่งพาลำดับหรือสถานะที่ใช้ร่วมกันระหว่างการทดสอบ ให้ตั้งค่าข้อมูลที่การทดสอบต้องใช้ไว้ใน beforeEach ของการทดสอบนั้นเอง หรือภายในตัวการทดสอบ

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

เหตุใดจึงควรหลีกเลี่ยง waitForTimeout

สรุปทบทวน

การทดสอบ Playwright ใช้อุปกรณ์ประกอบฉาก page: ใช้ goto เพื่อนำทาง ใช้ตัวระบุตำแหน่งเชิงความหมาย (getByRole, getByLabel) เพื่อค้นหาองค์ประกอบ และใช้ fill/click เพื่อโต้ตอบ การรออัตโนมัติช่วยขจัดการหน่วงเวลาที่ไม่แน่นอน จัดกลุ่มด้วย describe เรียกใช้ด้วย npx playwright test และแก้ไขข้อผิดพลาดด้วยร่องรอย

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

บทเรียน “การเขียนการทดสอบ Playwright” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเขียนการทดสอบ Playwright”

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

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

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

บทเรียน “การเขียนการทดสอบ Playwright” ใช้เวลานานแค่ไหน

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

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

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

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

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