كيفية أتمتة اختبار المتصفح باستخدام السيلينيوم في جافا سكريبت

يعد اختبار المتصفح الآلي أمرًا ضروريًا لأي مطور ويب للتأكد من أن تطبيقاته تعمل بشكل صحيح. في هذا المنشور، سنتعرف على كيفية إعداد السيلينيوم باستخدام JavaScript لأتمتة مهمة متصفح بسيطة: فتح صفحة ويب والنقر فوق زر.

المتطلبات الأساسية

للمتابعة، ستحتاج إلى:

• تم تثبيت Node.js وnpm.
• تم تثبيت Google Chrome وChromeDriver (أو متصفح آخر وبرنامج التشغيل الخاص به).

الخطوة 1: قم بإعداد مشروعك

أولاً، قم بإنشاء مجلد جديد لمشروعك. افتح المحطة الطرفية الخاصة بك وقم بتشغيل:

mkdir selenium-test
cd selenium-test

بعد ذلك، قم بتهيئة مشروع Node.js جديد:

npm init -y

يُنشئ هذا الأمر ملف package.json الذي يتتبع تبعيات مشروعك.

الخطوة 2: تثبيت برنامج تشغيل الويب السيلينيوم

سنستخدم npm لتثبيت Selenium WebDriver وChromeDriver:

npm install selenium-webdriver chromedriver --save

توفر هذه الحزم المكتبات والأدوات اللازمة لتشغيل Chrome تلقائيًا باستخدام السيلينيوم.

الخطوة 3: اكتب نص السيلينيوم الخاص بك

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

const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

// Helper function to pause the script
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest() {
  // Configure Chrome to suppress unwanted prompts
  let options = new chrome.Options();
  options.addArguments('--no-default-browser-check', '--no-first-run', '--disable-default-apps', '--disable-infobars');

  let driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(options)
    .build();

  try {
    // Open the target webpage
    await driver.get('https://example.com'); // Change this URL to the site you want to test

    // Wait for an element to load
    await driver.wait(until.elementLocated(By.className('sample-class')), 10000);
    console.log('Found element with class "sample-class".');

    // Generic wait for 6 seconds to handle any dynamic content
    await sleep(6000);

    // Wait for the button to be clickable
    await driver.wait(until.elementLocated(By.id('sample-button')), 10000);

    // Re-locate the button to ensure it’s still in the DOM
    let button = await driver.findElement(By.id('sample-button'));
    console.log('Button located:', button);

    // Click the button
    await button.click();
    console.log('Button clicked successfully.');

    // Wait for the next page or action to load
    await driver.wait(until.urlContains('new-page'), 10000);
    console.log('Navigation to new page was successful.');

  } catch (error) {
    console.error('Error during the test:', error);
  } finally {
    // Always close the browser
    await driver.quit();
  }
}

runTest();

الخطوة 4: تشغيل البرنامج النصي

لتنفيذ البرنامج النصي، قم بتشغيل:

node test.js

سيفتح Chrome وينفذ الإجراءات المحددة في البرنامج النصي الخاص بك. شاهد وحدة التحكم للحصول على سجلات تشير إلى تقدم كل خطوة.

استكشاف الأخطاء وإصلاحها

• StaleElementReferenceError: يحدث هذا عندما يتغير DOM بعد العثور على عنصر. لتجنب ذلك، قم دائمًا بإعادة تحديد موقع العناصر مباشرةً قبل التفاعل معها.
• المهلة: إذا استغرق تحميل العنصر وقتًا أطول، قم بزيادة المهلة في driver.wait().

خاتمة

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

تذكر أن تحافظ على تحديث برامج التشغيل الخاصة بك لتتوافق مع إصدارات المتصفح الخاص بك وفكر في استخدام وضع مقطوعة الرأس لبيئات CI/CD.

إذا كنت ترغب في استضافته في Azure، فراجع منشوري الآخر: https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and -إرسال إشعارات البريد الإلكتروني عند الفشل-2aio

اختبار سعيد!