برای برنامه وب

ادغام تست‌های WebdriverIO خود با Percy

قبل از ادغام، می‌توانید آموزش نمونه ساخت Percy برای WebdriverIO را بررسی کنید. تست‌های خودکار WebdriverIO خود را با BrowserStack Percy ادغام کنید و در اینجا مروری بر مراحل ادغام آورده شده است:

مرحله ۱: ایجاد یک پروژه Percy

به Percy وارد شوید. در Percy، یک پروژه از نوع وب ایجاد کنید و سپس به پروژه نام دهید. پس از ایجاد پروژه، Percy یک توکن تولید می‌کند. آن را یادداشت کنید. شما باید از آن برای تنظیم متغیر محیطی خود در مرحله بعدی استفاده کنید.

برای جزئیات بیشتر در مورد ایجاد پروژه، به ایجاد پروژه Percy مراجعه کنید.

مرحله ۲: تنظیم توکن پروژه به عنوان متغیر محیطی

دستور زیر را برای تنظیم 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

مرحله ۳: نصب وابستگی‌های Percy

اجزای مورد نیاز برای ایجاد محیط ادغام برای مجموعه تست خود را نصب کنید.

برای نصب وابستگی‌ها، دستور زیر را اجرا کنید:

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

مرحله ۴: به‌روزرسانی اسکریپت تست خود

کتابخانه 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 مراجعه کنید.

مرحله ۵: اجرای 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 استفاده می‌کنید.

منبع	توضیحات
مستندات رسمی	مستندات WebdriverIO در Percy
نمونه ساخت - آموزش	آموزش WebdriverIO در Percy
ویدیوی رسمی	تست بصری با Percy
وبلاگ	معرفی بازبینی‌های بصری ۲.۰

ادغام تست‌های WebdriverIO خود با Percy​

مرحله ۱: ایجاد یک پروژه Percy​

مرحله ۲: تنظیم توکن پروژه به عنوان متغیر محیطی​

مرحله ۳: نصب وابستگی‌های Percy​

مرحله ۴: به‌روزرسانی اسکریپت تست خود​

حالت مستقل​

مرحله ۵: اجرای Percy​

برای جزئیات بیشتر به صفحات زیر مراجعه کنید:​