واجهة المستخدم الذكية

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

الإعداد

إنشاء مشروع واجهة المستخدم الذكية

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

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

احصل على LT_USERNAME و LT_ACCESS_KEY من لوحة تحكم LambdaTest وقم بتعيينهما كمتغيرات بيئية:

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

تثبيت 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

عرض النتائج في لوحة تحكم واجهة المستخدم الذكية.

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

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

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']
  }
});

الموارد

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