مرجع ویژگی ها

سوفیا املیانوا
Sofia Emelianova
GitHub
جسلین ین

راه‌هایی برای اشتراک‌گذاری جریان‌های کاربر، ویرایش آن‌ها و مراحل آن‌ها را در این مرجع ویژگی‌های جامع پانل ضبط ابزارهای توسعه‌دهنده Chrome کشف کنید.

برای یادگیری اصول اولیه کار با پانل ضبط ، به ضبط، پخش مجدد و اندازه گیری جریان کاربر مراجعه کنید.

میانبرها را یاد بگیرید و سفارشی کنید

از میانبرها برای پیمایش سریعتر ضبط کننده استفاده کنید. برای لیستی از میانبرهای پیش فرض، به میانبرهای صفحه کلید پانل ضبط کننده مراجعه کنید.

برای باز کردن راهنمایی که همه میانبرها را درست در ضبط کننده فهرست می کند، کلیک کنید نمایش میانبرها نمایش میانبرها در گوشه بالا سمت راست.

دکمه نمایش میانبرها.

برای سفارشی کردن میانبرهای ضبط :

  1. باز کن تنظیمات. تنظیمات > میانبرها .
  2. به قسمت Recorder بروید.
  3. مراحل سفارشی کردن میانبرها را دنبال کنید.

جریان های کاربر را ویرایش کنید

پانل DevTools Recorder یک منوی کشویی در هدر دارد که به شما امکان می دهد یک جریان کاربر را برای ویرایش انتخاب کنید.

در بالای پانل ضبط ، گزینه هایی برای شما وجود دارد که:

  1. یک ضبط جدید اضافه کنید اضافه کردن. . برای افزودن یک ضبط جدید، روی نماد + کلیک کنید.
  2. مشاهده تمام موارد ضبط شده بیشتر گسترش دهید. . کشویی لیستی از ضبط های ذخیره شده را نشان می دهد. برای گسترش و مدیریت فهرست ضبط‌های ذخیره‌شده، گزینه [تعداد] ضبط (ها) را انتخاب کنید. مشاهده تمام موارد ضبط شده

  3. یک ضبط را صادر کنید دانلود فایل. . برای سفارشی‌سازی بیشتر اسکریپت یا اشتراک‌گذاری آن برای اهداف گزارش اشکال، می‌توانید جریان کاربر را در یکی از قالب‌های زیر صادر کنید:

    برای اطلاعات بیشتر در مورد قالب‌ها، به صادرات یک جریان کاربر مراجعه کنید.

  4. یک ضبط را وارد کنید آپلود فایل. . فقط با فرمت JSON.

  5. یک ضبط را حذف کنید حذف. . ضبط انتخاب شده را حذف کنید.

همچنین می توانید با کلیک بر روی دکمه ویرایش، نام ضبط را ویرایش کنید ویرایش کنید. در کنار آن

جریان های کاربر را به اشتراک بگذارید

می‌توانید جریان‌های کاربر را در Recorder صادر و وارد کنید. این برای گزارش اشکال مفید است زیرا می‌توانید یک رکورد دقیق از مراحلی که یک اشکال را بازتولید می‌کنند به اشتراک بگذارید. همچنین می توانید آن را با کتابخانه های خارجی صادر و پخش کنید.

یک جریان کاربر را صادر کنید

برای صادر کردن یک جریان کاربر:

  1. جریان کاربری را که می خواهید صادر کنید باز کنید.
  2. کلیک دانلود فایل. در بالای پانل Recorder صادر کنید . گزینه های فرمت صادراتی
  3. یکی از فرمت های زیر را از لیست کشویی انتخاب کنید:
    • فایل JSON . فایل ضبط شده را به صورت فایل JSON دانلود کنید.
    • @puppeteer/replay . ضبط را به عنوان یک اسکریپت بازپخش عروسکی دانلود کنید.
    • عروسک گردان . ضبط را به عنوان فیلمنامه عروسکی دانلود کنید.
    • عروسک گردان (از جمله تجزیه و تحلیل فانوس دریایی) . ضبط را به‌عنوان اسکریپت Puppeteer با تجزیه و تحلیل فانوس دریایی جاسازی شده دانلود کنید.
    • یک یا چند گزینه ارائه شده توسط برنامه های افزودنی صادر کننده ضبط .
  4. فایل را ذخیره کنید.

با هر گزینه صادرات پیش فرض می توانید کارهای زیر را انجام دهید:

  • JSON . شیء JSON قابل خواندن توسط انسان را ویرایش کنید و فایل JSON را به Recorder بازگردانید .
  • @puppeteer/replay . اسکریپت را با کتابخانه Puppeteer Replay دوباره پخش کنید. هنگام صادرات به عنوان یک اسکریپت @puppeteer/replay، مراحل یک شی JSON باقی می‌مانند. اگر می‌خواهید با خط لوله CI/CD خود یکپارچه شوید، اما همچنان انعطاف‌پذیری لازم برای ویرایش مراحل را به‌عنوان JSON، تبدیل و وارد کردن مجدد آن‌ها به ضبط‌کننده ، این گزینه عالی است.
  • فیلمنامه عروسکی . فیلمنامه را با Puppeteer دوباره پخش کنید. از آنجایی که مراحل به جاوا اسکریپت تبدیل می شوند، می توانید سفارشی سازی دقیق تری داشته باشید، به عنوان مثال، حلقه کردن مراحل. یک اخطار، نمی‌توانید این اسکریپت را دوباره به Recorder وارد کنید.

  • عروسک گردان (از جمله تجزیه و تحلیل فانوس دریایی) . این گزینه صادرات مانند گزینه قبلی است اما شامل کدهایی است که تجزیه و تحلیل Lighthouse را ایجاد می کند.

    اسکریپت را اجرا کنید و خروجی را در فایل flow.report.html بررسی کنید:

    # npm i puppeteer lighthouse
node your_export.js

    گزارش Lighthouse در کروم باز شد.

با نصب یک افزونه در قالب سفارشی صادر کنید

به افزونه های ضبط کننده مراجعه کنید.

یک جریان کاربر را وارد کنید

برای وارد کردن یک جریان کاربر:

  1. روی Import کلیک کنید آپلود فایل. دکمه در بالای پانل ضبط . ضبط واردات.
  2. فایل JSON را با جریان کاربر ضبط شده انتخاب کنید.
  3. کلیک کنید بر روی بازپخش. دکمه پخش مجدد برای اجرای جریان کاربر وارد شده.

پخش مجدد با کتابخانه های خارجی

Puppeteer Replay یک کتابخانه منبع باز است که توسط تیم Chrome DevTools نگهداری می شود. در بالای Puppeteer ساخته شده است. این یک ابزار خط فرمان است، می توانید فایل های JSON را با آن دوباره پخش کنید.

جدا از آن، می‌توانید فایل‌های JSON را با کتابخانه‌های شخص ثالث زیر تبدیل و دوباره پخش کنید.

تبدیل جریان های کاربر JSON به اسکریپت های سفارشی:

  • Cypress Chrome Recorder . می توانید از آن برای تبدیل فایل های JSON جریان کاربر به اسکریپت های تست Cypress استفاده کنید. این نسخه ی نمایشی را تماشا کنید تا آن را در عمل ببینید.
  • Nightwatch Chrome Recorder . می توانید از آن برای تبدیل فایل های JSON جریان کاربر به اسکریپت های تست Nightwatch استفاده کنید.
  • CodeceptJS Chrome Recorder . می توانید از آن برای تبدیل فایل های JSON جریان کاربر به اسکریپت های تست CodeceptJS استفاده کنید.

پخش مجدد جریان های کاربر JSON:

  • پخش مجدد با Testcafe . می‌توانید از TestCafe برای پخش مجدد فایل‌های JSON جریان کاربر و تولید گزارش‌های آزمایشی برای این ضبط‌ها استفاده کنید.
  • پخش مجدد با Sauce Labs . می توانید فایل های JSON را در Sauce Labs با استفاده از saucectl دوباره پخش کنید.

اشکال زدایی جریان های کاربر

مانند هر کد دیگری، گاهی اوقات باید جریان کاربر ثبت شده را اشکال زدایی کنید.

برای کمک به رفع اشکال، پنل Recorder به شما امکان می دهد سرعت پخش مجدد را کاهش دهید، نقاط شکست را تعیین کنید، مراحل اجرا را طی کنید و کد را در قالب های مختلف به موازات مراحل بررسی کنید.

سرعت پخش مجدد را کاهش دهید

به طور پیش فرض، Recorder جریان کاربر را با حداکثر سرعت ممکن پخش می کند. برای درک آنچه در ضبط اتفاق می افتد، می توانید سرعت پخش را کاهش دهید:

  1. باز کن بازپخش. بازپخش منوی کشویی
  2. یکی از گزینه های سرعت پخش را انتخاب کنید:
    • عادی (پیش فرض)
    • آهسته. تدریجی
    • خیلی کند
    • فوق العاده کند

پخش آهسته

کد را بررسی کنید

برای بررسی کد یک جریان کاربر در قالب های مختلف:

  1. ضبط را در پانل ضبط باز کنید.
  2. روی نمایش کد در گوشه سمت راست بالای لیست مراحل کلیک کنید. دکمه نمایش کد.
  3. Recorder نمای کنار هم از مراحل و کد آنها را نشان می دهد. نمای کناری مراحل و کد آنها.
  4. همانطور که ماوس را روی یک مرحله نگه می دارید، ضبط کننده کد مربوطه خود را در هر قالبی، از جمله کدهای ارائه شده توسط برنامه های افزودنی، برجسته می کند.

  5. فهرست کشویی قالب را گسترش دهید تا قالبی را انتخاب کنید که برای صادر کردن جریان های کاربر استفاده می کنید.

    لیست کشویی قالب.

    این می‌تواند یکی از سه قالب پیش‌فرض (JSON، @puppeteer/replay ، اسکریپت Puppeteer یا قالبی باشد که توسط یک برنامه افزودنی ارائه شده است.

  6. با ویرایش پارامترها و مقادیر مرحله به اشکال زدایی ضبط خود ادامه دهید. نمای کد قابل ویرایش نیست، اما همانطور که در مراحل سمت چپ تغییراتی ایجاد می‌کنید، به‌روزرسانی می‌شود.

نقاط شکست را تنظیم کنید و مرحله به مرحله اجرا کنید

برای تعیین نقطه شکست و اجرای مرحله به مرحله:

  1. ماوس را روی گام. کنار هر مرحله از ضبط حلقه بزنید. دایره به a تبدیل می شود نقطه شکست. نماد نقطه شکست
  2. کلیک کنید بر روی نقطه شکست. نماد نقطه شکست و ضبط را دوباره پخش کنید . اعدام ها در نقطه شکست متوقف می شوند. توقف اجرا
  3. برای گام برداشتن در مرحله اجرا، روی یک مرحله را اجرا کنید دکمه یک مرحله ای را در نوار اکشن در بالای پانل Recorder اجرا کنید.
  4. برای توقف پخش مجدد، کلیک کنید مکث کنید. لغو پخش مجدد

مراحل ویرایش

شما می توانید هر مرحله از ضبط را با کلیک کردن بر روی آن ویرایش کنید بسط دادن. دکمه کنار آن، هم در حین ضبط و هم بعد از آن.

همچنین می توانید مراحل از دست رفته را اضافه کنید و مواردی که به طور تصادفی ضبط شده را حذف کنید .

مراحل را اضافه کنید

گاهی اوقات، ممکن است لازم باشد مراحل را به صورت دستی اضافه کنید. به عنوان مثال، Recorder به طور خودکار رویدادهای hover را ضبط نمی کند زیرا این کار ضبط را آلوده می کند و همه این رویدادها مفید نیستند. با این حال، عناصر رابط کاربری مانند منوهای کشویی فقط در hover ظاهر می شوند. می‌توانید به‌طور دستی مراحل hover را به جریان‌های کاربر اضافه کنید که به چنین عناصری بستگی دارد.

برای افزودن دستی یک مرحله:

  1. این صفحه نمایشی را باز کنید و ضبط جدیدی را شروع کنید. برای ثبت یک رویداد شناور، ضبط را شروع کنید.
  2. ماوس را بر روی عنصر در نمای مشاهده نگه دارید. یک منوی اکشن ظاهر می شود. شناور روی عنصر.
  3. یک عمل را از منو انتخاب کنید و ضبط را پایان دهید. Recorder فقط رویداد کلیک را ضبط می کند. کلیک کردن روی یک عمل و پایان دادن به ضبط.
  4. با کلیک کردن، سعی کنید ضبط را دوباره پخش کنید بازپخش. بازپخش . پخش مجدد پس از مهلت زمانی ناموفق می شود زیرا ضبط کننده نمی تواند به عنصر موجود در منو دسترسی پیدا کند. پخش مجدد انجام نشد.
  5. کلیک کنید بر روی دکمه سه نقطه. دکمه سه نقطه در کنار مرحله کلیک و افزودن مرحله قبل را انتخاب کنید. اضافه کردن یک مرحله قبل از کلیک.
  6. مرحله جدید را گسترش دهید. به طور پیش فرض، دارای نوع waitForElement است. روی مقدار کناری برای type کلیک کنید و hover انتخاب کنید. انتخاب شناور.
  7. سپس یک انتخابگر مناسب برای مرحله جدید تنظیم کنید. کلیک انتخاب کنید. را انتخاب کنید ، سپس روی قسمتی از Hover over me! عنصری که خارج از منوی پاپ آپ است. انتخابگر روی #clickable تنظیم شده است. تنظیم انتخابگر
  8. دوباره ضبط را دوباره پخش کنید. با اضافه شدن مرحله شناور، Recorder با موفقیت جریان را دوباره پخش می کند. موفقیت در پخش مجدد

اظهارات را اضافه کنید

در حین ضبط، می توانید به عنوان مثال، ویژگی های HTML و خصوصیات جاوا اسکریپت را بیان کنید. برای افزودن یک ادعا:

  1. برای مثال، یک ضبط را در این صفحه نمایشی شروع کنید.

  2. روی افزودن ادعا کلیک کنید.

    دکمه افزودن ادعا.

    Recorder یک مرحله waitForElement قابل تنظیم ایجاد می کند.

  3. انتخابگرها را برای این مرحله مشخص کنید .

  4. مرحله را پیکربندی کنید اما نوع waitForElement آن را تغییر ندهید. برای مثال می توانید مشخص کنید:

    • ویژگی HTML روی افزودن ویژگی ها کلیک کنید و نام ویژگی و مقداری را که عناصر در این صفحه استفاده می کنند تایپ کنید. به عنوان مثال، data-test: <value> .
    • ویژگی جاوا اسکریپت . روی افزودن خواص کلیک کنید و نام و مقدار ویژگی را با فرمت JSON تایپ کنید. برای مثال، {".innerText":"<text>"} .
    • سایر ویژگی های مرحله . برای مثال visible: true .

  5. به ضبط بقیه جریان کاربر ادامه دهید و سپس ضبط را متوقف کنید.

  6. کلیک بازپخش. بازپخش . اگر یک ادعا ناموفق باشد، ضبط کننده یک خطا را پس از مهلت زمانی نمایش می دهد.

برای مشاهده عملی این گردش کار، ویدیوی زیر را تماشا کنید.

مراحل را کپی کنید

به جای صادر کردن کل جریان کاربر ، می توانید یک مرحله را در کلیپ بورد کپی کنید:

  1. روی مرحله ای که می خواهید کپی کنید کلیک راست کنید یا روی آن کلیک کنید منوی سه نقطه نماد سه نقطه در کنار آن
  2. در منوی کشویی یکی از گزینه های Copy as ... را انتخاب کنید.

انتخاب گزینه کپی از منوی کشویی.

می‌توانید مراحل را در قالب‌های مختلف کپی کنید: JSON، Puppeteer ، @puppeteer/replay ، و موارد ارائه شده توسط برنامه‌های افزودنی .

مراحل را بردارید

برای حذف یک مرحله به طور تصادفی ضبط شده، روی مرحله کلیک راست کرده یا روی آن کلیک کنید منوی سه نقطه نماد سه نقطه در کنار آن و حذف مرحله را انتخاب کنید.

یک پله بردارید

علاوه بر این، Recorder به طور خودکار دو مرحله جداگانه را به شروع هر ضبط اضافه می کند:

ضبط با درگاه نمایش و مراحل ناوبری تنظیم شده است.

  • درگاه دید را تنظیم کنید . به شما امکان می‌دهد ابعاد، مقیاس‌بندی و سایر ویژگی‌های درگاه دید را کنترل کنید.
  • پیمایش کنید . URL را تنظیم می کند و به طور خودکار صفحه را برای هر بازپخش تازه می کند.

برای انجام اتوماسیون درون صفحه بدون بارگیری مجدد صفحه، مرحله پیمایش را همانطور که در بالا توضیح داده شد حذف کنید.

مراحل را پیکربندی کنید

برای پیکربندی یک مرحله:

  1. نوع آن را مشخص کنید: click ، doubleClick ، hover ، (ورودی) change ، keyUp ، keyDown ، scroll ، close ، navigate (به یک صفحه)، waitForElement ، waitForExpression ، یا setViewport .

    سایر خصوصیات به مقدار type بستگی دارد.

  2. ویژگی های مورد نیاز را در زیر type مشخص کنید.

    یک مرحله را پیکربندی کنید.

  3. روی دکمه های مربوطه کلیک کنید تا ویژگی های نوع خاص را اضافه کنید و آنها را مشخص کنید.

برای لیستی از ویژگی های موجود، ویژگی های مرحله را ببینید.

برای حذف یک ویژگی اختیاری، روی آن کلیک کنید برداشتن. دکمه حذف کنار آن

برای افزودن یا حذف یک عنصر به یا از یک ویژگی آرایه، روی دکمه های + یا - در کنار عنصر کلیک کنید.

ویژگی های مرحله

هر مرحله می تواند ویژگی های اختیاری زیر را داشته باشد:

  • target — یک URL برای هدف پروتکل ابزار توسعه کروم (CDP) ، کلمه کلیدی main پیش فرض به صفحه فعلی اشاره دارد.
  • assertedEvents که در حال حاضر فقط می توانند یک رویداد navigation واحد باشند

سایر خصوصیات رایج موجود برای اکثر انواع مرحله عبارتند از:

  • frame - آرایه‌ای از شاخص‌های مبتنی بر صفر که یک iframe قابل تودرتو را مشخص می‌کند. به عنوان مثال، می توانید اولین (0) iframe را در داخل یک فریم دوم (1) از هدف اصلی به عنوان [1, 0] شناسایی کنید.
  • timeout - تعدادی میلی ثانیه برای صبر کردن قبل از اجرای یک مرحله. برای اطلاعات بیشتر، به تنظیم وقفه های زمانی برای مراحل مراجعه کنید.
  • selectors - آرایه ای از انتخابگرها. برای اطلاعات بیشتر، به درک انتخابگرها مراجعه کنید.

ویژگی های نوع خاص عبارتند از:

تایپ کنید ویژگی ضروری شرح
click
doubleClick		 offsetX
offsetY		 بررسی. نسبت به سمت چپ بالای کادر محتوای عنصر، بر حسب پیکسل
click
doubleClick		 button دکمه اشاره گر: اولیه | کمکی | دوم | برگشت | رو به جلو
change value بررسی. ارزش نهایی
keyDown
keyUp		 key بررسی. نام کلید
scroll x
y		 اسکرول مطلق موقعیت های x و y در پیکسل، پیش فرض 0
navigate url بررسی. URL هدف
waitForElement operator >= | == (پیش فرض) | <=
waitForElement count تعداد عناصر شناسایی شده توسط یک انتخابگر
waitForElement attributes ویژگی HTML و مقدار آن
waitForElement properties ویژگی جاوا اسکریپت و مقدار آن در JSON
waitForElement visible بولی. درست است اگر عنصر در DOM باشد و قابل مشاهده باشد ( display: none یا visibility: hidden )
waitForElement
waitForExpression		 asserted events در حال حاضر فقط type: navigation اما می توانید عنوان و URL را مشخص کنید
waitForElement
waitForExpression		 timeout حداکثر زمان انتظار بر حسب میلی ثانیه
waitForExpression expression بررسی. عبارت جاوا اسکریپت که به درستی تبدیل می شود
setViewport width
height		 بررسی. عرض و ارتفاع نما بر حسب پیکسل
setViewport deviceScaleFactor بررسی. مشابه Device Pixel Ratio (DPR)، پیش‌فرض ۱
setViewport isMobile
hasTouch
isLandscape		 بررسی. پرچم های بولی که مشخص می کند:
  • متا تگ را در نظر بگیرید
  • پشتیبانی از رویدادهای لمسی
  • نمایش در حالت افقی

    • دو ویژگی وجود دارد که باعث توقف پخش مجدد می شود:

    • ویژگی waitForElement باعث می شود که مرحله منتظر حضور (یا عدم وجود) تعدادی از عناصر شناسایی شده توسط یک انتخابگر باشد. برای مثال، مرحله زیر منتظر می‌ماند تا کمتر از سه عنصر در صفحه مطابق با انتخابگر .my-class باشد.

        "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,

    • ویژگی waitForExpression باعث می‌شود که مرحله منتظر بماند تا یک عبارت جاوا اسکریپت به true تبدیل شود. به عنوان مثال، مرحله زیر برای دو ثانیه مکث می‌کند و سپس به true تبدیل می‌شود و اجازه می‌دهد پخش مجدد ادامه یابد.

        "type": "waitForExpression",
  "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",

    وقفه های زمانی را برای مراحل تنظیم کنید

    در صورتی که صفحه شما درخواست‌های شبکه کند یا انیمیشن‌های طولانی داشته باشد، در مراحلی که از زمان پیش‌فرض 5000 میلی‌ثانیه فراتر می‌رود، پخش مجدد ممکن است با شکست مواجه شود.

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

    برای تنظیم زمان پیش‌فرض برای هر مرحله به طور همزمان:

    1. روی تنظیمات Replay کلیک کنید تا کادر Timeout قابل ویرایش باشد.

      تنظیمات پخش مجدد

    2. در کادر Timeout ، مقدار وقفه را بر حسب میلی ثانیه تنظیم کنید.

    3. کلیک بازپخش. برای مشاهده مهلت زمانی پیش‌فرض تنظیم‌شده، دوباره پخش کنید .

    برای بازنویسی مهلت زمانی پیش‌فرض در یک مرحله خاص:

    1. مرحله را باز کنید و روی Add timeout کلیک کنید.

      اضافه کردن بازه زمانی

    2. روی timeout: <value> و مقدار را بر حسب میلی ثانیه تنظیم کنید.

      مقدار وقفه را تنظیم کنید.

    3. کلیک بازپخش. برای مشاهده مرحله با وقفه در عمل، دوباره پخش کنید .

    برای حذف بازنویسی مهلت زمانی روی یک مرحله، روی حذف کلیک کنید حذف. دکمه کنار آن

    انتخابگرها را درک کنید

    هنگامی که یک ضبط جدید را شروع می کنید، می توانید موارد زیر را پیکربندی کنید:

    پیکربندی یک ضبط جدید

    • در کادر متنی ویژگی Selector ، یک ویژگی تست سفارشی را وارد کنید. Recorder از این ویژگی برای شناسایی انتخابگرها به جای لیستی از ویژگی های آزمایشی رایج استفاده می کند.

    • در انتخابگر انواع برای ثبت مجموعه چک باکس ها، انواع انتخابگرها را برای شناسایی خودکار انتخاب کنید:

      • چک باکس. CSS . انتخابگرهای نحوی
      • چک باکس. آریا . انتخابگرهای معنایی
      • چک باکس. متن انتخاب‌کنندگان با کوتاه‌ترین متن منحصربه‌فرد در صورت وجود.
      • چک باکس. XPath . انتخابگرهایی که از زبان مسیر XML استفاده می کنند.
      • چک باکس. سوراخ کردن . انتخابگرها مشابه نمونه های CSS هستند اما می توانند سایه DOM را سوراخ کنند .

    انتخابگرهای آزمون رایج

    برای صفحات وب ساده، ویژگی های id و ویژگی های class CSS برای Recorder کافی است تا انتخابگرها را شناسایی کند. با این حال، ممکن است همیشه اینطور نباشد زیرا:

    • صفحات وب شما ممکن است از کلاس های پویا یا شناسه هایی استفاده کنند که تغییر می کنند.
    • انتخابگرهای شما ممکن است به دلیل تغییرات کد یا چارچوب خراب شوند.

    برای مثال، مقادیر class CSS ممکن است به طور خودکار برای برنامه‌های توسعه‌یافته با چارچوب‌های جاوا اسکریپت مدرن (مثلاً React ، Angular ، Vue ) و چارچوب‌های CSS تولید شوند.

    کلاس‌های CSS به‌طور خودکار با نام‌های تصادفی تولید شده است.

    در این موارد، می‌توانید از ویژگی‌های data-* برای ایجاد آزمون‌های انعطاف‌پذیرتر استفاده کنید. در حال حاضر برخی از انتخابگرهای معمولی data-* وجود دارد که توسعه دهندگان از آنها برای اتوماسیون استفاده می کنند. Recorder از آنها نیز پشتیبانی می کند.

    اگر انتخابگرهای تست متداول زیر را در وب سایت خود تعریف کرده باشید، Recorder به طور خودکار ابتدا آنها را شناسایی و استفاده می کند:

    • data-testid
    • data-test
    • data-qa
    • data-cy
    • data-test-id
    • data-qa-id
    • data-testing

    به عنوان مثال، عنصر "کاپوچینو" را در این صفحه نمایشی بررسی کنید و ویژگی های تست را ببینید:

    انتخابگرهای تست تعریف شده

    یک کلیک روی "کاپوچینو" ضبط کنید، مرحله مربوطه را در ضبط گسترش دهید و انتخابگرهای شناسایی شده را بررسی کنید:

    انتخابگر تست مشترک شناسایی شد.

    انتخابگر ضبط را سفارشی کنید

    اگر انتخابگرهای آزمایشی رایج برای شما کار نمی کنند، می توانید انتخابگر یک ضبط را سفارشی کنید.

    به عنوان مثال، این صفحه نمایشی از ویژگی data-automate به عنوان انتخابگر استفاده می کند. ضبط جدیدی را شروع کنید و data-automate به عنوان ویژگی انتخابگر وارد کنید.

    انتخابگر ضبط را سفارشی کنید.

    یک آدرس ایمیل را پر کنید و مقدار انتخابگر ( [data-automate=email-address] ) را رعایت کنید.

    نتیجه انتخاب انتخابگر سفارشی.

    اولویت انتخابگر

    Recorder بسته به اینکه یک ویژگی انتخابگر CSS سفارشی را مشخص کرده اید، به دنبال انتخابگرها به ترتیب زیر می گردد:

    • اگر مشخص شود:
      1. انتخابگر CSS با ویژگی CSS سفارشی شما.
      2. انتخابگرهای XPath
      3. انتخابگر ARIA در صورت یافتن.
      4. انتخابگر با کوتاه ترین متن منحصر به فرد در صورت یافتن.
    • اگر مشخص نشده باشد:
      1. انتخابگر ARIA در صورت یافتن.
      2. انتخابگرهای CSS با اولویت زیر:
        1. متداول ترین ویژگی های مورد استفاده برای آزمایش:
          • data-testid
          • data-test
          • data-qa
          • data-cy
          • data-test-id
          • data-qa-id
          • data-testing
        2. ویژگی های شناسه، به عنوان مثال، <div id="some_ID"> .
        3. انتخابگرهای معمولی CSS
      3. انتخابگرهای XPath
      4. انتخابگرهای پیرس.
      5. انتخابگر با کوتاه ترین متن منحصر به فرد در صورت یافتن.

    چندین انتخابگر CSS، XPath و Pierce می تواند وجود داشته باشد. ضبط ضبط می کند:

    • انتخابگرهای CSS و XPath معمولی در هر سطح ریشه، یعنی میزبان‌های سایه تودرتو، در صورت وجود.
    • انتخابگرهایی را سوراخ کنید که در بین همه عناصر در همه ریشه های سایه منحصر به فرد هستند.