ماذا تفعل Await في Playwright؟ شرح واضح!

Playwright هو إطار عمل قوي للأتمتة لمتصفحات الويب يسمح للمطورين بكتابة اختبارات موثوقة وفعالة لتطبيقات الويب. واحدة من الميزات الأساسية لـ Playwright هي طبيعته غير المتزامنة، مما يمكّنه من التعامل مع عمليات متعددة في وقت واحد. في قلب هذا السلوك غير المتزامن يوجد الكلمة الرئيسية await، التي تلعب دورًا حاسمًا في إدارة تدفق العمليات غير المتزامنة في نصوص Playwright.

أساسيات البرمجة غير المتزامنة

قبل التعمق في تفاصيل await في Playwright، من الضروري فهم أساسيات البرمجة غير المتزامنة في JavaScript.

في البرمجة المتزامنة التقليدية، يتم تنفيذ العمليات واحدة تلو الأخرى، مع كل عملية تعوق تنفيذ التالية حتى تكتمل. يمكن أن يؤدي ذلك إلى مشاكل في الأداء، خاصة عند التعامل مع المهام التي تستغرق وقتًا طويلاً مثل طلبات الشبكة أو عمليات الملفات.

تسمح البرمجة غير المتزامنة ببدء عمليات متعددة دون انتظار اكتمال السابقة. هذا النهج غير المعيق يحسن الأداء والاستجابة، خاصة في السيناريوهات التي تتضمن عمليات إدخال/إخراج أو موارد خارجية.

ما هو Playwright؟

قبل التعمق في await ودوره، دعونا نتحدث بإيجاز عن ما هو Playwright. Playwright هو مكتبة مفتوحة المصدر لـ Node.js تم تطويرها بواسطة Microsoft لأتمتة متصفحات الويب. يدعم Chromium وFirefox وWebKit، مما يجعله أداة متعددة الاستخدامات لاختبار تطبيقات الويب عبر متصفحات مختلفة.

يمكن لـ Playwright تمكين المطورين والمختبرين من كتابة اختبارات عالية الدقة وموثوقة. وهو معروف بشكل خاص بقدرته على التعامل مع علامات تبويب متعددة وiframes وحتى اعتراض طلبات الشبكة. ولكن لتحقيق أقصى استفادة منه، من الضروري فهم البرمجة غير المتزامنة وكلمة await.

الوعود وAsync/Await

تستخدم JavaScript الوعود للتعامل مع العمليات غير المتزامنة. تمثل الوعد قيمة قد لا تكون متاحة على الفور ولكن سيتم حلها في وقت ما في المستقبل. توفر صياغة async/await، التي تم تقديمها في ECMAScript 2017، طريقة أكثر قراءة وإدارة للعمل مع الوعود.

• دالة async تعيد دائمًا وعدًا.
• يمكن استخدام الكلمة الرئيسية await فقط داخل دالة async.
• تؤجل await تنفيذ دالة async حتى يتم حل الوعد.

دور await في Playwright

في Playwright، العديد من العمليات غير متزامنة بطبيعتها. تشمل هذه التنقل إلى صفحة، والتفاعل مع العناصر، والانتظار لشرط معين ليتم الوفاء به. تُستخدم الكلمة الرئيسية await بشكل واسع في نصوص Playwright للتعامل مع هذه العمليات غير المتزامنة بفعالية.

إليك ما تفعله await في Playwright:

توقف التنفيذ: عندما يتم استخدام await قبل إجراء أو تأكيد في Playwright، فإنه يوقف تنفيذ النص حتى يتم الانتهاء من ذلك الإجراء أو التأكيد.

حل الوعود: ينتظر الوعد الذي تم إرجاعه بواسطة طريقة Playwright ليتم حله، مما يتيح لك العمل مع القيمة المحلولة مباشرة.

ضمان التسلسل الصحيح: يساعد في الحفاظ على الترتيب الصحيح للعمليات، مما يضمن أن يتم إكمال إجراء واحد قبل الانتقال إلى التالي.

التعامل مع الأخطاء: إذا تم رفض الوعد الذي تم الانتظار عليه، فإن await يثير استثناءً، مما يسمح لك بالتقاط الأخطاء والتعامل معها بفعالية.

أمثلة عملية على await في Playwright

دعنا نستكشف بعض السيناريوهات الشائعة حيث يتم استخدام await في نصوص Playwright:

1. التنقل

test('التنقل إلى صفحة', async ({ page }) => {
  await page.goto('https://example.com');
  // ينتظر النص حتى يتم تحميل الصفحة قبل الاستمرار
});

في هذا المثال، يضمن await أن يكون التنقل قد اكتمل قبل أن يتابع الاختبار.

2. التفاعل مع العناصر

test('نقر على زر', async ({ page }) => {
  await page.click('#submit-button');
  // ينتظر النص حتى يكتمل إجراء النقر
});

هنا، يضمن await أن يتم تنفيذ إجراء النقر بالكامل قبل الانتقال.

3. الانتظار للعناصر

test('انتظر حتى تصبح العنصر مرئيًا', async ({ page }) => {
  await page.waitForSelector('#dynamic-content');
  // يتوقف النص حتى يصبح العنصر مرئيًا
});

في هذه الحالة، توقف await النص حتى يصبح العنصر المحدد مرئيًا على الصفحة.

4. التأكيدات

test('التحقق من عنوان الصفحة', async ({ page }) => {
  await expect(page).toHaveTitle('العنوان المتوقع');
  // يتم تقييم التأكيد بشكل غير متزامن
});

يتم استخدام await مع التأكيدات لضمان تقييمها بشكل صحيح، وانتظار تحقق الشرط أو انتهاء المهلة إذا لم يتم ذلك.

أهمية await في Playwright

استخدام await بشكل صحيح في Playwright أمر حيوي لعدة أسباب:

التزامن: يساعد في تزامن العمليات غير المتزامنة، مما يمنع حدوث مشاكل تنافسية ويضمن تنفيذ الإجراءات بالترتيب المقصود.

الموثوقية: من خلال الانتظار حتى تكتمل العمليات، تجعل await الاختبارات أكثر موثوقية وأقل عرضة للتقلبات.

التعامل مع الأخطاء: يسمح بالتوزيع الصحيح للأخطاء، مما يسهل التعرف على المشكلات وتصحيحها في اختباراتك.

سهولة القراءة: تجعل await الكود غير المتزامن أكثر قابلية للقراءة وأسهل للفهم، حيث يتيح لك كتابة الكود غير المتزامن بطريقة أكثر خطية تشبه التزامن.

الأخطاء الشائعة وأفضل الممارسات

بينما يعتبر await قويًا، هناك بعض الأخطاء الشائعة التي يجب تجنبها وأفضل الممارسات التي يجب اتباعها:

1. نسيان استخدام await

واحدة من أكثر الأخطاء شيوعًا هي نسيان استخدام await قبل عملية غير متزامنة. يمكن أن يؤدي ذلك إلى سلوك غير متوقع ومشاكل تنافسية.

غير صحيح:

test('استخدام غير صحيح', async ({ page }) => {
  page.click('#button'); // هذا غير صحيح
  expect(page.locator('#result')).toBeVisible();
});

صحيح:

test('استخدام صحيح', async ({ page }) => {
  await page.click('#button');
  await expect(page.locator('#result')).toBeVisible();
});

2. الإفراط في استخدام await

بينما من المهم استخدام await للعمليات غير المتزامنة، فإن الإفراط في استخدامها يمكن أن يؤدي إلى تنفيذ تسلسلي غير ضروري، مما يقلل من فوائد البرمجة غير المتزامنة.

أقل كفاءة:

test('تنفيذ تسلسلي', async ({ page }) => {
  await page.fill('#field1', 'value1');
  await page.fill('#field2', 'value2');
  await page.fill('#field3', 'value3');
});

أكثر كفاءة:

test('تنفيذ متوازي', async ({ page }) => {
  const [field1, field2, field3] = await Promise.all([
    page.fill('#field1', 'value1'),
    page.fill('#field2', 'value2'),
    page.fill('#field3', 'value3')
  ]);
});

3. استخدام await خارج الدوال غير المتزامنة

تذكر أن await يمكن استخدامه فقط داخل دوال async. استخدامه خارج ذلك سيؤدي إلى خطأ في بناء الجملة.

غير صحيح:

test('استخدام غير صحيح', ({ page }) => {
  await page.goto('https://example.com'); // سيتسبب هذا في حدوث خطأ
});

صحيح:

test('استخدام صحيح', async ({ page }) => {
  await page.goto('https://example.com');
});

4. التعامل مع الأخطاء

استخدم دائمًا كتل try-catch أو طرق .catch() للتعامل مع الأخطاء المحتملة عند استخدام await.

test('التعامل مع الأخطاء', async ({ page }) => {
  try {
    await page.click('#non-existent-button');
  } catch (error) {
    console.error('حدث خطأ:', 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: () => `كان من المتوقع أن يتطابق استجابة API مع ${expectedResponse}`
    };
  }
});

test('تأكيد مخصص', async ({ page }) => {
  await expect(page).toHaveCorrectApiResponse({ status: 'success' });
});

2. التعامل مع عدة وعود

في السيناريوهات المعقدة، قد تحتاج إلى التعامل مع عدة وعود في وقت واحد. تعتبر طريقة Promise.all()، بالمشاركة مع await، مفيدة في مثل هذه الحالات.

test('التعامل مع عدة وعود', 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('الانتظار الشرطي', async ({ page }) => {
  try {
    await page.waitForSelector('#popup', { timeout: 5000 });
    await page.click('#close-popup');
  } catch (error) {
    // لم تظهر النافذة المنبثقة، تابع مع الاختبار
  }
});

دمج Playwright مع Apidog

يمكن أن يأخذ دمج Playwright مع Apidog اختبارك إلى المستوى التالي. يوفر Apidog أدوات تصميم API قوية، ومعلومات توثيق، وأدوات اختبار يمكن أن تكمل اختباراتك في Playwright، مما يضمن أن تطبيق الويب الخاص بك يعمل بشكل صحيح على كل من الواجهة الأمامية والخلفية.

إرسال API الخاص بك مع Apidog

الآن بعد أن لديك API عامل وواجهة أمامية React، حان الوقت لاختبار API الخاص بك. Apidog هو أداة رائعة لذلك.

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.

الخطوة 2: في محرر الاختبار، أدخل عنوان URL الخاص بنقطة نهاية API، وحدد طريقة HTTP، وأضف أي رؤوس أو معلمات أو بيانات جسم تحتاجها. على سبيل المثال، يمكنك اختبار المسار الذي يعيد رسالة بسيطة أنشأناها سابقًا:

الخطوة 3: اضغط على زر الإرسال وشاهد نتيجة الاختبار الخاص بك. يجب أن ترى رمز الحالة، ووقت الاستجابة، وجسم الاستجابة الخاص بـ API. يجب أن ترى شيئًا مثل هذا:

يعد Apidog أداة رائعة لاختبار واجهات برمجة التطبيقات الخاصة بك، حيث يساعدك في ضمان الجودة والموثوقية والأداء لخدمات الويب الخاصة بك. كما أنه يوفر لك الوقت والجهد، حيث لا تحتاج لكتابة أي رمز أو تثبيت أي برنامج لاختبار واجهات برمجة التطبيقات الخاصة بك. يمكنك فقط استخدام متصفحك والاستمتاع بالواجهة سهلة الاستخدام وميزات Apidog.

الخاتمة

فهم ما تفعله await في Playwright أمر حيوي لكتابة اختبارات فعالة وموثوقة. من خلال الاستفادة من async/await، يمكنك التأكد من أن كل خطوة في نص اختبارك تُنفذ بالترتيب الصحيح، مما يمنع المشاكل المحتملة ويحسن من قابلية صيانة اختباراتك.

تذكر تحميل Apidog مجانًا لتعزيز مجموعة أدوات اختبارك بشكل أكبر. معًا، ستتمكن Playwright وApidog من توفير حل شامل لاختبار كل من الواجهة الأمامية والخلفية.