تخطى إلى المحتوى الرئيسي

اختبار بصري

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

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

  • 🖥️ متصفحات سطح المكتب (كروم / فايرفوكس / سفاري / مايكروسوفت إيدج)
  • 📱 متصفحات الجوال / الأجهزة اللوحية (كروم على محاكيات أندرويد / سفاري على محاكيات iOS / المحاكيات / الأجهزة الحقيقية) عبر Appium
  • 📱 التطبيقات الأصلية (محاكيات أندرويد / محاكيات 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 هي homepage والدقة هي 1920x1080، فقد يبدو اسم الملف الناتج كما يلي:

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

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

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

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

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

MultiRemote لـ WebdriverIO​

نحن ندعم أيضًا 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 وخاصة قسم More Details.

كيف يعمل​

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

important

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

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

الخيارات​

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

مثال​

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

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. فيما يلي تعليمات تثبيت من سطر واحد لأنظمة التشغيل الشائعة. لاحظ أن 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