هل العنصر معروض

تعيد هذه الأمر القيمة صحيح إذا كان عنصر DOM المحدد معروضًا (حتى عندما يكون العنصر خارج نطاق الرؤية). يستخدم طريقة checkVisibility التي يوفرها المتصفح لتحديد ما إذا كان العنصر معروضًا أم لا. نظرًا لأن WebdriverIO يتصرف كمستخدم حقيقي، فإن القيم الافتراضية لعلامات contentVisibilityAuto وopacityProperty وvisibilityProperty تم تعيينها على true للإرجاع إلى سلوك أكثر صرامة. هذا يعني أن الأمر سيتحقق مما إذا كان العنصر مرئيًا بسبب قيمة خصائص content-visibility وopacity وvisibility الخاصة به.

إذا كنت تريد أيضًا التحقق من أن العنصر موجود أيضًا داخل نطاق الرؤية، قم بتوفير علامة withinViewport للأمر.

معلومات

على عكس أوامر العناصر الأخرى، لن ينتظر WebdriverIO وجود العنصر لتنفيذ هذا الأمر.

عند إجراء اختبارات المتصفح، يستخدم WebdriverIO نصًا مخصصًا مصمم خصيصًا لتقييم رؤية العناصر. هذا النص أساسي في تحديد ما إذا كان العنصر معروضًا على الصفحة. وعلى العكس من ذلك، بالنسبة لسيناريوهات اختبار الأجهزة المحمولة الأصلية مع Appium، يعتمد WebdriverIO على أمر isElementDisplayed الذي يوفره Appium. يقيّم هذا الأمر رؤية العناصر باستخدام معايير وضعها برنامج التشغيل الأساسي من Appium، مما يضمن تقييمات دقيقة ومحددة للبرنامج لتطبيقات الأجهزة المحمولة.

الاستخدام

$(selector).isDisplayed(withinViewport, contentVisibilityAuto, opacityProperty, visibilityProperty)

المعلمات

الاسم	النوع	التفاصيل
withinViewport=false اختياري	Boolean	true للتحقق مما إذا كان العنصر داخل نطاق الرؤية. false افتراضيًا.
contentVisibilityAuto=true اختياري	Boolean	true للتحقق مما إذا كانت خاصية content-visibility للعنصر تحتوي (أو ترث) القيمة auto، وأنها تتخطى حاليًا عرضها. true افتراضيًا.
opacityProperty=true اختياري	Boolean	true للتحقق مما إذا كانت خاصية opacity للعنصر تحتوي (أو ترث) قيمة 0. true افتراضيًا.
visibilityProperty=true اختياري	Boolean	true للتحقق مما إذا كان العنصر غير مرئي بسبب قيمة خاصية الرؤية الخاصة به. true افتراضيًا.

أمثلة

index.html

<div id="noSize"></div>
<div id="noSizeWithContent">Hello World!</div>
<div id="notDisplayed" style="width: 10px; height: 10px; display: none"></div>
<div id="notVisible" style="width: 10px; height: 10px; visibility: hidden"></div>
<div id="zeroOpacity" style="width: 10px; height: 10px; opacity: 0"></div>
<div id="notInViewport" style="width: 10px; height: 10px; position:fixed; top: 999999; left: 999999"></div>

isDisplayed.js

it('should detect if an element is displayed', async () => {
    elem = await $('#notExisting');
    isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: false

    let elem = await $('#noSize');
    let isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: false

    let elem = await $('#noSizeWithContent');
    let isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: true

    let elem = await $('#notDisplayed');
    let isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: false

    elem = await $('#notVisible');
    isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: false

    elem = await $('#zeroOpacity');
    isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: false

    elem = await $('#notInViewport');
    isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: true
});
isDisplayedWithinViewport.js
it('should detect if an element is visible within the viewport', async () => {
    let isDisplayedInViewport = await $('#notDisplayed').isDisplayed({ withinViewport: true });
    console.log(isDisplayedInViewport); // outputs: false

    isDisplayedInViewport = await $('#notVisible').isDisplayed({ withinViewport: true });
    console.log(isDisplayedInViewport); // outputs: false

    isDisplayedInViewport = await $('#notExisting').isDisplayed({ withinViewport: true });
    console.log(isDisplayedInViewport); // outputs: false

    isDisplayedInViewport = await $('#notInViewport').isDisplayed({ withinViewport: true });
    console.log(isDisplayedInViewport); // outputs: false

    isDisplayedInViewport = await $('#zeroOpacity').isDisplayed({ withinViewport: true });
    console.log(isDisplayedInViewport); // outputs: false
});

القيمة المرجعة

• <Boolean> return: صحيح إذا كان العنصر معروضًا