ลดเวลาเขียนเทสต์ บันทึกการใช้งานจริงใน Chrome แล้วแปลงเป็นโค้ดได้เลย

สวัสดีครับ เพื่อนๆ โปรแกรมเมอร์ทุกคน

วันนี้ผมมีเทคนิคเจ๋งๆ ที่จะช่วยให้เพื่อนๆ ทำ Automated Test กับเว็บไชต์ได้แบบไม่ต้องเขียนโค้ดเยอะเลยครับ มันคือการใช้ Chrome DevTools Recorder นี่แหละครับ แถมยังเอาไปต่อยอดกับ Puppeteer ได้ง่ายๆ ด้วยนะ

เรามาลองดูวิธีใช้งานกันเลยดีกว่าครับ

ขั้นตอนแรก: เริ่มต้นบันทึกการใช้งาน

ไปที่ Chrome Dev Tool โดยการ กด F12 หรือ คลิกขวาที่หน้าเว็บ ที่เราต้องการทำ Automated Test นะครับ จากนั้นก็เลือก Inspect หรือ ตรวจสอบ ได้เลยครับ

แล้วก็มองหาเมนูที่เขียนว่า Recorder ครับ จากนั้นให้กด Create a new recorder แบบนี้นะครับ

เราจะตั้งชื่อให้มันสักหน่อยครับ เพื่อให้งานต่อการนำมาใช้งานภายหลัง เช่น "ทดสอบส่งแบบฟอร์ม จองโรงแรม" แบบนี้นะครับ ง่ายๆ เลยครับ

จากนั้นก็กดปุ่มบันทึกสีแดงๆ ได้เลยครับ เริ่มบันทึกกันเลย!

ขั้นตอนที่สอง: ทดสอบการใช้งานเว็บตามปกติ

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

เสร็จแล้วก็กดหยุดการบันทึกได้เลยครับ เป็นอันจบขั้นตอนการบันทึกแล้วครับ

ขั้นตอนที่สาม: ลองเล่นซ้ำและแก้ไขข้อมูล

หลังจากที่เราบันทึกเสร็จแล้ว ลองเล่นการทดสอบซ้ำอีกครั้งดูนะครับ

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

จากนั้นลองกด Replay ตรงมุมขวาบนดูครับ จะเห็นว่ามันรันซ้ำให้เราเลยนะ เจ๋งมากครับ

ขั้นตอนสุดท้าย: ส่งออกเป็นโค้ด Puppeteer

สุดยอดเลยนะครับเทคนิคนี้ เพื่อนๆ สามารถนำไปใช้กับการทดสอบระบบของตัวเองได้เลยครับ

ถ้าอยากจะเอาไปเขียนโค้ดต่อยอดใน Puppeteer ก็ทำได้ง่ายๆ ครับ ไปที่รายการที่เราบันทึกไว้ จากนั้นกดที่รูปดาวน์โหลด (Export) แล้วก็เลือก Puppeteer ได้เลยครับ แค่นี้เราก็ได้โค้ดสวยๆ ไปใช้เขียนโค้ดเพิ่มเติมต่อได้แล้วครับ ดูตัวอย่างโค้ดแบบนี้เลยนะ:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const timeout = 5000;
  page.setDefaultTimeout(timeout);

  {
    const targetPage = page;
    await targetPage.setViewport({
      width: 1391,
      height: 777
    });
  }
  {
    const targetPage = page;
    const promises = [];
    promises.push(targetPage.waitForNavigation());
    await targetPage.goto('https://ci3.net/test-form'); // ลิ้งค์สำหรับทดสอบ
    await Promise.all(promises);
  }
  {
    const targetPage = page;
    await targetPage.type('#name', 'คุณชัยวัฒน์ ทดสอบ'); // แก้ไขชื่อตรงนี้ได้เลย
  }
  {
    const targetPage = page;
    await targetPage.type('#phone', '0812345678');
  }
  {
    const targetPage = page;
    await targetPage.click('button[type="submit"]');
  }

  await browser.close();
})();

เพื่อนๆ คนไหนอยากจะลองทดสอบ จากไฟล์ที่ผู้เขียนได้ทดลองทดให้ดูในบทความนี้ สามารถดาวน์โหลดไฟล์แล้วนำไป import เข้า Chrome ของเพื่อนๆ ดูได้เลยนะครับ จากนั้นไปที่หน้านี้ เพื่อลองทดสอบดูกันครับ "แบบฟอร์มสำหรับทดสอบ Automated Test" https://ci3.net/test-form

ผมหวังว่าบทความนี้จะเป็นประโยชน์กับเพื่อนๆ นะครับ ไว้เจอกันใหม่บทความหน้าครับ!