Electron Desktop App Development · บทเรียน

การทดสอบ E2E สมัยใหม่ด้วย Playwright

บทเรียน 4 จาก 413 ขั้นตอน

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

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Why Playwright for Electron

Spectron is deprecated. Playwright has first-class Electron support and drives your real app like a user would.

Installing Playwright

Add Playwright as a dev dependency. Its test runner and Electron launcher come bundled.

npm install --save-dev @playwright/test

Launching the App

Use _electron.launch to start your packaged or source app under test control.

const { _electron: electron } = require('playwright');
const app = await electron.launch({ args: ['.'] });

Getting the First Window

firstWindow() returns the renderer page so you can interact with the DOM.

const window = await app.firstWindow();
await window.waitForLoadState('domcontentloaded');

Locating Elements

Use resilient locators based on roles and labels rather than brittle CSS selectors.

function selectorFor(role, name) {
  return 'role=' + role + '[name="' + name + '"]';
}
console.log(selectorFor('button', 'Save'));

Interacting With the UI

Click, type, and assert just like a user.

await window.fill('#title', 'My Note');
await window.click('text=Save');

Assertions

Use expect with auto-waiting matchers so flaky timing issues disappear.

await expect(window.locator('.toast')).toHaveText('Saved');

Evaluating in the Main Process

Playwright can run code in the main process via app.evaluate, letting you assert on app state.

const isPackaged = await app.evaluate(({ app }) => app.isPackaged);

Taking Screenshots

Capture screenshots on failure to debug visually. Playwright does this automatically when configured.

await window.screenshot({ path: 'failure.png' });

Closing Cleanly

Always close the app after each test to avoid leaked processes.

await app.close();

Running in CI

Run E2E tests headlessly in CI on every push. Use a virtual display on Linux runners when needed.

Quick Check

Test your Playwright knowledge.

ตอบคำถามในบทเรียนแบบโต้ตอบ

Recap

You learned modern E2E testing with Playwright: launching the app, grabbing windows, using resilient locators, asserting with auto-waiting matchers, evaluating main-process state, and running in CI.

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 12
บทเรียน: 47

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “การทดสอบ E2E สมัยใหม่ด้วย Playwright” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบ E2E สมัยใหม่ด้วย Playwright”

ทดสอบแอป Electron ตั้งแต่ต้นจนจบด้วย Playwright ซึ่งเป็นเครื่องมือรุ่นใหม่ที่สืบทอดจาก Spectron โดยทำให้หน้าต่างจริงทำงานอัตโนมัติและตรวจสอบพฤติกรรมของส่วนติดต่อผู้ใช้ คุณปฏิบัติ Electron Desktop App Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

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

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

ฉันเขียนและรันโค้ดในบทเรียน Electron Desktop App Development นี้ได้ไหม

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

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

← กลับไปที่ Electron Desktop App Development