كيفية التعامل مع جدول الويب في Selenium

قراءة جدول ويب HTML

يحتاج المختبرون في كثير من الأحيان إلى الوصول إلى عناصر، عادةً ما تكون قيمًا نصية، موجودة داخل جداول HTML. مع ذلك، نادرًا ما يُضيف مصممو المواقع سمة id أو name إلى الخلايا الفردية. لذا، نادرًا ما تُجدي طرق مثل By.id() وBy.name() وBy.cssSelector() نفعًا. في هذه الحالة، يُعدّ By.xpath() الخيار الأمثل لأنه يُتيح تتبع علاقات الأصل والفرع داخل وسم الجدول.

كيفية التعامل مع جدول الويب في Selenium

خذ بعين الاعتبار كود HTML أدناه للتعامل مع جداول الويب Selenium.

سوف نستخدم كسباث للحصول على النص الداخلي للخلية التي تحتوي على النص "الخلية الرابعة".

الخطوة 1 - تعيين العنصر الأصلي (الجدول)

تبدأ محددات XPath في WebDriver دائمًا بشرطتين مائلتين متتاليتين "//" متبوعتين بالعنصر الأصل. نظرًا لأننا نتعامل مع جداول الويب في Selenium، يجب أن يكون العنصر الأصل دائمًا هو بطاقة شعار. الجزء الأول من أعمالنا Selenium لذلك يجب أن يبدأ محدد موقع جدول XPath بـ "//table".

الخطوة 2 – إضافة العناصر الفرعية

العنصر الموجود أسفل العنصر مباشرة يكون ، لذا هو ابن وعلى العكس من ذلك، هو والد يتم وضع جميع العناصر الفرعية في XPath على يمين العنصر الأصل، مفصولة بشرطة مائلة واحدة "/" كما هو موضح أدناه.

الخطوة 3 – إضافة المسندات

ال يحتوي العنصر على اثنين الوسوم. هذان الاثنان الوسوم هي أبناء لـ ، لذا هو والد كليهما. الاثنان العناصر أشقاء. الأشقاء هم عناصر فرعية تشترك في نفس الأصل.

للوصول إلى الذي يحتوي على "الخلية الرابعة"، يجب علينا أولاً الوصول إلى ثان وليس الأول. كتابة "//table/tbody/tr" فقط ستستهدف الأول علامة.

فكيف نصل إلى الثاني؟ الجواب هو استخدام المسندات. المسندات هي أرقام أو سمات HTML محاطة بأقواس مربعة "[ ]" تميز عنصرًا فرعيًا عن العناصر الشقيقة له.بما أن الصف الذي نحتاجه هو الثاني، فإننا نستخدم "[2]" كمسند.

إذا حذفنا الشرط، فإن XPath يُرجع أول عنصر شقيق. لذلك، فإن أيًا من رموز XPath أدناه سيصل إلى العنصر الأول. .

الخطوة 4 – إضافة العناصر التابعة باستخدام المسندات المناسبة

العنصر التالي الذي نحتاجه هو الثاني بتطبيق القواعد من الخطوتين 2 و 3، نصل إلى XPath الموضح أدناه.

بعد أن حصلنا على مُحدِّد XPath الصحيح، يُمكننا الوصول إلى الخلية وقراءة نصها الداخلي باستخدام الكود أدناه. هذا يفترض أنك قمت بحفظ صفحة HTML باسم "newhtml.html" داخل محرك الأقراص C.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/write-xpath-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

الوصول إلى الجداول المتداخلة

تنطبق المبادئ نفسها على الجداول المتداخلة. الجداول المتداخلة هي جداول موضوعة داخل جدول آخر. ويرد أدناه مثال على ذلك.

للوصول إلى الخلية التي تحتوي على النص "4-5-6" باستخدام أفكار الأصل/الفرع والمسند من القسم السابق، يمكننا تكوين XPath الموضح أدناه.

يسترجع كود WebDriver أدناه النص الداخلي للخلية المستهدفة.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/accessing-nested-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]/table/tbody/tr/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

يؤكد الإخراج أدناه أنه تم الوصول إلى الجدول الداخلي بنجاح.

استخدام السمات كمسندات

إذا كان العنصر موجودًا في عمق HTML، حيث يصبح عد العناصر الشقيقة أمرًا شاقًا، فيمكننا استخدام السمة الفريدة لهذا العنصر بدلاً من ذلك.

في المثال أدناه، تقع خلية "نيويورك إلى شيكاغو" في عمق كبير داخل Mercury الصفحة الرئيسية للجولات.

يمكننا استخدام السمة الفريدة للجدول (width=”270”) كمسند. يتم استخدام السمات كمسندات عن طريق إضافة الرمز @ إليها قبلهافي المثال أعلاه، تقع الخلية "من نيويورك إلى شيكاغو" في الخلية الأولى من الرابع لذا يجب أن يبدو XPath الخاص بنا كما هو موضح أدناه.

تذكر أنه عند وضع XPath في الداخل Java، قم بإلغاء علامات الاقتباس المزدوجة المحيطة بـ "270" باستخدام شرطة مائلة عكسية حتى لا يتم إنهاء سلسلة By.xpath() مبكرًا.

نحن الآن جاهزون للوصول إلى تلك الخلية باستخدام الكود أدناه.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table[@width=\"270\"]/tbody/tr[4]/td"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

الاختصار: استخدم فحص العنصر للوصول إلى الجداول في Selenium

إذا كان من الصعب الحصول على فهرس أو سمة عنصر ما، فإن أسرع طريقة لإنشاء XPath هي استخدام Inspect Element في أدوات مطوري المتصفحات الحديثة.

انظر إلى المثال التالي من Mercury الصفحة الرئيسية للجولات.

خطوة 1

انقر بزر الماوس الأيمن على الخلية المستهدفة واختر "فحص" لعرض مسار DOM، ثم انسخ XPath بالكامل.

خطوة 2

ابحث عن العنصر الأصلي "الجدول" الأول واحذف كل شيء على يساره.

خطوة 3

قم بإضافة بادئة XPath المتبقية بشرطتين مائلتين للأمام "//" وانسخها إلى كود WebDriver الخاص بك.

يسترجع كود WebDriver أدناه النص الداخلي للعنصر المتداخل بعمق.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table/tbody/tr/td[2]"
        + "//table/tbody/tr[4]/td/"
        + "table/tbody/tr/td[2]/"
        + "table/tbody/tr[2]/td[1]/"
        + "table[2]/tbody/tr[3]/td[2]/font"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

كيفية حساب الصفوف والأعمدة في جدول ويب ديناميكي

تعرض جداول الويب الديناميكية، مثل لوحات المعلومات أو نتائج البحث، أعدادًا مختلفة من الصفوف في كل مرة يتم فيها تحميل الصفحة. وللتعامل معها، استخدم findElements لجلب كل في قائمة، ثم قم بالمرور على كل خلية لقراءتها. يقوم المقتطف البرمجي أدناه بحساب الصفوف وقراءة كل خلية في جدول يحمل المعرّف "customers".

List<WebElement> rows = driver.findElements(
    By.xpath("//table[@id='customers']//tr"));
System.out.println("Total rows: " + rows.size());

for (int i = 1; i <= rows.size(); i++) {
    List<WebElement> cells = driver.findElements(
        By.xpath("//table[@id='customers']//tr[" + i + "]/td"));
    for (WebElement cell : cells) {
        System.out.println(cell.getText());
    }
}

لفّ جهاز تحديد الموقع في WebDriverWait مع visibilityOfAllElementsLocatedBy عند تحميل الجدول بواسطة AJAX. هذا يمنع وجود مراجع عناصر قديمة في الشبكات بطيئة العرض.

Selenium 4. محددات المواقع النسبية لجداول الويب

Selenium قدّم الإصدار 4 محددات نسبية تستهدف العناصر بناءً على موقعها المرئي. وهي مفيدة عندما تتعطل فهارس XPath بسبب إعادة ترتيب الصفوف. above(), below(), toLeftOf(), toRightOf()و near() جميعها تقبل عنصر ويب رابط.

import static org.openqa.selenium.support.locators.RelativeLocator.with;

WebElement emailHeader = driver.findElement(By.xpath("//th[text()='Email']"));
WebElement emailCell = driver.findElement(
    with(By.tagName("td")).below(emailHeader));
System.out.println(emailCell.getText());

تظل محددات المواقع النسبية قابلة للقراءة عند تغيير ترتيب الأعمدة. قم بإقرانها بانتظارات صريحة للحصول على أفضل النتائج في الصفحات التي تعتمد على البيانات.

أدوات الذكاء الاصطناعي للتعامل مع جداول الويب الديناميكية

تُقلل منصات الاختبار المدعومة بالذكاء الاصطناعي من صيانة أجهزة تحديد المواقع على الشبكات التي تتغير باستمرار. أدوات مثل Testim, مابلو يعمل تستخدم هذه التقنية رؤية الحاسوب بالإضافة إلى نماذج DOM لاكتشاف تحولات الأعمدة وتحديد المواقع ذاتية الإصلاح. وتحدد الصفوف من خلال نص العنوان وتشابه الخلايا بدلاً من فهارس XPath الثابتة.

لنقي Selenium مشاريع ومكتبات مثل هيلينيوم قم بتغليف WebDriver وأعد كتابة المحددات المعطلة أثناء التشغيل. اجمع هذه الأدوات مع WebDriverWait للحفاظ على استقرار نصوص الجداول الديناميكية دون الحاجة إلى إعادة كتابة المحددات بعد كل تغيير في واجهة المستخدم.

ملخص

• تُعدّ الدالة By.xpath() الطريقة الأكثر موثوقية للوصول إلى خلايا جدول الويب في Selenium.
• إذا كان عد الأشقاء صعباً، فاستخدم سمة فريدة كمسند، مسبوقة بالرمز @.
• تُرجع الدالة findElements قائمة يدعم ذلك عد الصفوف في الجداول الديناميكية.
• Selenium 4 محددات نسبية (أعلى، أسفل، قريب) تقلل الاعتماد على XPath الموضعي.
• تعمل خاصية فحص العنصر في أدوات المطورين على تسريع إنشاء XPath للخلايا المدفونة بعمق.
• أدوات الذكاء الاصطناعي مثل Testim، Mabl، و Healenium محددات ذاتية الإصلاح للشبكات المتغيرة.

الأسئلة الشائعة