سرویس تست OCR
@wdio/ocr-service یک پکیج شخص ثالث است، برای اطلاعات بیشتر لطفاً به GitHub | npm مراجعه کنید
برای مستندات تست بصری با WebdriverIO، لطفاً به مستندات مراجعه کنید. این پروژه شامل تمام ماژولهای مرتبط برای اجرای تستهای بصری با WebdriverIO است. در دایرکتوری ./packages
موارد زیر را خواهید یافت:
@wdio/visual-testing
: سرویس WebdriverIO برای یکپارچهسازی تست بصریwebdriver-image-comparison
: یک ماژول مقایسه تصویر که میتواند برای چارچوبهای مختلف تست خودکار NodeJS که از پروتکل WebDriver پشتیبانی میکنند، استفاده شود
اجراکننده Storybook (بتا)
برای مطالعه مستندات بیشتر درباره اجراکننده Storybook بتا کلیک کنید
اجراکننده Storybook هنوز در مرحله بتا است، مستندات بعداً به صفحات مستندات WebdriverIO منتقل خواهد شد.
این ماژول اکنون از Storybook با یک اجراکننده بصری جدید پشتیبانی میکند. این اجراکننده به طور خودکار یک نمونه محلی/راه دور Storybook را اسکن میکند و اسکرینشاتهای عنصر را برای هر کامپوننت ایجاد میکند. این کار با اضافه کردن
export const config: WebdriverIO.Config = {
// ...
services: ["visual"],
// ....
};
به services
و اجرای npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook
از طریق خط فرمان انجام میشود.
به طور پیشفرض از Chrome در حالت headless به عنوان مرورگر استفاده میکند.
[!NOTE]
- بیشتر گزینههای تست بصری برای اجراکننده Storybook نیز کار میکنند، به مستندات WebdriverIO مراجعه کنید.
- اجراکننده Storybook تمام قابلیتهای شما را بازنویسی میکند و فقط میتواند روی مرورگرهایی که پشتیبانی میکند اجرا شود، به
--browsers
مراجعه کنید.- اجراکننده Storybook از پیکربندی موجود که از قابلیتهای Multiremote استفاده میکند پشتیبانی نمیکند و خطا ایجاد میکند.
- اجراکننده Storybook فقط از وب دسکتاپ پشتیبانی میکند، نه وب موبایل.
گزینههای سرویس اجراکننده Storybook
گزینههای سرویس میتوانند به این صورت ارائه شوند
export const config: WebdriverIO.Config = {
// ...
services: [
[
'visual',
{
// برخی گزینههای پیشفرض
baselineFolder: join(process.cwd(), './__snapshots__/'),
debug: true,
// گزینههای storybook، به گزینههای cli برای توضیحات مراجعه کنید
storybook: {
additionalSearchParams: new URLSearchParams({foo: 'bar', abc: 'def'}),
clip: false,
clipSelector: ''#some-id,
numShards: 4,
// `skipStories` میتواند یک رشته ('example-button--secondary')،
// یک آرایه (['example-button--secondary', 'example-button--small'])
// یا یک regex باشد که باید به عنوان یک رشته ارائه شود ("/.*button.*/gm")
skipStories: ['example-button--secondary', 'example-button--small'],
url: 'https://www.bbc.co.uk/iplayer/storybook/',
version: 6,
// اختیاری - اجازه میدهد مسیر baselines را تغییر دهید. به طور پیشفرض baselines را بر اساس دسته و کامپوننت گروهبندی میکند (مثلاً forms/input/baseline.png)
getStoriesBaselinePath: (category, component) => `path__${category}__${component}`,
},
},
],
],
// ....
}
گزینههای CLI اجراکننده Storybook
--additionalSearchParams
- نوع:
string
- اجباری: خیر
- پیشفرض: ''
- مثال:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --additionalSearchParams="foo=bar&abc=def"
پارامترهای جستجوی اضافی را به URL Storybook اضافه میکند. برای اطلاعات بیشتر به مستندات URLSearchParams مراجعه کنید. رشته باید یک رشته URLSearchParams معتبر باشد.
[!NOTE] نیاز به علامت نقل قول دوگانه است تا از تفسیر
&
به عنوان جداکننده دستور جلوگیری شود. برای مثال با--additionalSearchParams="foo=bar&abc=def"
URL Storybook زیر برای تستهای داستان ایجاد میشود:http://storybook.url/iframe.html?id=story-id&foo=bar&abc=def
.
--browsers
- نوع:
string
- اجباری: خیر
- پیشفرض:
chrome
، میتوانید ازchrome|firefox|edge|safari
انتخاب کنید - مثال:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --browsers=chrome,firefox,edge,safari
- توجه: فقط از طریق CLI در دسترس است
از مرورگرهای ارائه شده برای گرفتن اسکرینشات کامپوننت استفاده میکند
[!NOTE] اطمینان حاصل کنید که مرورگرهایی که میخواهید روی آنها اجرا کنید، روی دستگاه محلی شما نصب شدهاند
--clip
- نوع:
boolean
- اجباری: خیر
- پیشفرض:
true
- مثال:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --clip=false
وقتی غیرفعال است، یک اسکرینشات از viewport ایجاد میکند. وقتی فعال است، اسکرینشاتهای عنصر بر اساس --clipSelector
ایجاد میکند که فضای خالی اطراف اسکرینشات کامپوننت را کاهش میدهد و اندازه اسکرینشات را کاهش میدهد.
--clipSelector
- نوع:
string
- اجباری: خیر
- پیشفرض:
#storybook-root > :first-child
برای Storybook V7 و#root > :first-child:not(script):not(style)
برای Storybook V6، همچنین به--version
مراجعه کنید - مثال:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --clipSelector="#some-id"
این انتخابگر برای موارد زیر استفاده میشود:
- انتخاب عنصر برای گرفتن اسکرینشات
- انتظار برای قابل مشاهده شدن عنصر قبل از گرفتن اسکرینشات
--devices
- نوع:
string
- اجباری: خیر
- پیشفرض: میتوانید از
deviceDescriptors.ts
انتخاب کنید - مثال:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --devices="iPhone 14 Pro Max","Pixel 3 XL"
- توجه: فقط از طریق CLI در دسترس است
از دستگاههای ارائه شده که با deviceDescriptors.ts
مطابقت دارند برای گرفتن اسکرینشاتهای کامپوننت استفاده میکند
[!NOTE]
- اگر تنظیمات دستگاهی را نیاز دارید، لطفاً یک درخواست ویژگی ارسال کنید
- این فقط با Chrome کار میکند:
- اگر
--devices
را ارائه دهید، تمام نمونههای Chrome در حالت شبیهسازی موبایل اجرا میشوند- اگر مرورگرهای دیگری غیر از Chrome نیز ارائه دهید، مانند
--devices --browsers=firefox,safari,edge
، به طور خودکار Chrome را در حالت شبیهسازی موبایل اضافه میکند- اجراکننده Storybook به طور پیشفرض اسکرینشاتهای عنصر ایجاد میکند، اگر میخواهید کل اسکرینشات شبیهسازی شده موبایل را ببینید،
--clip=false
را از طریق خط فرمان ارائه دهید- نام فایل به عنوان مثال به صورت
__snapshots__/example/button/desktop_chrome/example-button--large-local-chrome-iPhone-14-Pro-Max-430x932-dpr-3.png
خواهد بود- منبع: تست یک وبسایت موبایل روی دسکتاپ با استفاده از شبیهسازی موبایل میتواند مفید باشد، اما تستکنندگان باید از تفاوتهای ظریف زیادی آگاه باشند، مانند:
- GPU کاملاً متفاوت، که ممکن است منجر به تغییرات بزرگ در عملکرد شود؛
- رابط کاربری موبایل شبیهسازی نشده است (به ویژه، پنهان کردن نوار URL بر ارتفاع صفحه تأثیر میگذارد)؛
- پاپآپ ابهامزدایی (جایی که یکی از چند هدف لمسی را انتخاب میکنید) پشتیبانی نمیشود؛
- بسیاری از APIهای سختافزاری (برا ی مثال، رویداد orientationchange) در دسترس نیستند.
--headless
- نوع:
boolean
- اجباری: خیر
- پیشفرض:
true
- مثال:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --headless=false
- توجه: فقط از طریق CLI در دسترس است
این تستها را به طور پیشفرض در حالت headless اجرا میکند (وقتی مرورگر از آن پشتیبانی میکند) یا میتواند غیرفعال شود
--numShards
- نوع:
number
- اجباری: خیر
- پیشفرض:
true
- مثال:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --numShards=10
این تعداد نمونههای موازی خواهد بود که برای اجرای داستانها استفاده میشود. این با maxInstances
در فایل wdio.conf
شما محدود میشود.
[!IMPORTANT] هنگام اجرا در حالت
headless
، تعداد را به بیش از 20 افزایش ندهید تا از ناپایداری به دلیل محدودیت منابع جلوگیری شود
--skipStories
- نوع:
string|regex
- اجباری: خیر
- پیشفرض: null
- مثال:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --skipStories="/.*button.*/gm"
این میتواند:
- یک رشته (
example-button--secondary,example-button--small
) - یا یک regex (
"/.*button.*/gm"
)
باشد تا داستانهای خاصی را رد کند. از id
داستان که در URL داستان قابل مشاهده است استفاده کنید. به عنوان مثال، id
در این URL http://localhost:6006/?path=/story/example-page--logged-out
برابر با example-page--logged-out
است
--url
- نوع:
string
- اجباری: خیر
- پیشفرض:
http://127.0.0.1:6006
- مثال:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --url="https://example.com"
URL جایی که نمونه Storybook شما میزبانی میشود.
--version
- نوع:
number
- اجباری: خیر
- پیشفرض: 7
- مثال:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --version=6
این نسخه Storybook است، به طور پیشفرض 7
است. این برای دانستن اینکه آیا clipSelector
نسخه V6 باید استفاده شود، مورد نیاز است.
تست تعاملی Storybook
تست تعاملی Storybook به شما امکان میدهد با کامپوننت خود با ایجاد اسکریپتهای سفارشی با دستورات WDIO برای قرار دادن یک کامپوننت در یک وضعیت خاص تعامل داشته باشید. به عنوان مثال، به قطعه کد زیر نگاه کنید:
import { browser, expect } from "@wdio/globals";
describe("Storybook Interaction", () => {
it("should create screenshots for the logged in state when it logs out", async () => {
const componentId = "example-page--logged-in";
await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-in-state`
);
await $("button=Log out").click();
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-out-state`
);
});
it("should create screenshots for the logged out state when it logs in", async () => {
const componentId = "example-page--logged-out";
await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-out-state`
);
await $("button=Log in").click();
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-in-state`
);
});
});
دو تست روی دو کامپوننت مختلف اجرا میشوند. هر تست ابتدا یک وضعیت را تنظیم میکند و سپس یک اسکرینشات میگیرد. همچنین متوجه خواهید شد که یک دستور سفارشی جدید معرفی شده است که میتوانید آن را اینجا بیابید.
فایل مشخصات بالا را میتوان در یک پوشه ذخیره کرد و با دستور زیر به خط فرمان اضافه کرد:
pnpm run test.local.desktop.storybook.localhost -- --spec='tests/specs/storybook-interaction/*.ts'
اجراکننده Storybook ابتدا به طور خودکار نمونه Storybook شما را اسکن میکند و سپس تستهای شما را به داستانهایی که باید مقایسه شوند، اضافه میکند. اگر نمیخواهید کامپوننتهایی که برای تست تعاملی استفاده میکنید دوبار مقایسه شوند، میتوانید یک فیلتر اضافه کنید تا داستانهای "پیشفرض" را از اسکن حذف کنید با ارائه فیلتر --skipStories
. این به شکل زیر خواهد بود:
pnpm run test.local.desktop.storybook.localhost -- --skipStories="/example-page.*/gm" --spec='tests/specs/storybook-interaction/*.ts'
دستور سفارشی جدید
یک دستور سفارشی جدید به نام browser.waitForStorybookComponentToBeLoaded({ id: 'componentId' })
به شیء browser/driver
اضافه میشود که به طور خودکار کامپوننت را بارگذاری میکند و منتظر میماند تا کار تمام شود، بنابراین نیازی به استفاده از روش browser.url('url.com')
ندارید. میتوان از آن به این صورت استفاده کرد
import { browser, expect } from "@wdio/globals";
describe("Storybook Interaction", () => {
it("should create screenshots for the logged in state when it logs out", async () => {
const componentId = "example-page--logged-in";
await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-in-state`
);
await $("button=Log out").click();
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-out-state`
);
});
it("should create screenshots for the logged out state when it logs in", async () => {
const componentId = "example-page--logged-out";
await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-out-state`
);
await $("button=Log in").click();
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-in-state`
);
});
});
گزینهها عبارتند از:
additionalSearchParams
- نوع:
URLSearchParams
- اجباری: خیر
- پیشفرض:
new URLSearchParams()
- مثال:
await browser.waitForStorybookComponentToBeLoaded({
additionalSearchParams: new URLSearchParams({ foo: "bar", abc: "def" }),
id: "componentId",
});
این پارامترهای جستجوی اضافی را به URL Storybook اضافه میکند، در مثال بالا URL به صورت http://storybook.url/iframe.html?id=story-id&foo=bar&abc=def
خواهد بود.
برای اطلاعات بیشتر به مستندات URLSearchParams مراجعه کنید.
clipSelector
- نوع:
string
- اجباری: خیر
- پیشفرض:
#storybook-root > :first-child
بر ای Storybook V7 و#root > :first-child:not(script):not(style)
برای Storybook V6 - مثال:
await browser.waitForStorybookComponentToBeLoaded({
clipSelector: "#your-selector",
id: "componentId",
});