การทดสอบแบบ End-to-End (E2E) 

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

ตั้งแต่ ล็อกอิน → เพิ่มสินค้าลงตะกร้า → เช็คเอาท์ → ยืนยันคำสั่งซื้อ

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

import {

 LoginPage,

 CartPage,

 CheckoutPage,

 CompletePage,

 OverviewPage

} from "../Fixtures/page";

test.describe("Order product E2E Testing", () => {

 let loginPage, cartPage, checkoutPage, overviewPage, completePage;

 test.beforeEach(async ({ page }) => {

   loginPage = new LoginPage(page);

   cartPage = new CartPage(page);

   checkoutPage = new CheckoutPage(page);

   overviewPage = new OverviewPage(page);

   completePage = new CompletePage(page);

   await page.goto("https://www.saucedemo.com/");

   await loginPage.login("standard_user", "secret_sauce");

   await cartPage.clickMenu();

   await cartPage.clearShopCart();

 });

 test("Checkout Flow", async () => {

   // Add items to cart

   await cartPage.addItemsToCart();

   await cartPage.clickShopCart();

   // Verify cart badge

   const badge = await cartPage.verifyCartBadge();

   expect(badge, "Cart badge should show 6 items").toEqual("6");

   // Checkout

   await checkoutPage.clickCheckout();

   await checkoutPage.checkout("Jom", "Diesel", "1234");

   await checkoutPage.clickContinue();

   await overviewPage.clickFinish();

   // Verify completion message

   const msg = await completePage.verifyComplete();

   expect(msg, "Order confirmation message should be correct").toEqual(

     "Thank you for your order!"

   );

 });

});

1.การนำเข้า (Import Modules)

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

import {

 LoginPage,

 CartPage,

 CheckoutPage,

 CompletePage,

 OverviewPage

} from "../Fixtures/page";

เราใช้  import { test, expect } from "@playwright/test"; เพื่อดึง function มาใช้งาน

นำเข้าไฟล์ที่เป็น Page Objects (LoginPage, CartPage, CheckoutPage, CompletePage, OverviewPage) จากโฟลเดอร์ ../Fixtures/page

Page Object Model (POM) ช่วยให้โค้ดเป็นระเบียบ โดยแยกโค้ดที่เกี่ยวข้องกับแต่ละหน้าออกเป็นคลาส ทำให้สามารถเรียกใช้งานแต่ละหน้าได้ง่ายขึ้น

2.การกำหนดโครงสร้างการทดสอบ (Test Suite Setup)

test.describe("Order product E2E Testing", () => {

 let loginPage, cartPage, checkoutPage, overviewPage, completePage;

ใช้ test.describe("Order product E2E Testing", () => { ... }) เพื่อสร้าง Test Suite ซึ่งเป็นกลุ่มของการทดสอบที่เกี่ยวข้องกัน

กำหนดตัวแปรสำหรับหน้าเว็บต่าง ๆ (loginPage, cartPage, checkoutPage, overviewPage, completePage) เพื่อให้สามารถเรียกใช้งานได้ตลอดการทดสอบ

3.การเตรียมการก่อนการทดสอบ (Test Setup with beforeEach) เช่น วิดพื้น ปั่นจิ้งหรีด อ่าล้อเล่น

 test.beforeEach(async ({ page }) => {

   loginPage = new LoginPage(page);

   cartPage = new CartPage(page);

   checkoutPage = new CheckoutPage(page);

   overviewPage = new OverviewPage(page);

   completePage = new CompletePage(page);

   await page.goto("https://www.saucedemo.com/");

   await loginPage.login("standard_user", "secret_sauce");

   await cartPage.clickMenu();

   await cartPage.clearShopCart();

 });

• ใช้ test.beforeEach(async ({ page }) => { ... }) เพื่อกำหนด การตั้งค่าก่อนเริ่มทดสอบแต่ละครั้ง

• สิ่งที่เกิดขึ้นใน beforeEach:

  1. สร้างอินสแตนซ์ของแต่ละหน้า (LoginPage, CartPage, CheckoutPage, OverviewPage, CompletePage)

  2. ไปที่เว็บไซต์ SauceDemo → await page.goto("https://www.saucedemo.com/");

  3. เข้าสู่ระบบ ด้วย loginPage.login("standard_user", "secret_sauce");

  4. เคลียร์สินค้าทั้งหมดในตะกร้า ด้วย cartPage.clearShopCart();

4. ทดสอบการ Checkout (Test Case: Checkout Flow)

test("Checkout Flow", async () => { }

• ใช้ test("Checkout Flow", async () => { ... }) เพื่อสร้าง Test Case สำหรับการสั่งซื้อสินค้า

4.1 เพิ่มสินค้าในตะกร้า

   // Add items to cart

   await cartPage.addItemsToCart();

   await cartPage.clickShopCart();

• ใช้ await cartPage.addItemsToCart(); เพื่อ เพิ่มสินค้าลงตะกร้า

• ใช้ await cartPage.clickShopCart(); เพื่อ คลิกไปที่ตะกร้าสินค้า

4.2 ตรวจสอบว่ามีสินค้าในตะกร้ากี่ชิ้น

   // Verify cart badge

   const badge = await cartPage.verifyCartBadge();

   expect(badge, "Cart badge should show 6 items").toEqual("6");

• ใช้ await cartPage.verifyCartBadge(); เพื่อตรวจสอบ จำนวนสินค้าที่แสดงบนไอคอนตะกร้า

• ใช้ expect(badge).toEqual("6"); เพื่อตรวจสอบว่า ควรมี 6 รายการในตะกร้า

  • ถ้าค่าที่ได้ไม่ใช่ "6" ก็ได้รับ error เนื่องจากค่าที่ได้ไม่ตรงกับ expected

4.3 เริ่มต้นการเช็คเอาท์

   // Checkout

   await checkoutPage.clickCheckout();

   await checkoutPage.checkout("Jom", "Diesel", "1234");

   await checkoutPage.clickContinue();

   await overviewPage.clickFinish();

• await checkoutPage.clickCheckout(); → คลิกที่ปุ่ม "Checkout"

• await checkoutPage.checkout("Jom", "Diesel", "1234"); → กรอกข้อมูลผู้ใช้ (ชื่อ, นามสกุล, รหัสไปรษณีย์)

• await checkoutPage.clickContinue(); → คลิก "Continue" ไปยังหน้า OverviewPage ต่อไป

4.4 ดำเนินการสั่งซื้อ

await overviewPage.clickFinish();

• await overviewPage.clickFinish(); → กดปุ่ม "Finish" เพื่อยืนยันการสั่งซื้อ

4.5 ตรวจสอบข้อความยืนยัน

   const msg = await completePage.verifyComplete();

   expect(msg, "Order confirmation message should be correct").toEqual(

     "Thank you for your order!"

   );

• ใช้ await completePage.verifyComplete(); เพื่อรับ ข้อความยืนยันคำสั่งซื้อ

• ใช้ expect(msg).toEqual("Thank you for your order!"); เพื่อตรวจสอบว่าข้อความถูกต้อง

และผลลัพธ์ก็ตามด้านล่างเลยฮ่ะ ท่านผู้โชมมม ⏬