پرش به محتوای اصلی

تست بصری

چه کاری می‌تواند انجام دهد؟​

WebdriverIO امکان مقایسه تصویر روی صفحه‌نمایش‌ها، عناصر یا صفحه کامل را فراهم می‌کند برای

  • 🖥️ مرورگرهای دسکتاپ (کروم / فایرفاکس / سافاری / مایکروسافت اج)
  • 📱 مرورگرهای موبایل / تبلت (کروم در شبیه‌سازهای اندروید / سافاری در شبیه‌سازهای iOS / شبیه‌سازها / دستگاه‌های واقعی) از طریق Appium
  • 📱 اپلیکیشن‌های بومی (شبیه‌سازهای اندروید / شبیه‌سازهای iOS / دستگاه‌های واقعی) از طریق Appium (🌟 جدید 🌟)
  • 📳 اپلیکیشن‌های هیبریدی از طریق Appium

از طریق @wdio/visual-service که یک سرویس سبک WebdriverIO است.

این به شما امکان می‌دهد:

  • ذخیره یا مقایسه صفحه‌نمایش‌ها/عناصر/صفحه کامل با یک خط پایه
  • به طور خودکار یک خط پایه ایجاد کنید وقتی خط پایه‌ای وجود ندارد
  • مسدود کردن نواحی سفارشی و حتی به طور خودکار حذف نوار وضعیت و یا نوار ابزار (فقط موبایل) در هنگام مقایسه
  • افزایش ابعاد اسکرین‌شات‌های عناصر
  • پنهان کردن متن در هنگام مقایسه وب‌سایت برای:
    • بهبود ثبات و جلوگیری از ناپایداری رندر فونت
    • تمرکز فقط بر روی لایه یک وب‌سایت
  • استفاده از روش‌های مقایسه مختلف و مجموعه‌ای از تطبیق‌دهنده‌های اضافی برای آزمون‌های خواناتر
  • بررسی چگونگی پشتیبانی وب‌سایت شما از جابجایی با کلید Tab، همچنین ببینید جابجایی با Tab در یک وب‌سایت
  • و بسیاری موارد دیگر، به گزینه‌های سرویس و متد مراجعه کنید

این سرویس یک ماژول سبک برای بازیابی داده‌ها و اسکرین‌شات‌های مورد نیاز برای تمام مرورگرها/دستگاه‌ها است. قدرت مقایسه از 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",
            {
                // Some options, see the docs for more
                baselineFolder: path.join(process.cwd(), "tests", "baseline"),
                formatImageName: "{tag}-{logName}-{width}x{height}",
                screenshotPath: path.join(process.cwd(), "tmp"),
                savePerInstance: true,
                // ... more options
            },
        ],
    ],
    // ...
};

گزینه‌های سرویس بیشتر را می‌توانید اینجا پیدا کنید.

پس از تنظیم در پیکربندی 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', // Custom log name for Chrome
            },
        }
        {
            browserName: 'firefox',
            'wdio-ics:options': {
                logName: 'firefox-mac-15', // Custom log name for Firefox
            },
        }
    ],
    services: [
        [
            "visual",
            {
                // Some options, see the docs for more
                baselineFolder: path.join(process.cwd(), "tests", "baseline"),
                screenshotPath: path.join(process.cwd(), "tmp"),
                // The format below will use the `logName` from capabilities
                formatImageName: "{tag}-{logName}-{width}x{height}",
                // ... more options
            },
        ],
    ],
    // ...
};

نحوه کارکرد​

  1. تنظیم logName:

    • در بخش capabilities، یک logName منحصر به فرد به هر مرورگر یا دستگاه اختصاص دهید. به عنوان مثال، chrome-mac-15 تست‌های در حال اجرا روی کروم در نسخه 15 macOS را شناسایی می‌کند.

  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"],
                },
                // THIS!!!
                "wdio-ics:options": {
                    logName: "chrome-latest-one",
                },
            },
        },
        chromeBrowserTwo: {
            capabilities: {
                browserName: "chrome",
                "goog:chromeOptions": {
                    args: ["disable-infobars"],
                },
                // THIS!!!
                "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",
    },
});

// "Start" the service to add the custom commands to the `browser`
visualService.remoteSetup(browser);

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

// or use this for ONLY saving a screenshot
await browser.saveFullPageScreen("examplePaged", {});

// or use this for validating. Both methods don't need to be combined, see the FAQ
await browser.checkFullPageScreen("examplePaged", {});

await browser.deleteSession();

جابجایی با Tab در یک وب‌سایت​

می‌توانید بررسی کنید که آیا یک وب‌سایت با استفاده از کلید TAB صفحه‌کلید قابل دسترسی است. آزمایش این بخش از قابلیت دسترسی همیشه کاری زمان‌بر (دستی) و انجام آن از طریق اتوماسیون بسیار دشوار بوده است. با متدهای saveTabbablePage و checkTabbablePage، اکنون می‌توانید خطوط و نقاط را روی وب‌سایت خود ترسیم کنید تا ترتیب جابجایی با Tab را تأیید کنید.

توجه داشته باشید که این فقط برای مرورگرهای دسکتاپ مفید است و نه برای دستگاه‌های تلفن همراه. تمام مرورگرهای دسکتاپ از این ویژگی پشتیبانی می‌کنند.

نکته

این کار از پست وبلاگ Viv Richards با عنوان "AUTOMATING PAGE TABABILITY (IS THAT A WORD?) WITH VISUAL TESTING" الهام گرفته شده است.

نحوه انتخاب عناصر قابل جابجایی با Tab براساس ماژول tabbable است. اگر مشکلی در مورد Tab وجود دارد، لطفاً README.md و به ویژه بخش More Details را بررسی کنید.

چگونه کار می‌کند​

هر دو متد یک عنصر canvas روی وب‌سایت شما ایجاد می‌کنند و خطوط و نقاط را ترسیم می‌کنند تا به شما نشان دهند که Tab شما به کجا می‌رود اگر یک کاربر نهایی از آن استفاده کند. پس از آن، یک اسکرین‌شات صفحه کامل ایجاد می‌کند تا دید خوبی از جریان به شما بدهد.

important

از saveTabbablePage فقط زمانی استفاده کنید که نیاز به ایجاد اسکرین‌شات دارید و نمی‌خواهید آن را با تصویر خط پایه مقایسه کنید.

وقتی می‌خواهید جریان Tab را با یک خط پایه مقایسه کنید، می‌توانید از متد checkTabbablePage استفاده کنید. نیازی نیست دو متد را با هم استفاده کنید. اگر قبلاً یک تصویر خط پایه ایجاد شده باشد، که می‌تواند با ارائه autoSaveBaseline: true هنگام راه‌اندازی سرویس به طور خودکار انجام شود، checkTabbablePage ابتدا تصویر واقعی را ایجاد می‌کند و سپس آن را با خط پایه مقایسه می‌کند.

گزینه‌ها​

هر دو متد از همان گزینه‌های saveFullPageScreen یا compareFullPageScreen استفاده می‌کنند.

مثال​

این یک مثال از نحوه کار Tab روی وب‌سایت خوکچه هندی ما است:

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] ..........

پشتیبانی از تایپ‌اسکریپت​

این ماژول دارای پشتیبانی از تایپ‌اسکریپت است که به شما امکان می‌دهد از تکمیل خودکار، ایمنی نوع و تجربه توسعه‌دهنده بهتری هنگام استفاده از سرویس تست بصری بهره‌مند شوید.

مرحله 1: افزودن تعاریف نوع​

برای اطمینان از اینکه تایپ‌اسکریپت انواع ماژول را تشخیص می‌دهد، ورودی زیر را به فیلد types در tsconfig.json خود اضافه کنید:

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

مرحله 2: فعال‌سازی ایمنی نوع برای گزینه‌های سرویس​

برای اعمال بررسی نوع روی گزینه‌های سرویس، پیکربندی WebdriverIO خود را به‌روزرسانی کنید:

// wdio.conf.ts
import { join } from 'node:path';
// Import the type definition
import type { VisualServiceOptions } from '@wdio/visual-service';

export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // Service options
                baselineFolder: join(process.cwd(), './__snapshots__/'),
                formatImageName: '{tag}-{logName}-{width}x{height}',
                screenshotPath: join(process.cwd(), '.tmp/'),
            } satisfies VisualServiceOptions, // Ensures type safety
        ],
    ],
    // ...
};

نیازمندی‌های سیستم​

نسخه 5 و بالاتر​

برای نسخه 5 و بالاتر، این ماژول یک ماژول کاملاً مبتنی بر جاوااسکریپت است که هیچ وابستگی سیستمی اضافی فراتر از نیازمندی‌های پروژه ندارد. از Jimp استفاده می‌کند که یک کتابخانه پردازش تصویر برای Node است که کاملاً در جاوااسکریپت نوشته شده، بدون هیچ وابستگی بومی.

نسخه 4 و پایین‌تر​

برای نسخه 4 و پایین‌تر، این ماژول به Canvas متکی است، یک پیاده‌سازی canvas برای Node.js. Canvas به Cairo وابسته است.

جزئیات نصب​

به طور پیش‌فرض، باینری‌های برای macOS، لینوکس و ویندوز در طول نصب npm install پروژه شما دانلود خواهند شد. اگر سیستم عامل یا معماری پردازنده پشتیبانی شده ندارید، ماژول روی سیستم شما کامپایل خواهد شد. این نیاز به چندین وابستگی دارد، از جمله Cairo و Pango.

برای اطلاعات نصب دقیق، به ویکی node-canvas مراجعه کنید. در زیر دستورالعمل‌های نصب تک خطی برای سیستم‌های عامل رایج آمده است. توجه داشته باشید که libgif/giflib، librsvg و libjpeg اختیاری هستند و فقط برای پشتیبانی از GIF، SVG و JPEG مورد نیاز هستند. Cairo نسخه 1.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