مرجع الميزات

يمكنك التعرّف على طرق مشاركة مسارات المستخدِمين وتعديلها وخطواتها في مرجع الميزات الشامل هذا الخاص بلوحة المسجِّل في "أدوات مطوّري البرامج في Chrome".

للتعرّف على أساسيات استخدام لوحة المسجّلة الذكية، اطّلِع على مقالة تسجيل مسارات المستخدِمين وإعادة تشغيلها وقياسها.

التعرّف على الاختصارات وتخصيصها

استخدِم الاختصارات للتنقّل في المسجِّلة بشكل أسرع. للحصول على قائمة بالاختصارات التلقائية، يُرجى الاطّلاع على اختصارات لوحة التسجيل.

لفتح تلميح يسرد جميع الاختصارات مباشرةً في المسجِّل، انقر على عرض الاختصارات في أعلى يسار الشاشة.

زر "عرض الاختصارات".

لتخصيص اختصارات المسجِّل:

  1. افتح الإعدادات. الإعدادات > الاختصارات.
  2. انتقِل للأسفل إلى قسم المسجِّل.
  3. اتّبِع الخطوات الواردة في مقالة تخصيص الاختصارات.

تعديل مسارات المستخدِمين

تحتوي لوحة DevTools Recorder على قائمة منسدلة في العنوان تتيح لك اختيار مسار مستخدم لتعديله.

في أعلى لوحة المسجّلة الذكية، تتوفّر لك خيارات لإجراء ما يلي:

  1. إضافة تسجيل جديدإضافة. انقر على الرمز + من أجل إضافة تسجيل جديد.
  2. عرض كل التسجيلاتتوسيع المزيد تعرض القائمة المنسدلة قائمة التسجيلات المحفوظة. حدِّد خيار [number] تسجيلاً لتوسيع قائمة التسجيلات المحفوظة وإدارتها. عرض كل التسجيلات
  3. تصدير تسجيلتنزيل الملف.: لتخصيص النص البرمجي بشكل أكبر أو لمشاركته لأغراض الإبلاغ عن الأخطاء، يمكنك تصدير مسار المستخدِم بأحد التنسيقَين التاليَين:

    لمزيد من المعلومات عن التنسيقات، يُرجى الاطّلاع على تصدير مسار مستخدِم.

  4. استيراد تسجيلتحميل ملف. بتنسيق JSON فقط

  5. حذف تسجيلحذف. حذف التسجيل المحدّد

يمكنك أيضًا تعديل اسم التسجيل من خلال النقر على زر التعديل تعديل. بجانبه.

مشاركة مسارات المستخدِمين

يمكنك تصدير مسارات المستخدِمين واستيرادها في "أداة التسجيل". ويُعدّ هذا الإجراء مفيدًا للإبلاغ عن الأخطاء لأنّه يمكنك مشاركة سجلّ دقيق للخطوات التي تؤدي إلى ظهور خطأ. ويمكنك أيضًا تصديره وإعادة تشغيله باستخدام مكتبات خارجية.

تصدير مسار مستخدِم

لتصدير تدفق المستخدم:

  1. افتح مسار المستخدِم الذي تريد تصديره.
  2. انقر على تنزيل الملف تصدير في أعلى لوحة المسجّلة الذكية. تصدير خيارات التنسيق
  3. اختَر أحد التنسيقات التالية من القائمة المنسدلة:
    • ملف JSON نزِّل التسجيل كملف JSON.
    • @puppeteer/replay. نزِّل التسجيل كنص برمجي لإعادة تشغيل Puppeteer.
    • Puppeteer نزِّل التسجيل كنص برمجي Puppeteer.
    • الدمى المتحركة (بما في ذلك تحليل Lighthouse): نزِّل التسجيل كنص برمجي Puppeteer يتضمّن تحليل Lighthouse مضمّنًا.
    • خيار واحد أو أكثر يوفّره تصدير الإضافات في "المسجّل"
  4. احفظ الملف.

يمكنك تنفيذ ما يلي مع كل خيار تصدير تلقائي:

  • JSON: عدِّل عنصر JSON القابل للقراءة واستورِد ملف JSON مرة أخرى إلى المسجِّل.
  • @puppeteer/replay. أعِد تشغيل النص البرمجي باستخدام مكتبة Puppeteer Replay. عند التصدير كملف نصي من النوع @puppeteer/replay، تظل الخطوات كائنًا بتنسيق JSON. هذا الخيار مثالي إذا كنت تريد الدمج مع مسار التكامل/النشر المبرمَج (CI/CD) مع الحفاظ على المرونة في تعديل الخطوات بتنسيق JSON، ثم تحويلها واستيرادها مرة أخرى إلى المسجِّل.
  • نص Puppeteer: أعِد تشغيل النص البرمجي باستخدام Puppeteer. وبما أنّه يتم تحويل الخطوات إلى JavaScript، يمكنك إجراء المزيد من عمليات التخصيص الدقيقة، مثل تكرار الخطوات. يُرجى العِلم بأنّه لا يمكنك استيراد هذا النص البرمجي مرة أخرى إلى المسجّلة الذكية.
  • Puppeteer (بما في ذلك تحليل Lighthouse) خيار التصدير هذا مماثل للخيار السابق، ولكنّه يتضمّن رمزًا برمجيًا ينشئ تحليل Lighthouse.

    شغِّل النص البرمجي واطّلِع على النتيجة في ملف flow.report.html:

    # npm i puppeteer lighthouse
    node your_export.js
    

    تم فتح تقرير Lighthouse في Chrome.

التصدير بتنسيق مخصّص من خلال تثبيت إضافة

اطّلِع على إضافات أداة Recorder.

استيراد تدفق المستخدم

لاستيراد مسار مستخدِم، اتّبِع الخطوات التالية:

  1. انقر على الزر استيرادتحميل ملف في أعلى لوحة المسجِّل. استيراد التسجيل
  2. اختَر ملف JSON الذي يتضمّن مسار المستخدِم المسجَّل.
  3. انقر على الزر إعادة التشغيل.إعادة تشغيل لتشغيل مسار المستخدِم المستورَد.

إعادة التشغيل باستخدام مكتبات خارجية

Puppeteer Replay هي مكتبة مفتوحة المصدر يديرها فريق "أدوات مطوري البرامج في Chrome". وهي تستند إلى Puppeteer. وهي أداة سطر أوامر يمكنك من خلالها إعادة تشغيل ملفات JSON.

بالإضافة إلى ذلك، يمكنك تحويل ملفات JSON وإعادة تشغيلها باستخدام المكتبات التابعة لجهات خارجية التالية.

تحويل مسارات المستخدِمين بتنسيق JSON إلى نصوص برمجية مخصّصة:

  • مسجّلة ذكية في Chrome ويمكنك استخدامها لتحويل ملفات JSON الخاصة بمسار المستخدِم إلى نصوص برمجية لاختبار Cypress. يمكنك مشاهدة هذا demo لتجربته.
  • مسجّلة Chrome لساعة الليل ويمكنك استخدامها لتحويل ملفات JSON لتدفق المستخدم إلى نصوص اختبارية لساعة Nightwatch.
  • مسجّلة Chrome من CodeceptJS: ويمكنك استخدامها لتحويل ملفات JSON لتدفق المستخدم إلى نصوص برمجية لاختبار CodeceptJS.

إعادة تشغيل مسارات مستخدم JSON:

تصحيح أخطاء مسارات المستخدم

مثل أي رمز، عليك أحيانًا تصحيح أخطاء مسارات المستخدِمين المسجّلة.

لمساعدتك في تصحيح الأخطاء، تتيح لك لوحة المسجّلة الذكية إبطاء عمليات إعادة التشغيل، وتحديد نقاط التوقف، وخطوات التنفيذ، وفحص الرموز البرمجية بتنسيقات مختلفة بالتوازي مع الخطوات.

إبطاء عملية إعادة التشغيل

بشكل تلقائي، تعيد أداة المسجّلة الذكية تشغيل تدفق المستخدم بأسرع ما يمكن. لفهم ما يحدث في التسجيل، يمكنك إبطاء سرعة إعادة التشغيل باتّباع الخطوات التالية:

  1. افتح القائمة المنسدلة إعادة التشغيل.إعادة تشغيل.
  2. اختَر أحد خيارات سرعة الإعادة:
    • عادية (تلقائي)
    • بطيئة
    • بطيء للغاية
    • بطيء للغاية

إعادة التشغيل بمستوى سرعة بطيء

فحص الرمز البرمجي

لفحص رمز مسار مستخدم بتنسيقات مختلفة:

  1. افتح أحد التسجيلات في لوحة المسجّلة الذكية.
  2. انقر على عرض الرمز في أعلى يسار قائمة الخطوات. زر "إظهار الرمز"
  3. يعرض المسجِّل عرضًا جنبًا إلى جنب للخطوات ورمزها. عرض الخطوات ورمزها البرمجي جنبًا إلى جنب
  4. أثناء تمرير مؤشر الماوس فوق إحدى الخطوات، تُبرز المسجّلة الذكية الرمز الخاص بها بأي تنسيق، بما في ذلك الرموز التي توفِّرها الإضافات.
  5. وسِّع القائمة المنسدلة للتنسيقات لاختيار التنسيق الذي تستخدمه في تصدير مسارات المستخدمين.

    القائمة المنسدلة للتنسيق

    يمكن أن يكون أحد التنسيقات التلقائية الثلاثة (JSON أو @puppeteer/replay أو نص برمجي Puppeteer أو تنسيق تقدّمه إضافة).

  6. يمكنك متابعة تصحيح أخطاء التسجيل من خلال تعديل مَعلمات الخطوات وقيمها. لا يمكن تعديل عرض الرمز، ولكن يتم تحديثه وفقًا لذلك عند إجراء تغييرات على الخطوات على اليمين.

ضبط نقاط التوقف وتنفيذ الخطوات تدريجيًا

لضبط نقطة توقّف وتنفيذ الخطوات خطوة بخطوة:

  1. مرِّر مؤشر الماوس فوق الدائرة الخطوة. بجانب أي خطوة في أحد التسجيلات. تتحول الدائرة إلى رمز نقطة توقف نقطة الإيقاف.
  2. انقر على رمز نقطة التوقف نقطة إيقاف. وأعِد تشغيل التسجيل. تتوقف عمليات التنفيذ مؤقتًا عند نقطة الإيقاف. إيقاف التنفيذ مؤقتًا
  3. لإكمال عملية التنفيذ، انقر على الزر نفِّذ خطوة واحدة. تنفيذ خطوة واحدة في شريط الإجراءات أعلى لوحة المسجّلة الذكية.
  4. لإيقاف إعادة التشغيل، انقر على لا تتسرّع: إلغاء إعادة التشغيل.

تعديل الخطوات

يمكنك تعديل أي خطوة في التسجيل من خلال النقر على الزر توسيع بجانبها، سواء أثناء التسجيل أو بعده.

يمكنك أيضًا إضافة الخطوات غير المسجّلة وإزالة الخطوات المسجّلة بدون قصد.

إضافة خطوات

وقد تحتاج أحيانًا إلى إضافة الخطوات يدويًا. على سبيل المثال، لا يسجِّل المسجِّل تلقائيًا أحداث hover لأنّ ذلك يؤدي إلى تشويش التسجيل، كما أنّ بعض هذه الأحداث غير مفيدة. ومع ذلك، لا يمكن أن تظهر عناصر واجهة المستخدم، مثل القوائم المنسدلة، إلا على hover. يمكنك إضافة hover خطوات يدويًا إلى مسارات المستخدمين التي تعتمد على هذه العناصر.

لإضافة خطوة يدويًا:

  1. افتح هذه الصفحة التجريبية وابدأ تسجيلًا جديدًا. ابدأ تسجيلاً لتسجيل حدث عند التمرير فوقه.
  2. مرِّر مؤشر الماوس فوق العنصر في إطار العرض. ستظهر قائمة إجراءات منبثقة. تمرير مؤشر الماوس فوق العنصر
  3. اختَر إجراءً من القائمة ثم أنهِ التسجيل. لا يسجِّل المسجِّل سوى حدث النقر. النقر على إجراء وإنهاء التسجيل.
  4. حاوِل إعادة تشغيل التسجيل بالنقر على إعادة التشغيل. إعادة التشغيل. وتتعذّر إعادة التشغيل بعد انتهاء المهلة لأنّ المسجّلة لا يمكنها الوصول إلى العنصر في القائمة. تعذّرت إعادة التشغيل.
  5. انقر على الزر زر النقاط الثلاث الذي يتضمّن ثلاث نقاط بجانب خطوة النقر واختَر إضافة خطوة قبل. إضافة خطوة قبل النقر.
  6. وسِّع الخطوة الجديدة. ويكون نوع العمود waitForElement تلقائيًا. انقر على القيمة بجانب type واختَر hover. اختيار التمرير
  7. بعد ذلك، عيِّن أداة اختيار مناسبة للخطوة الجديدة. انقر على اختيار. اختيار، ثمّ انقر على منطقة في عنصر Hover over me! خارج القائمة المنبثقة. تم ضبط أداة الاختيار على #clickable. ضبط أداة الاختيار
  8. يُرجى إعادة تشغيل التسجيل مرة أخرى. بعد إضافة خطوة التمرير بمؤشر الماوس، يعيد المسجِّل تشغيل المسار بنجاح. تمّت إعادة تشغيل الفيديو بنجاح.

إضافة تأكيدات

أثناء التسجيل، يمكنك تأكيد سمات HTML وسمات JavaScript مثلاً. لإضافة تأكيد:

  1. يمكنك بدء تسجيل، مثلاً، في صفحة الإصدار التجريبي هذه.
  2. انقر على إضافة تأكيد.

    الزر "إضافة تأكيد".

    تنشئ المسجّلة الذكية خطوة waitForElement قابلة للضبط.

  3. حدِّد أدوات الاختيار لهذه الخطوة.

  4. عليك ضبط الخطوة بدون تغيير نوعها من النوع waitForElement. على سبيل المثال، يمكنك تحديد ما يلي:

    • سمة HTML انقر على إضافة سمات واكتب اسم السمة وقيمتها التي تستخدمها العناصر في هذه الصفحة. على سبيل المثال، data-test: <value>.
    • خاصية JavaScript انقر على إضافة مواقع واكتب اسم الموقع وقيمته بتنسيق JSON. مثلاً: {".innerText":"<text>"}
    • خصائص الخطوة الأخرى: مثلاً: visible: true
  5. واصِل تسجيل بقية مسار المستخدِم، ثم أوقِف التسجيل.

  6. انقر على رمز إعادة التشغيل إعادة التشغيل. إذا تعذّر إجراء تأكيد، يعرض المسجِّل رسالة خطأ بعد مهلة.

شاهِد الفيديو التالي للاطّلاع على سير العمل هذا.

نسخ الخطوات

بدلاً من تصدير تدفق المستخدم بالكامل، يمكنك نسخ خطوة واحدة إلى الحافظة:

  1. انقر بزر الماوس الأيمن على الخطوة التي تريد نسخها أو انقر على رمز النقاط الثلاث قائمة الخيارات الإضافية بجانبها.
  2. في القائمة المنسدلة، اختَر أحد خيارات نسخ بتنسيق ....

تحديد خيار نسخ من القائمة المنسدلة

يمكنك نسخ الخطوات بتنسيقات مختلفة: JSON وPuppeteer و@puppeteer/replay وتلك التي توفّرها الإضافات.

إزالة الخطوات

لإزالة خطوة تم تسجيلها عن طريق الخطأ، انقر بزر الماوس الأيمن على الخطوة أو انقر على رمز النقاط الثلاث قائمة الخيارات الإضافية بجانبها واختَر إزالة الخطوة.

إزالة خطوة

بالإضافة إلى ذلك، يضيف المسجّل الذكي خطوتَين منفصلتَين تلقائيًا في بداية كل تسجيل:

تسجيل يتضمّن إطار العرض المحدّد وخطوات التنقّل

  • ضبط إطار العرض يتيح لك التحكّم في سمات مساحة العرض وحجمها وخصائصها الأخرى.
  • التنقّل تُستخدَم لضبط عنوان URL وإعادة تحميل الصفحة تلقائيًا عند كل إعادة تشغيل.

لإجراء عمليات التشغيل الآلي داخل الصفحة بدون إعادة تحميل الصفحة، أزِل خطوة التنقّل كما هو موضّح أعلاه.

ضبط الخطوات

لضبط خطوة:

  1. حدِّد نوعها: click أو doubleClick أو hover أو (إدخال) change أو keyUp أو keyDown أو scroll أو close أو navigate (لصفحة) أو waitForElement أو waitForExpression أو setViewport.

    تعتمد السمات الأخرى على قيمة type.

  2. حدِّد السمات المطلوبة أسفل type.

    اضبط خطوة.

  3. انقر على الأزرار المقابلة لإضافة خصائص اختيارية خاصة بالنوع وتحديدها.

للحصول على قائمة بالخصائص المتاحة، يُرجى الاطّلاع على خصائص الخطوة.

لإزالة سمة اختيارية، انقر على زر إزالة. إزالة بجانبها.

لإضافة عنصر إلى خاصية مصفوفة أو إزالتها منه، انقر على الزرَّين + أو - بجانب العنصر.

خصائص الخطوات

يمكن أن تحتوي كل خطوة على السمات الاختيارية التالية:

الخصائص الشائعة الأخرى المتاحة لمعظم أنواع الخطوات هي:

  • frame - مصفوفة من الفهارس الصفرية التي تحدد إطار iframe يمكن دمجه. على سبيل المثال، يمكنك تحديد إطار 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 سمة JavaScript وقيمتها بتنسيق JSON
waitForElement visible منطقي. صحيح إذا كان العنصر في DOM ومرئيًا (لا يحتوي على display: none أو visibility: hidden)
waitForElement
waitForExpression
asserted events حاليًا، type: navigation فقط، ولكن يمكنك تحديد العنوان وعنوان URL
waitForElement
waitForExpression
timeout الحد الأقصى لوقت الانتظار بالمللي ثانية
waitForExpression expression الشيك. تعبير JavaScript الذي يُحسِّن القيمة إلى صحيح
setViewport width
height
الشيك. عرض إطار العرض وارتفاعه بالبكسل
setViewport deviceScaleFactor الشيك. مشابهة لنسبة وحدات البكسل على الجهاز (DPR)، القيمة التلقائية هي 1
setViewport isMobile
hasTouch
isLandscape
الشيك. علامات منطقية تحدّد ما إذا كان يجب:
  • مراعاة العلامة الوصفية
  • أحداث الاتصال بالدعم
  • عرض في الوضع الأفقي
  • هناك سمتان تؤديان إلى إيقاف الإعادة مؤقتًا:

    • تجعل السمة waitForElement الخطوة تنتظر توفُّر (أو عدم توفُّر) عدد من العناصر التي يحدّدها أحد المحدّدات. على سبيل المثال، تنتظر الخطوة التالية ظهور أقل من ثلاثة عناصر في الصفحة التي تتطابق مع أداة الاختيار .my-class.

        "type": "waitForElement",
        "selectors": [".my-class"],
        "operator": "<=",
        "count": 2,
      
    • تجعل السمة waitForExpression خطوة الانتظار حتى يتم ضبط تعبير JavaScript على "صحيح". على سبيل المثال، تتوقف الخطوة التالية مؤقتًا لمدة ثانيتين ثم يتم ضبطها على "صحيح" للسماح بمتابعة إعادة التشغيل.

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

    ضبط مهلات الخطوات

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

    لتجنب هذه المشكلة، يمكنك ضبط المهلة التلقائية لكل خطوة في آنٍ واحد أو ضبط مهلات منفصلة لخطوات محددة. تؤدي المهلات المحدَّدة على خطوات معيّنة إلى استبدال الإعدادات التلقائية.

    لضبط مهلة الانتظار التلقائية لكل خطوة دفعة واحدة:

    1. انقر على إعدادات إعادة التشغيل لجعل مربّع المهلة قابلاً للتعديل.

      إعدادات إعادة التشغيل

    2. في مربّع المهلة، اضبط قيمة المهلة بالملي ثانية.

    3. انقر على إعادة التشغيل.إعادة التشغيل للاطّلاع على مهلة الانتظار التلقائية المعدَّلة.

    لإعادة ضبط مهلة الانتظار التلقائية في خطوة معيّنة:

    1. وسِّع الخطوة وانقر على إضافة مهلة.

      أضِف مهلة.
    2. انقر على timeout: <value> واضبط القيمة بالملي ثانية.

      اضبط قيمة المهلة.
    3. انقر على إعادة التشغيل.إعادة التشغيل للاطّلاع على الخطوة التي تتضمن المهلة أثناء التنفيذ.

    لإزالة عملية استبدال مهلة في إحدى الخطوات، انقر على الزر حذفحذف. بجانبها.

    فهم أدوات الاختيار

    عند بدء تسجيل جديد، يمكنك ضبط ما يلي:

    جارٍ إعداد تسجيل جديد.

    • في مربّع النص سمة أداة الاختيار، أدخِل سمة اختبار مخصّصة. سيستخدم المسجِّل هذه السمة لرصد أدوات الاختيار بدلاً من قائمة سمات الاختبار الشائعة.
    • في مجموعة مربّعات الاختيار أنواع أداة الاختيار المُستخدَمة أثناء التسجيل، اختَر أنواع أدوات الاختيار التي تريد رصدها تلقائيًا:

      • مربّع اختيار CSS: أدوات الاختيار النحوية.
      • مربّع اختيار ARIA: أدوات الاختيار الدلالية
      • مربّع اختيار النص: أدوات الاختيار التي تتضمّن أقصر نص فريد إن توفّرت
      • مربّع اختيار XPath: أدوات الاختيار التي تستخدم لغة مسار XML
      • مربّع اختيار Pierce. أدوات اختيار مشابهة لعناصر CSS ولكن يمكن أن تخترق shadow DOM.

    أدوات اختيار الاختبار الشائعة

    بالنسبة إلى صفحات الويب البسيطة، تكفي سمات id وسمات CSS class لتتمكّن أداة المسجّلة الذكية من اكتشاف أدوات الاختيار. ومع ذلك، قد لا يكون هذا هو الحال دائمًا للأسباب التالية:

    • قد تستخدم صفحات الويب صفوفًا أو أرقام تعريف ديناميكية متغيرة.
    • قد تتعطّل أدوات الاختيار بسبب تغييرات في الرمز أو إطار العمل.

    على سبيل المثال، قد يتم إنشاء قيم class في CSS تلقائيًا للتطبيقات المطوّرة باستخدام إطارات عمل JavaScript الحديثة (مثل React وAngular وVue) وإطارات عمل CSS.

    فئات CSS التي تم إنشاؤها تلقائيًا بأسماء عشوائية

    وفي هذه الحالات، يمكنك استخدام سمات data-* لإنشاء اختبارات أكثر مرونة. هناك حاليًا بعض أدوات اختيار data-* الشائعة التي يستخدمها المطوّرون للتشغيل الآلي. تتيح المسجّلة الذكية استخدام هذه الميزة أيضًا.

    إذا كانت لديك عناصر اختيار الاختبار الشائعة التالية محدّدة على موقعك الإلكتروني، سيرصدها المسجِّل ويستخدمها تلقائيًا أولاً:

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

    على سبيل المثال، افحص فلتر "Cappuccino" في صفحة العرض التوضيحي هذه والاطّلاع على سمات الاختبار:

    محدِّدات الاختبار المحدّدة

    سجِّل نقرة على "كابوتشينو"، وسِّع الخطوة المقابلة في التسجيل، وتحقّق من عناصر الاختيار التي تم رصدها:

    تم رصد أداة اختيار الاختبار الشائعة.

    تخصيص أداة اختيار التسجيل

    يمكنك تخصيص أداة اختيار التسجيل إذا كانت أدوات اختيار الاختبار الشائعة لا تناسبك.

    على سبيل المثال، تستخدم هذه الصفحة التجريبية السمة data-automate كعنصر اختيار. ابدأ تسجيلاً جديدًا وأدخِل data-automate كسمة أداة الاختيار.

    تخصيص أداة اختيار التسجيل

    أدخِل عنوان بريد إلكتروني ولاحظ قيمة أداة الاختيار ([data-automate=email-address]).

    نتيجة اختيار أداة الاختيار المخصّصة

    أولوية أداة الاختيار

    يبحث المسجِّل عن المحدّدات بالترتيب التالي استنادًا إلى ما إذا كنت قد حدّدت سمة محدّد 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 وPirce. يُسجِّل تطبيق المسجّلة الذكية ما يلي:

    • محددات CSS وXPath العادية في كل مستوى جذر، أي مضيفات الظل المدمجة، إن وجدت.
    • اختراق المحدّدات الفريدة بين جميع العناصر ضمن جميع جذور الظلال