SmartUI

توفر TestMu AI (سابقاً LambdaTest) SmartUI اختبارات انحدار بصري مدعومة بالذكاء الاصطناعي لاختبارات WebdriverIO الخاصة بك. تقوم بالتقاط لقطات شاشة، ومقارنتها بالخطوط الأساسية، وتسليط الضوء على الاختلافات البصرية باستخدام خوارزميات مقارنة ذكية.

الإعداد

إنشاء مشروع SmartUI

قم بتسجيل الدخول إلى TestMu AI (سابقاً LambdaTest) وانتقل إلى مشاريع SmartUI لإنشاء مشروع جديد. حدد Web كمنصة وقم بتكوين اسم مشروعك والموافقين والعلامات.

إعداد بيانات الاعتماد

احصل على LT_USERNAME و LT_ACCESS_KEY من لوحة تحكم TestMu AI (سابقاً LambdaTest) وقم بتعيينهما كمتغيرات بيئية:

export LT_USERNAME="<your username>"
export LT_ACCESS_KEY="<your access key>"

تثبيت SmartUI SDK

npm install @lambdatest/wdio-driver

تكوين WebdriverIO

قم بتحديث ملف wdio.conf.js الخاص بك:

exports.config = {
  user: process.env.LT_USERNAME,
  key: process.env.LT_ACCESS_KEY,

  capabilities: [{
    browserName: 'chrome',
    browserVersion: 'latest',
    'LT:Options': {
      platform: 'Windows 10',
      build: 'SmartUI Build',
      name: 'SmartUI Test',
      smartUI.project: '<Your Project Name>',
      smartUI.build: '<Your Build Name>',
      smartUI.baseline: false
    }
  }]
}

الاستخدام

استخدم browser.execute('smartui.takeScreenshot') لالتقاط لقطات الشاشة:

describe('WebdriverIO SmartUI Test', () => {
  it('should capture screenshot for visual testing', async () => {
    await browser.url('https://webdriver.io');

    await browser.execute('smartui.takeScreenshot', {
      screenshotName: 'Homepage Screenshot'
    });

    await browser.execute('smartui.takeScreenshot', {
      screenshotName: 'Homepage with Options',
      ignoreDOM: {
        id: ['dynamic-element-id'],
        class: ['ad-banner']
      }
    });
  });
});

تشغيل الاختبارات

npx wdio wdio.conf.js

عرض النتائج في لوحة تحكم SmartUI.

خيارات متقدمة

تجاهل العناصر

await browser.execute('smartui.takeScreenshot', {
  screenshotName: 'Ignore Dynamic Elements',
  ignoreDOM: {
    id: ['element-id'],
    class: ['dynamic-class'],
    xpath: ['//div[@class="ad"]']
  }
});

تحديد مناطق معينة

await browser.execute('smartui.takeScreenshot', {
  screenshotName: 'Compare Specific Area',
  selectDOM: {
    id: ['main-content']
  }
});

الموارد

المورد	الوصف
الوثائق الرسمية	وثائق SmartUI
لوحة تحكم SmartUI	الوصول إلى مشاريع وإصدارات SmartUI الخاصة بك
الإعدادات المتقدمة	تكوين حساسية المقارنة
خيارات البناء	تكوين البناء المتقدم