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

خيارات الخدمة هي الخيارات التي يمكن تعيينها عند إنشاء الخدمة وسيتم استخدامها لكل استدعاء طريقة.

// wdio.conf.(js|ts)
export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // The options
            },
        ],
    ],
    // ...
};

الخيارات الافتراضية

addressBarShadowPadding

• النوع: number
• إلزامي: لا
• الافتراضي: 6
• سياقات التطبيق المدعومة: الويب

الهوامش التي يجب إضافتها إلى شريط العنوان على iOS و Android لإجراء اقتطاع مناسب للعرض.

autoElementScroll

• النوع: boolean
• إلزامي: لا
• الافتراضي: true
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)

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

addIOSBezelCorners

• النوع: boolean
• إلزامي: لا
• الافتراضي: false
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)، تطبيق أصلي

إضافة زوايا الإطار والنوتش/الجزيرة الديناميكية إلى لقطة الشاشة لأجهزة iOS.

ملاحظة

يمكن القيام بذلك فقط عندما يمكن تحديد اسم الجهاز تلقائيًا ويتطابق مع قائمة أسماء الأجهزة التالية المعيارية. سيتم التعديل بواسطة هذه الوحدة. iPhone:

• iPhone X: iphonex
• iPhone XS: iphonexs
• iPhone XS Max: iphonexsmax
• iPhone XR: iphonexr
• iPhone 11: iphone11
• iPhone 11 Pro: iphone11pro
• iPhone 11 Pro Max: iphone11promax
• iPhone 12: iphone12
• iPhone 12 Mini: iphone12mini
• iPhone 12 Pro: iphone12pro
• iPhone 12 Pro Max: iphone12promax
• iPhone 13: iphone13
• iPhone 13 Mini: iphone13mini
• iPhone 13 Pro: iphone13pro
• iPhone 13 Pro Max: iphone13promax
• iPhone 14: iphone14
• iPhone 14 Plus: iphone14plus
• iPhone 14 Pro: iphone14pro
• iPhone 14 Pro Max: iphone14promax iPads:
• iPad Mini 6th Generation: ipadmini
• iPad Air 4th Generation: ipadair
• iPad Air 5th Generation: ipadair
• iPad Pro (11-inch) 1st Generation: ipadpro11
• iPad Pro (11-inch) 2nd Generation: ipadpro11
• iPad Pro (11-inch) 3rd Generation: ipadpro11
• iPad Pro (12.9-inch) 3rd Generation: ipadpro129
• iPad Pro (12.9-inch) 4th Generation: ipadpro129
• iPad Pro (12.9-inch) 5th Generation: ipadpro129

autoSaveBaseline

• النوع: boolean
• إلزامي: لا
• الافتراضي: true
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)، تطبيق أصلي

إذا لم يتم العثور على صورة أساسية أثناء المقارنة، يتم نسخ الصورة تلقائيًا إلى مجلد الأساس.

baselineFolder

• النوع: string|()=> string
• إلزامي: لا
• الافتراضي: .path/to/testfile/__snapshots__/
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)، تطبيق أصلي

الدليل الذي سيحتفظ بجميع الصور الأساسية التي تستخدم أثناء المقارنة. إذا لم يتم تعيينه، سيتم استخدام القيمة الافتراضية التي ستخزن الملفات في مجلد __snapshots__/ بجوار الاختبار الذي ينفذ اختبارات المرئيات. يمكن أيضًا استخدام دالة ترجع string لتعيين قيمة baselineFolder:

{
    baselineFolder: path.join(process.cwd(), 'foo', 'bar', 'baseline')
},
// أو
{
    baselineFolder: () => {
        // قم ببعض السحر هنا
        return path.join(process.cwd(), 'foo', 'bar', 'baseline');
    }
}

clearRuntimeFolder

• النوع: boolean
• إلزامي: لا
• الافتراضي: false
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)، تطبيق أصلي

حذف مجلد وقت التشغيل (actual و diff) عند التهيئة

ملاحظة

سيعمل هذا فقط عندما يتم تعيين screenshotPath من خلال خيارات البلاجن، و لن يعمل عندما تقوم بتعيين المجلدات في الطرق

createJsonReportFiles (جديد)

• النوع: boolean
• إلزامي: لا
• الافتراضي: false

لديك الآن خيار تصدير نتائج المقارنة إلى ملف تقرير JSON. من خلال توفير الخيار createJsonReportFiles: true، ستنشئ كل صورة يتم مقارنتها تقريرًا مخزنًا في مجلد actual، بجوار كل نتيجة صورة actual. سيبدو الإخراج كما يلي:

{
    "parent": "check methods",
    "test": "should fail comparing with a baseline",
    "tag": "examplePageFail",
    "instanceData": {
        "browser": {
            "name": "chrome-headless-shell",
            "version": "126.0.6478.183"
        },
        "platform": {
            "name": "mac",
            "version": "not-known"
        }
    },
    "commandName": "checkScreen",
    "boundingBoxes": {
        "diffBoundingBoxes": [
            {
                "left": 1088,
                "top": 717,
                "right": 1186,
                "bottom": 730
            }
            //....
        ],
        "ignoredBoxes": [
            {
                "left": 159,
                "top": 652,
                "right": 356,
                "bottom": 703
            }
            //...
        ]
    },
    "fileData": {
        "actualFilePath": "/Users/wdio/visual-testing/.tmp/actual/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
        "baselineFilePath": "/Users/wdio/visual-testing/localBaseline/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
        "diffFilePath": "/Users/wdio/visual-testing/.tmp/diff/desktop_chrome-headless-shell/examplePageFail-local-chrome-latest-1366x768png",
        "fileName": "examplePageFail-local-chrome-latest-1366x768.png",
        "size": {
            "actual": {
                "height": 768,
                "width": 1366
            },
            "baseline": {
                "height": 768,
                "width": 1366
            },
            "diff": {
                "height": 768,
                "width": 1366
            }
        }
    },
    "misMatchPercentage": "12.90",
    "rawMisMatchPercentage": 12.900729014153246
}

عند تنفيذ جميع الاختبارات، سيتم إنشاء ملف JSON جديد مع مجموعة المقارنات ويمكن العثور عليه في جذر مجلد actual الخاص بك. يتم تجميع البيانات حسب:

• describe لـ Jasmine/Mocha أو Feature لـ CucumberJS
• it لـ Jasmine/Mocha أو Scenario لـ CucumberJS ثم يتم فرزها حسب:
• commandName، وهي أسماء طريقة المقارنة المستخدمة لمقارنة الصور
• instanceData، المتصفح أولاً، ثم الجهاز، ثم المنصة سيبدو هكذا

[
    {
        "description": "check methods",
        "data": [
            {
                "test": "should fail comparing with a baseline",
                "data": [
                    {
                        "tag": "examplePageFail",
                        "instanceData": {},
                        "commandName": "checkScreen",
                        "framework": "mocha",
                        "boundingBoxes": {
                            "diffBoundingBoxes": [],
                            "ignoredBoxes": []
                        },
                        "fileData": {},
                        "misMatchPercentage": "14.34",
                        "rawMisMatchPercentage": 14.335403703025868
                    },
                    {
                        "tag": "exampleElementFail",
                        "instanceData": {},
                        "commandName": "checkElement",
                        "framework": "mocha",
                        "boundingBoxes": {
                            "diffBoundingBoxes": [],
                            "ignoredBoxes": []
                        },
                        "fileData": {},
                        "misMatchPercentage": "1.34",
                        "rawMisMatchPercentage": 1.335403703025868
                    }
                ]
            }
        ]
    }
]

ستمنحك بيانات التقرير فرصة لبناء تقريرك المرئي الخاص دون القيام بكل السحر وجمع البيانات بنفسك.

ملاحظة

تحتاج إلى استخدام @wdio/visual-testing الإصدار 5.2.0 أو أعلى

disableBlinkingCursor

• النوع: boolean
• إلزامي: لا
• الافتراضي: false
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)

تمكين/تعطيل جميع "وميض" مؤشر الإدخال في input، textarea، [contenteditable] في التطبيق. إذا تم تعيينه إلى true، سيتم تعيين المؤشر إلى transparent قبل التقاط لقطة شاشة وإعادة تعيينه عند الانتهاء

disableCSSAnimation

• النوع: boolean
• إلزامي: لا
• الافتراضي: false
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)

تمكين/تعطيل جميع الرسوم المتحركة CSS في التطبيق. إذا تم تعيينه إلى true، سيتم تعطيل جميع الرسوم المتحركة قبل التقاط لقطة شاشة وإعادة تعيينها عند الانتهاء

enableLayoutTesting

• النوع: boolean
• إلزامي: لا
• الافتراضي: false
• سياقات التطبيق المدعومة: الويب

سيؤدي هذا إلى إخفاء كل النص على الصفحة بحيث يتم استخدام التخطيط فقط للمقارنة. سيتم إجراء الإخفاء عن طريق إضافة النمط 'color': 'transparent !important' إلى كل عنصر.

للإخراج، راجع إخراج الاختبار

معلومات

باستخدام هذه العلامة، سيحصل كل عنصر يحتوي على نص (ليس فقط p، h1، h2، h3، h4، h5، h6، span، a، li، ولكن أيضًا div|button|..) على هذه الخاصية. لا يوجد خيار لتخصيص هذا.

formatImageName

• النوع: string
• إلزامي: لا
• الافتراضي: {tag}-{browserName}-{width}x{height}-dpr-{dpr}
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)، تطبيق أصلي

يمكن تخصيص اسم الصور المحفوظة عن طريق تمرير المعلمة formatImageName بسلسلة تنسيق مثل:

{tag}-{browserName}-{width}x{height}-dpr-{dpr}

يمكن تمرير المتغيرات التالية لتنسيق السلسلة وسيتم قراءتها تلقائيًا من قدرات المثيل. إذا تعذر تحديدها، فسيتم استخدام القيم الافتراضية.

• browserName: اسم المتصفح في القدرات المقدمة
• browserVersion: إصدار المتصفح المقدم في القدرات
• deviceName: اسم الجهاز من القدرات
• dpr: نسبة بكسل الجهاز
• height: ارتفاع الشاشة
• logName: logName من القدرات
• mobile: سيضيف _app، أو اسم المتصفح بعد deviceName للتمييز بين لقطات شاشة التطبيق ولقطات شاشة المتصفح
• platformName: اسم المنصة في القدرات المقدمة
• platformVersion: إصدار المنصة المقدم في القدرات
• tag: العلامة التي يتم توفيرها في الطرق التي يتم استدعاؤها
• width: عرض الشاشة

معلومات

لا يمكنك توفير مسارات/مجلدات مخصصة في formatImageName. إذا كنت ترغب في تغيير المسار، فيرجى التحقق من تغيير الخيارات التالية:

• baselineFolder
• screenshotPath
• folderOptions لكل طريقة

fullPageScrollTimeout

• النوع: number
• إلزامي: لا
• الافتراضي: 1500
• سياقات التطبيق المدعومة: الويب

المهلة بالميلي ثانية للانتظار بعد التمرير. قد يساعد هذا في تحديد الصفحات ذات التحميل الكسول.

معلومات

سيعمل هذا فقط عندما يتم تعيين خيار الخدمة/الطريقة userBasedFullPageScreenshot إلى true، راجع أيضًا userBasedFullPageScreenshot

hideScrollBars

• النوع: boolean
• إلزامي: لا
• الافتراضي: true
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)

إخفاء أشرطة التمرير في التطبيق. إذا تم تعيينه إلى true، سيتم تعطيل جميع أشرطة التمرير قبل التقاط لقطة شاشة. هذا معين افتراضيًا إلى true لمنع مشكلات إضافية.

logLevel

• النوع: string
• إلزامي: لا
• الافتراضي: info
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)، تطبيق أصلي

يضيف سجلات إضافية، الخيارات هي debug | info | warn | silent

يتم دائمًا تسجيل الأخطاء في وحدة التحكم.

savePerInstance

• النوع: boolean
• الافتراضي: false
• إلزامي: لا
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)، تطبيق أصلي

حفظ الصور لكل مثيل في مجلد منفصل، على سبيل المثال، سيتم حفظ جميع لقطات شاشة Chrome في مجلد Chrome مثل desktop_chrome.

screenshotPath

• النوع: string | () => string
• الافتراضي: .tmp/
• إلزامي: لا
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)، تطبيق أصلي

الدليل الذي سيحتوي على جميع لقطات الشاشة الفعلية/المختلفة. إذا لم يتم تعيينه، سيتم استخدام القيمة الافتراضية. يمكن أيضًا استخدام دالة ترجع سلسلة لتعيين قيمة screenshotPath:

{
    screenshotPath: path.join(process.cwd(), 'foo', 'bar', 'screenshotPath')
},
// أو
{
    screenshotPath: () => {
        // قم ببعض السحر هنا
        return path.join(process.cwd(), 'foo', 'bar', 'screenshotPath');
    }
}

toolBarShadowPadding

• النوع: number
• إلزامي: لا
• الافتراضي: 6 لـ Android و 15 لـ iOS (6 افتراضيًا و 9 ستتم إضافتها تلقائيًا لشريط الصفحة الرئيسية المحتمل على أجهزة iPhone ذات نوتش أو أجهزة iPad التي تحتوي على شريط الصفحة الرئيسية)
• سياقات التطبيق المدعومة: الويب

الهامش الذي يجب إضافته إلى شريط الأدوات على iOS و Android لإجراء اقتطاع مناسب لمنطقة العرض.

userBasedFullPageScreenshot

• النوع: boolean
• إلزامي: لا
• الافتراضي: false
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview) تم تقديمه في visual-service@7.0.0

افتراضيًا، يتم التقاط لقطات الشاشة للصفحة الكاملة على سطح المكتب باستخدام بروتوكول WebDriver BiDi، مما يتيح لقطات شاشة سريعة ومستقرة ومتسقة دون تمرير. عند تعيين userBasedFullPageScreenshot إلى true، تقوم عملية لقطة الشاشة بمحاكاة مستخدم حقيقي: التمرير عبر الصفحة، والتقاط لقطات شاشة بحجم منطقة العرض، وتجميعها معًا. هذه الطريقة مفيدة للصفحات ذات المحتوى المحمّل كسولًا أو العرض الديناميكي الذي يعتمد على موضع التمرير.

استخدم هذا الخيار إذا كانت صفحتك تعتمد على تحميل المحتوى أثناء التمرير أو إذا كنت تريد الحفاظ على سلوك طرق لقطة الشاشة القديمة.

waitForFontsLoaded

• النوع: boolean
• إلزامي: لا
• الافتراضي: true
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)

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

خيارات Tabbable

ملاحظة

تدعم هذه الوحدة أيضًا رسم الطريقة التي سيستخدم بها المستخدم لوحة المفاتيح للتنقل tab خلال الموقع من خلال رسم خطوط ونقاط من عنصر قابل للتبويب إلى عنصر قابل للتبويب آخر.
العمل مستوحى من مقالة مدونة Viv Richards حول "AUTOMATING PAGE TABABILITY (IS THAT A WORD?) WITH VISUAL TESTING".
تستند طريقة اختيار العناصر القابلة للتبويب إلى وحدة tabbable. إذا كانت هناك أي مشكلات تتعلق بالتبويب، فيرجى التحقق من README.md وخاصة قسم المزيد من التفاصيل.

tabbableOptions

• النوع: object
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

الخيارات التي يمكن تغييرها للخطوط والنقاط إذا كنت تستخدم طرق {save|check}Tabbable. يتم شرح الخيارات أدناه.

tabbableOptions.circle

• النوع: object
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

الخيارات لتغيير الدائرة.

tabbableOptions.circle.backgroundColor

• النوع: string
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

لون خلفية الدائرة.

tabbableOptions.circle.borderColor

• النوع: string
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

لون حدود الدائرة.

tabbableOptions.circle.borderWidth

• النوع: number
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

عرض حدود الدائرة.

tabbableOptions.circle.fontColor

• النوع: string
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

لون خط النص في الدائرة. سيظهر هذا فقط إذا تم تعيين showNumber إلى true.

tabbableOptions.circle.fontFamily

• النوع: string
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

عائلة خط النص في الدائرة. سيظهر هذا فقط إذا تم تعيين showNumber إلى true.

تأكد من تعيين خطوط مدعومة من قبل المتصفحات.

tabbableOptions.circle.fontSize

• النوع: number
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

حجم خط النص في الدائرة. سيظهر هذا فقط إذا تم تعيين showNumber إلى true.

tabbableOptions.circle.size

• النوع: number
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

حجم الدائرة.

tabbableOptions.circle.showNumber

• النوع: showNumber
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

إظهار رقم تسلسل التبويب في الدائرة.

tabbableOptions.line

• النوع: object
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

الخيارات لتغيير الخط.

tabbableOptions.line.color

• النوع: string
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

لون الخط.

tabbableOptions.line.width

• النوع: number
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب

عرض الخط.

خيارات المقارنة

compareOptions

• النوع: object
• إلزامي: لا
• الافتراضي: راجع هنا لجميع القيم الافتراضية
• سياقات التطبيق المدعومة: الويب، تطبيق هجين (Webview)، تطبيق أصلي (انظر خيارات مقارنة الطريقة لمزيد من المعلومات)

يمكن أيضًا تعيين خيارات المقارنة كخيارات خدمة، وهي موضحة في خيارات مقارنة الطريقة