لتطبيقات الويب

دمج اختبارات WebdriverIO الخاصة بك مع Percy

قبل التكامل، يمكنك استكشاف برنامج تعليمي لبناء عينة Percy لـ WebdriverIO. قم بدمج اختبارات WebdriverIO الآلية مع BrowserStack Percy وإليك نظرة عامة على خطوات التكامل:

الخطوة 1: إنشاء مشروع Percy

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

للحصول على تفاصيل حول إنشاء مشروع، راجع إنشاء مشروع Percy.

الخطوة 2: تعيين رمز المشروع كمتغير بيئة

قم بتشغيل الأمر المعطى لتعيين PERCY_TOKEN كمتغير بيئة:

export PERCY_TOKEN="<your token here>"   // macOS or Linux
$Env:PERCY_TOKEN="<your token here>"   // Windows PowerShell
set PERCY_TOKEN="<your token here>"    // Windows CMD

الخطوة 3: تثبيت تبعيات Percy

قم بتثبيت المكونات المطلوبة لإنشاء بيئة التكامل لمجموعة الاختبار الخاصة بك.

لتثبيت التبعيات، قم بتشغيل الأمر التالي:

npm install --save-dev @percy/cli @percy/webdriverio

الخطوة 4: تحديث سكريبت الاختبار الخاص بك

استورد مكتبة Percy لاستخدام الطريقة والسمات المطلوبة لأخذ لقطات الشاشة. يستخدم المثال التالي وظيفة percySnapshot() في الوضع المتزامن:

import percySnapshot from '@percy/webdriverio';
describe('webdriver.io page', () => {
  it('should have the right title', async () => {
    await browser.url('https://webdriver.io');
    await expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js');
    await percySnapshot('webdriver.io page');
  });
});

عند استخدام WebdriverIO في الوضع المستقل، قدم كائن المتصفح كوسيطة أولى لوظيفة percySnapshot:

import { remote } from 'webdriverio'

import percySnapshot from '@percy/webdriverio';

const browser = await remote({
  logLevel: 'trace',
  capabilities: {
    browserName: 'chrome'
  }
});

await browser.url('https://duckduckgo.com');
const inputElem = await browser.$('#search_form_input_homepage');
await inputElem.setValue('WebdriverIO');
const submitBtn = await browser.$('#search_button_homepage');
await submitBtn.click();
// the browser object is required in standalone mode
percySnapshot(browser, 'WebdriverIO at DuckDuckGo');
await browser.deleteSession();

وسائط طريقة اللقطة هي:

percySnapshot(name[, options])

الوضع المستقل

percySnapshot(browser, name[, options])

• browser (مطلوب) - كائن متصفح WebdriverIO
• name (مطلوب) - اسم اللقطة؛ يجب أن يكون فريدًا لكل لقطة
• options - انظر خيارات التكوين لكل لقطة

لمعرفة المزيد، راجع لقطة Percy.

الخطوة 5: تشغيل Percy

قم بتشغيل اختباراتك باستخدام أمر percy exec كما هو موضح أدناه:

إذا كنت غير قادر على استخدام أمر percy:exec أو تفضل تشغيل اختباراتك باستخدام خيارات تشغيل IDE، يمكنك استخدام أوامر percy:exec:start و percy:exec:stop. لمعرفة المزيد، قم بزيارة تشغيل Percy.

percy exec -- wdio wdio.conf.js

[percy] Percy has started!
[percy] Created build #1: https://percy.io/[your-project]
[percy] Running "wdio wdio.conf.js"
...
[...] webdriver.io page
[percy] Snapshot taken "webdriver.io page"
[...]    ✓ should have the right title
...
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!

قم بزيارة الصفحات التالية لمزيد من التفاصيل:

• دمج اختبارات WebdriverIO مع Percy
• صفحة متغير البيئة
• التكامل باستخدام BrowserStack SDK إذا كنت تستخدم BrowserStack Automate.

المصدر	الوصف
الوثائق الرسمية	وثائق Percy لـ WebdriverIO
بناء عينة - برنامج تعليمي	برنامج تعليمي لـ Percy و WebdriverIO
فيديو رسمي	اختبار مرئي مع Percy
مدونة	تقديم المراجعات المرئية 2.0