สิ่งที่ await ทำใน Playwright: อธิบายอย่างชัดเจน!

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

พื้นฐานของการเขียนโปรแกรมแบบอะซิงโครนัส

ก่อนที่จะเจาะลึกถึงรายละเอียดของ await ใน Playwright สิ่งสำคัญคือต้องเข้าใจพื้นฐานของการเขียนโปรแกรมแบบอะซิงโครนัสใน JavaScript

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

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

Playwright คืออะไร

ก่อนที่จะเจาะลึกถึง await และบทบาทของมัน มาทำความเข้าใจ Playwright กันสั้นๆ Playwright เป็นไลบรารี Node.js แบบโอเพนซอร์สที่พัฒนาโดย Microsoft สำหรับการทำงานอัตโนมัติของเว็บเบราว์เซอร์ รองรับ Chromium, Firefox และ WebKit ทำให้เป็นเครื่องมืออเนกประสงค์สำหรับการทดสอบเว็บแอปพลิเคชันในเบราว์เซอร์ต่างๆ

Playwright ช่วยให้นักพัฒนาและผู้ทดสอบสามารถเขียนการทดสอบที่น่าเชื่อถือและมีความเที่ยงตรงสูงได้ เป็นที่รู้จักกันเป็นพิเศษในเรื่องความสามารถในการจัดการแท็บ, iframes และแม้แต่การสกัดกั้นการร้องขอเครือข่าย แต่ในการใช้ประโยชน์จากศักยภาพทั้งหมด การทำความเข้าใจการเขียนโปรแกรมแบบอะซิงโครนัสและคีย์เวิร์ด await เป็นสิ่งสำคัญ

Promises และ Async/Await

JavaScript ใช้ Promises เพื่อจัดการการดำเนินการแบบอะซิงโครนัส Promise แสดงถึงค่าที่อาจไม่พร้อมใช้งานในทันที แต่จะได้รับการแก้ไขในอนาคต ไวยากรณ์ async/await ที่นำมาใช้ใน ECMAScript 2017 มอบวิธีที่อ่านง่ายและจัดการได้ง่ายกว่าในการทำงานกับ Promises

• ฟังก์ชัน async จะส่งคืน Promise เสมอ
• คีย์เวิร์ด await สามารถใช้ได้ภายในฟังก์ชัน async เท่านั้น
• await จะหยุดการดำเนินการของฟังก์ชัน async จนกว่า Promise จะได้รับการแก้ไข

บทบาทของ await ใน Playwright

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

นี่คือสิ่งที่ await ทำใน Playwright:

หยุดการดำเนินการชั่วคราว: เมื่อใช้ await ก่อนการดำเนินการหรือการยืนยัน Playwright จะหยุดการดำเนินการของสคริปต์ชั่วคราวจนกว่าการดำเนินการหรือการยืนยันนั้นจะเสร็จสมบูรณ์

แก้ไข Promises: รอให้ Promise ที่ส่งคืนโดยเมธอด Playwright ได้รับการแก้ไข ทำให้คุณสามารถทำงานกับค่าที่แก้ไขได้โดยตรง

รับประกันลำดับที่เหมาะสม: ช่วยรักษาลำดับการดำเนินการที่ถูกต้อง ทำให้มั่นใจได้ว่าการดำเนินการหนึ่งเสร็จสิ้นก่อนที่จะไปยังรายการถัดไป

จัดการข้อผิดพลาด: หาก Promise ที่รอคอยถูกปฏิเสธ await จะส่งข้อยกเว้น ทำให้คุณสามารถจับและจัดการข้อผิดพลาดได้อย่างมีประสิทธิภาพ

ตัวอย่างการใช้งานจริงของ await ใน Playwright

มาสำรวจสถานการณ์ทั่วไปบางอย่างที่ใช้ await ในสคริปต์ Playwright:

1. การนำทาง

test('Navigate to a page', async ({ page }) => {
  await page.goto('https://example.com');
  // The script waits until the page is loaded before proceeding
});

ในตัวอย่างนี้ await ช่วยให้มั่นใจได้ว่าการนำทางเสร็จสมบูรณ์ก่อนที่การทดสอบจะดำเนินต่อไป

2. การโต้ตอบกับองค์ประกอบ

test('Click a button', async ({ page }) => {
  await page.click('#submit-button');
  // The script waits for the click action to complete
});

ในที่นี้ await ช่วยให้มั่นใจได้ว่าการดำเนินการคลิกจะถูกดำเนินการอย่างสมบูรณ์ก่อนที่จะไปยังรายการถัดไป

3. การรอองค์ประกอบ

test('Wait for element to be visible', async ({ page }) => {
  await page.waitForSelector('#dynamic-content');
  // The script pauses until the element is visible
});

ในกรณีนี้ await จะหยุดสคริปต์ชั่วคราวจนกว่าองค์ประกอบที่ระบุจะมองเห็นได้บนหน้า

4. การยืนยัน

test('Check page title', async ({ page }) => {
  await expect(page).toHaveTitle('Expected Title');
  // The assertion is evaluated asynchronously
});

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

ความสำคัญของ await ใน Playwright

การใช้ await อย่างถูกต้องใน Playwright เป็นสิ่งสำคัญด้วยเหตุผลหลายประการ:

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

ความน่าเชื่อถือ: ด้วยการรอให้การดำเนินการเสร็จสิ้น await ทำให้การทดสอบมีความน่าเชื่อถือมากขึ้นและมีแนวโน้มที่จะเกิดความผิดพลาดน้อยลง

การจัดการข้อผิดพลาด: ช่วยให้สามารถเผยแพร่ข้อผิดพลาดได้อย่างเหมาะสม ทำให้ง่ายต่อการระบุและแก้ไขปัญหาในการทดสอบของคุณ

การอ่านได้: await ทำให้โค้ดอะซิงโครนัสอ่านง่ายขึ้นและเข้าใจง่ายขึ้น เนื่องจากช่วยให้คุณสามารถเขียนโค้ดอะซิงโครนัสในลักษณะที่เป็นเชิงเส้นและดูเหมือนซิงโครนัสมากขึ้น

ข้อผิดพลาดทั่วไปและแนวทางปฏิบัติที่ดีที่สุด

ในขณะที่ await มีประสิทธิภาพ มีข้อผิดพลาดทั่วไปบางประการที่ควรหลีกเลี่ยงและแนวทางปฏิบัติที่ดีที่สุดที่ควรปฏิบัติตาม:

1. ลืมใช้ await

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

ไม่ถูกต้อง:

test('Incorrect usage', async ({ page }) => {
  page.click('#button'); // This is incorrect
  expect(page.locator('#result')).toBeVisible();
});

ถูกต้อง:

test('Correct usage', async ({ page }) => {
  await page.click('#button');
  await expect(page.locator('#result')).toBeVisible();
});

2. การใช้ await มากเกินไป

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

ประสิทธิภาพน้อยกว่า:

test('Sequential execution', async ({ page }) => {
  await page.fill('#field1', 'value1');
  await page.fill('#field2', 'value2');
  await page.fill('#field3', 'value3');
});

มีประสิทธิภาพมากกว่า:

test('Parallel execution', async ({ page }) => {
  const [field1, field2, field3] = await Promise.all([
    page.fill('#field1', 'value1'),
    page.fill('#field2', 'value2'),
    page.fill('#field3', 'value3')
  ]);
});

3. การใช้ await นอกฟังก์ชัน Async

โปรดจำไว้ว่า await สามารถใช้ได้ภายในฟังก์ชัน async เท่านั้น การใช้งานภายนอกจะส่งผลให้เกิดข้อผิดพลาดทางไวยากรณ์

ไม่ถูกต้อง:

test('Incorrect usage', ({ page }) => {
  await page.goto('https://example.com'); // This will cause an error
});

ถูกต้อง:

test('Correct usage', async ({ page }) => {
  await page.goto('https://example.com');
});

4. การจัดการข้อผิดพลาด

ใช้บล็อก try-catch หรือเมธอด .catch() เสมอเพื่อจัดการข้อผิดพลาดที่อาจเกิดขึ้นเมื่อใช้ await

test('Error handling', async ({ page }) => {
  try {
    await page.click('#non-existent-button');
  } catch (error) {
    console.error('An error occurred:', error);
  }
});

การใช้งานขั้นสูงของ await ใน Playwright

เมื่อคุณมีความเชี่ยวชาญมากขึ้นกับ Playwright คุณจะพบกับสถานการณ์ขั้นสูงเพิ่มเติมที่ await มีบทบาทสำคัญ:

1. การยืนยันแบบกำหนดเอง

เมื่อสร้างการยืนยันแบบกำหนดเอง คุณอาจต้องใช้ await เพื่อจัดการการดำเนินการแบบอะซิงโครนัสภายในตรรกะการยืนยัน

expect.extend({
  async toHaveCorrectApiResponse(page, expectedResponse) {
    const response = await page.evaluate(() => fetchApiData());
    return {
      pass: JSON.stringify(response) === JSON.stringify(expectedResponse),
      message: () => `Expected API response to match ${expectedResponse}`
    };
  }
});

test('Custom assertion', async ({ page }) => {
  await expect(page).toHaveCorrectApiResponse({ status: 'success' });
});

2. การจัดการ Promises หลายรายการ

ในสถานการณ์ที่ซับซ้อน คุณอาจต้องจัดการ Promises หลายรายการพร้อมกัน เมธอด Promise.all() รวมกับ await มีประโยชน์ในกรณีดังกล่าว

test('Handle multiple promises', async ({ page }) => {
  const [navigationPromise, dialogPromise] = await Promise.all([
    page.waitForNavigation(),
    page.waitForEvent('dialog'),
    page.click('#submit-button')
  ]);

  await dialogPromise.accept();
  await navigationPromise;
});

3. การรอแบบมีเงื่อนไข

บางครั้ง คุณอาจต้องรอเงื่อนไขที่อาจเกิดขึ้นหรือไม่เกิดขึ้นก็ได้ คุณสามารถใช้ try-catch กับการหมดเวลาเพื่อจัดการกับสถานการณ์ดังกล่าว

test('Conditional waiting', async ({ page }) => {
  try {
    await page.waitForSelector('#popup', { timeout: 5000 });
    await page.click('#close-popup');
  } catch (error) {
    // Popup didn't appear, continue with the test
  }
});

การรวม Playwright กับ Apidog

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

การส่ง API ของคุณด้วย Apidog

ตอนนี้คุณมี API ที่ใช้งานได้และ React frontend แล้ว ก็ถึงเวลาทดสอบ API ของคุณ Apidog เป็นเครื่องมือที่ยอดเยี่ยมสำหรับสิ่งนี้

ขั้นตอนที่ 1: เปิด Apidog และสร้าง request ใหม่

ขั้นตอนที่ 2: ในตัวแก้ไขการทดสอบ ป้อน URL ของ endpoint API ของคุณ เลือกเมธอด HTTP และเพิ่มส่วนหัว พารามิเตอร์ หรือข้อมูลเนื้อหาที่คุณต้องการ ตัวอย่างเช่น คุณสามารถทดสอบเส้นทางที่ส่งคืนข้อความง่ายๆ ที่เราสร้างขึ้นก่อนหน้านี้:

ขั้นตอนที่ 3: คลิกที่ปุ่ม Send และดูผลลัพธ์ของการทดสอบของคุณ คุณควรเห็นรหัสสถานะ เวลาตอบสนอง และเนื้อหาการตอบสนองของ API ของคุณ ตัวอย่างเช่น คุณควรเห็นสิ่งนี้:

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

บทสรุป

การทำความเข้าใจว่า await ทำอะไรใน Playwright เป็นสิ่งสำคัญสำหรับการเขียนการทดสอบที่มีประสิทธิภาพและเชื่อถือได้ ด้วยการใช้ async/await คุณสามารถมั่นใจได้ว่าแต่ละขั้นตอนของสคริปต์การทดสอบของคุณจะดำเนินการตามลำดับที่ถูกต้อง ป้องกันปัญหาที่อาจเกิดขึ้น และปรับปรุงความสามารถในการบำรุงรักษาการทดสอบของคุณ

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