انتقل إلى المحتوى الرئيسي

الاختبار البصري

ما الذي يمكنه فعله؟​

يوفر WebdriverIO مقارنات للصور على الشاشات والعناصر أو صفحة كاملة لـ

  • 🖥️ متصفحات سطح المكتب (Chrome / Firefox / Safari / Microsoft Edge)
  • 📱 متصفحات الجوال / الأجهزة اللوحية (Chrome على محاكيات Android / Safari على محاكيات iOS / المحاكيات / الأجهزة الحقيقية) عبر Appium
  • 📱 التطبيقات الأصلية (محاكيات Android / محاكيات iOS / الأجهزة الحقيقية) عبر Appium (🌟 جديد 🌟)
  • 📳 التطبيقات الهجينة عبر Appium

من خلال @wdio/visual-service وهي خدمة خفيفة الوزن من WebdriverIO.

هذا يتيح لك:

  • حفظ أو مقارنة شاشات/عناصر/صفحات كاملة مقابل خط الأساس
  • إنشاء خط أساس تلقائيًا عندما لا يكون هناك خط أساس
  • حجب مناطق مخصصة وحتى استبعاد تلقائي لشريط الحالة و/أو شريط الأدوات (الجوال فقط) أثناء المقارنة
  • زيادة أبعاد لقطات الشاشة للعناصر
  • إخفاء النص أثناء مقارنة موقع الويب لـ:
    • تحسين الاستقرار ومنع عدم استقرار عرض الخطوط
    • التركيز فقط على التخطيط لموقع الويب
  • استخدام طرق مقارنة مختلفة ومجموعة من المطابقات الإضافية لاختبارات أكثر قابلية للقراءة
  • التحقق من كيفية دعم موقع الويب الخاص بك للتنقل باستخدام لوحة المفاتيح، انظر أيضًا التنقل عبر موقع الويب
  • والمزيد، راجع خيارات الخدمة والطريقة

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

ملاحظة للتطبيقات الأصلية/الهجينة

يمكن استخدام الطرق saveScreen وsaveElement وcheckScreen وcheckElement والمطابقات toMatchScreenSnapshot وtoMatchElementSnapshot للتطبيقات/السياقات الأصلية.

يرجى استخدام الخاصية isHybridApp:true في إعدادات الخدمة الخاصة بك عندما ترغب في استخدامها للتطبيقات الهجينة.

التثبيت​

الطريقة الأسهل هي الاحتفاظ بـ @wdio/visual-service كتبعية تطوير في ملف package.json الخاص بك، عبر:

npm install --save-dev @wdio/visual-service

الاستخدام​

يمكن استخدام @wdio/visual-service كخدمة عادية. يمكنك إعدادها في ملف التكوين الخاص بك بما يلي:

import path from "node:path";

// wdio.conf.ts
export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // بعض الخيارات، راجع الوثائق للمزيد
                baselineFolder: path.join(process.cwd(), "tests", "baseline"),
                formatImageName: "{tag}-{logName}-{width}x{height}",
                screenshotPath: path.join(process.cwd(), "tmp"),
                savePerInstance: true,
                // ... المزيد من الخيارات
            },
        ],
    ],
    // ...
};

يمكن العثور على المزيد من خيارات الخدمة هنا.

بمجرد الإعداد في تكوين WebdriverIO الخاص بك، يمكنك المضي قدمًا وإضافة تأكيدات مرئية إلى اختباراتك.

القدرات​

لاستخدام وحدة الاختبار البصري، لا تحتاج إلى إضافة أي خيارات إضافية إلى قدراتك. ومع ذلك، في بعض الحالات، قد ترغب في إضافة بيانات وصفية إضافية إلى اختباراتك المرئية، مثل logName.

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

لتمكين هذا، يمكنك تحديد logName في قسم capabilities والتأكد من أن خيار formatImageName في خدمة الاختبار البصري يشير إليه. إليك كيفية إعداده:

import path from "node:path";

// wdio.conf.ts
export const config = {
    // ...
    // =====
    // Setup
    // =====
    capabilities: [
        {
            browserName: 'chrome',
            'wdio-ics:options': {
                logName: 'chrome-mac-15', // اسم سجل مخصص لـ Chrome
            },
        }
        {
            browserName: 'firefox',
            'wdio-ics:options': {
                logName: 'firefox-mac-15', // اسم سجل مخصص لـ Firefox
            },
        }
    ],
    services: [
        [
            "visual",
            {
                // بعض الخيارات، راجع الوثائق للمزيد
                baselineFolder: path.join(process.cwd(), "tests", "baseline"),
                screenshotPath: path.join(process.cwd(), "tmp"),
                // سيستخدم التنسيق أدناه `logName` من القدرات
                formatImageName: "{tag}-{logName}-{width}x{height}",
                // ... المزيد من الخيارات
            },
        ],
    ],
    // ...
};

كيف يعمل​

  1. إعداد logName:

    • في قسم capabilities، قم بتعيين logName فريد لكل متصفح أو جهاز. على سبيل المثال، chrome-mac-15 يحدد الاختبارات التي تعمل على Chrome على نظام macOS الإصدار 15.

  2. تسمية الصور المخصصة:

    • يدمج خيار formatImageName الـ logName في أسماء ملفات لقطات الشاشة. على سبيل المثال، إذا كانت tag هي الصفحة الرئيسية والدقة هي 1920x1080، فقد يبدو اسم الملف الناتج كما يلي:

      homepage-chrome-mac-15-1920x1080.png

  3. فوائد التسمية المخصصة:

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

  4. ملاحظة حول الإعدادات الافتراضية:

    • إذا لم يتم تعيين logName في القدرات، فسيظهر خيار formatImageName كسلسلة فارغة في أسماء الملفات (homepage--15-1920x1080.png)

WebdriverIO MultiRemote​

نحن ندعم أيضًا MultiRemote. لجعل هذا يعمل بشكل صحيح تأكد من إضافة wdio-ics:options إلى القدرات الخاصة بك كما يمكنك أن ترى أدناه. هذا سيضمن أن كل لقطة شاشة سيكون لها اسم فريد خاص بها.

لن تكون كتابة اختباراتك مختلفة مقارنة باستخدام testrunner

// wdio.conf.js
export const config = {
    capabilities: {
        chromeBrowserOne: {
            capabilities: {
                browserName: "chrome",
                "goog:chromeOptions": {
                    args: ["disable-infobars"],
                },
                // هذا!!!
                "wdio-ics:options": {
                    logName: "chrome-latest-one",
                },
            },
        },
        chromeBrowserTwo: {
            capabilities: {
                browserName: "chrome",
                "goog:chromeOptions": {
                    args: ["disable-infobars"],
                },
                // هذا!!!
                "wdio-ics:options": {
                    logName: "chrome-latest-two",
                },
            },
        },
    },
};

التشغيل برمجيًا​

فيما يلي مثال بسيط لكيفية استخدام @wdio/visual-service عبر خيارات remote:

import { remote } from "webdriverio";
import VisualService from "@wdio/visual-service";

let visualService = new VisualService({
    autoSaveBaseline: true,
});

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

// "ابدأ" الخدمة لإضافة الأوامر المخصصة إلى `browser`
visualService.remoteSetup(browser);

await browser.url("https://webdriver.io/");

// أو استخدم هذا لحفظ لقطة شاشة فقط
await browser.saveFullPageScreen("examplePaged", {});

// أو استخدم هذا للتحقق. لا يلزم دمج كلا الطريقتين، راجع الأسئلة الشائعة
await browser.checkFullPageScreen("examplePaged", {});

await browser.deleteSession();

التنقل عبر موقع الويب​

يمكنك التحقق مما إذا كان موقع الويب يمكن الوصول إليه باستخدام مفتاح TAB في لوحة المفاتيح. كان اختبار هذا الجزء من إمكانية الوصول دائمًا مهمة تستغرق وقتًا طويلاً (يدويًا) وصعبة للغاية من خلال الأتمتة. باستخدام طرق saveTabbablePage وcheckTabbablePage، يمكنك الآن رسم خطوط ونقاط على موقع الويب الخاص بك للتحقق من ترتيب التبويب.

كن على علم بحقيقة أن هذا مفيد فقط لمتصفحات سطح المكتب وليس** للأجهزة المحمولة. جميع متصفحات سطح المكتب تدعم هذه الميزة.

ملاحظة

العمل مستوحى من مقال Viv Richards في المدونة حول "أتمتة قابلية التبويب للصفحة (هل هذه كلمة؟) باستخدام الاختبار البصري".

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

كيف يعمل​

سوف تنشئ كلتا الطريقتين عنصر canvas على موقع الويب الخاص بك وترسم خطوطًا ونقاطًا لتوضيح مكان ذهاب TAB إذا استخدمه المستخدم النهائي. بعد ذلك، ستنشئ لقطة شاشة للصفحة الكاملة لتعطيك نظرة عامة جيدة على التدفق.

important

**استخدم saveTabbablePage فقط عندما تحتاج إلى إنشاء لقطة شاشة ولا ترغب في مقارنتها **مع صورة خط الأساس.****

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

الخيارات​

تستخدم كلتا الطريقتين نفس الخيارات مثل saveFullPageScreen أو compareFullPageScreen.

مثال​

هذا مثال على كيفية عمل التبويب على موقع guinea pig الخاص بنا:

WDIO tabbing example

تحديث لقطات الشاشة المرئية الفاشلة تلقائيًا​

قم بتحديث صور خط الأساس من خلال سطر الأوامر بإضافة الوسيطة --update-visual-baseline. هذا سوف

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

الاستخدام:

npm run test.local.desktop  --update-visual-baseline

عند تشغيل السجلات في وضع المعلومات/التصحيح ستظهر السجلات التالية

[0-0] ..............
[0-0] #####################################################################################
[0-0]  INFO:
[0-0]  Updated the actual image to
[0-0]  /Users/wswebcreation/Git/wdio/visual-testing/localBaseline/chromel/demo-chrome-1366x768.png
[0-0] #####################################################################################
[0-0] ..........

دعم TypeScript​

تتضمن هذه الوحدة دعم TypeScript، مما يتيح لك الاستفادة من الإكمال التلقائي، والسلامة النوعية، وتجربة المطور المحسنة عند استخدام خدمة الاختبار البصري.

الخطوة 1: إضافة تعريفات النوع​

للتأكد من أن TypeScript يتعرف على أنواع الوحدة، أضف الإدخال التالي إلى حقل types في ملف tsconfig.json الخاص بك:

{
    "compilerOptions": {
        "types": ["@wdio/visual-service"]
    }
}

الخطوة 2: تمكين سلامة النوع لخيارات الخدمة​

لفرض التحقق من النوع على خيارات الخدمة، قم بتحديث تكوين WebdriverIO الخاص بك:

// wdio.conf.ts
import { join } from 'node:path';
// استيراد تعريف النوع
import type { VisualServiceOptions } from '@wdio/visual-service';

export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // خيارات الخدمة
                baselineFolder: join(process.cwd(), './__snapshots__/'),
                formatImageName: '{tag}-{logName}-{width}x{height}',
                screenshotPath: join(process.cwd(), '.tmp/'),
            } satisfies VisualServiceOptions, // يضمن سلامة النوع
        ],
    ],
    // ...
};

متطلبات النظام​

الإصدار 5 وما فوق​

بالنسبة للإصدار 5 وما فوق، هذه الوحدة هي وحدة تعتمد على JavaScript بشكل كامل بدون تبعيات نظام إضافية بعيدًا عن متطلبات المشروع العامة. تستخدم Jimp وهي مكتبة معالجة صور لـ Node مكتوبة بالكامل بلغة JavaScript، بدون تبعيات أصلية.

الإصدار 4 وما دون​

بالنسبة للإصدار 4 وما دون، تعتمد هذه الوحدة على Canvas، وهو تنفيذ للكانفاس لـ Node.js. يعتمد Canvas على Cairo.

تفاصيل التثبيت​

بشكل افتراضي، سيتم تنزيل الملفات الثنائية لنظام macOS وLinux وWindows أثناء عملية npm install لمشروعك. إذا لم يكن لديك نظام تشغيل أو بنية معالج مدعومة، سيتم تجميع الوحدة على نظامك. هذا يتطلب العديد من التبعيات، بما في ذلك Cairo وPango.

للحصول على معلومات التثبيت التفصيلية، راجع node-canvas wiki. فيما يلي تعليمات التثبيت بسطر واحد لأنظمة التشغيل الشائعة. لاحظ أن libgif/giflib، وlibrsvg، وlibjpeg اختيارية ومطلوبة فقط لدعم GIF، وSVG، وJPEG، على التوالي. مطلوب Cairo v1.10.0 أو أحدث.

باستخدام Homebrew:

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

Mac OS X v10.11+: إذا كنت قد قمت مؤخرًا بالتحديث إلى Mac OS X v10.11+ وتواجه مشكلة عند التجميع، قم بتشغيل الأمر التالي: xcode-select --install. اقرأ المزيد عن المشكلة على Stack Overflow. إذا كان لديك Xcode 10.0 أو أعلى مثبتًا، للبناء من المصدر تحتاج إلى NPM 6.4.1 أو أعلى.

Welcome! How can I help?

WebdriverIO AI Copilot