كيفية التعامل مع جداول الويب الديناميكية في Selenium
⚡ ملخص ذكي
التعامل مع جداول الويب الديناميكية في Selenium يشرح WebDriver كيفية تكرار الجداول وقراءتها والتحقق من صحتها، والتي تتغير صفوفها أو أعمدتها أثناء التشغيل، ويغطي ذلك تحديد الهوية، وXPath، و...ping، وأمثلة.

جدول الويب في Selenium
هناك نوعان من جداول HTML المنشورة على الويب-
- الجداول الثابتة: البيانات ثابتة، أي أن عدد الصفوف والأعمدة ثابت.
- الجداول الديناميكية: البيانات ديناميكية، أي أن عدد الصفوف والأعمدة غير ثابت.
كيفية التعامل مع الجدول الديناميكي في Selenium
فيما يلي مثال لجدول الويب الديناميكي في Selenium للبيع. بناءً على مرشحات تاريخ الإدخال، سيتم تغيير عدد الصفوف. لذا فهي ديناميكية بطبيعتها.
يعد التعامل مع الجدول الثابت أمرًا سهلاً، ولكن التعامل مع الجداول الديناميكية فيه Selenium الأمر صعب بعض الشيء لأن الصفوف والأعمدة ليست ثابتة.
استخدام X-Path لتحديد موقع عناصر جدول الويب
قبل أن نحدد عنصر الويب، دعونا نفهم أولاً-
ما هو عنصر الويب؟
عناصر الويب ليست سوى عناصر HTML مثل مربع النص، وأزرار الاختيار في القائمة المنسدلة، وأزرار الإرسال، وما إلى ذلك. تتم كتابة عناصر HTML هذه باستخدام بداية علامة وينتهي ب النهاية العلامة.
فمثلا،
مستند HTML الأول الخاص بي.
خطوات الحصول على مسار X لعنصر الويب الذي نريد تحديد موقعه.
الخطوة 1) في كروم، انتقل إلى https://demo.guru99.com/test/web-table-element.php
الخطوة 2) انقر بزر الماوس الأيمن على عنصر الويب الذي سيتم جلب مساره x. في حالتنا، انقر بزر الماوس الأيمن على "الشركة" وحدد خيار "فحص". ستظهر الشاشة التالية -
الخطوة 3) انقر بزر الماوس الأيمن على عنصر الويب المميز > حدد نسخ -> خيار نسخ مسار x.
الخطوة 4) استخدم مسار X المنسوخ "//*[@id="leftcontainer"]/table/thead/tr/th [1]" في Selenium WebDriver لتحديد موقع العنصر.
مثال: جلب عدد الصفوف والأعمدة من Dynamic WebTable
أثناء التعامل مع جدول الويب الديناميكي Seleniumلا يمكننا التنبؤ بعدد الصفوف والأعمدة.
باستخدام Selenium سائق الويب، يمكننا أن نجد
- عدد صفوف وأعمدة جدول الويب في Selenium
- بيانات الصف X أو العمود Y.
يوجد أدناه برنامج لجلب العدد الإجمالي للصفوف والأعمدة للتعامل مع جدول الويب Selenium:
import java.text.ParseException; import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; public class Noofrowsandcols { public static void main(String[] args) throws ParseException { WebDriver wd; System.setProperty("webdriver.chrome.">driver","G://chromedriver.exe"); wd= new ChromeDriver(); wd.get("https://demo.guru99.com/test/web-table-">element.php"); //No.of Columns List <webelement> col = wd.findElements(By.xpath(".//*[@id=\"leftcontainer\"]/table/thead/tr/th")); System.out.println("No of cols are : " +col.size()); //No.of rows List <webelement> rows = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/tbody/tr/td[1]")); System.out.println("No of rows are : " + rows.size()); wd.close(); } }
Code التفسير:
- هنا قمنا أولاً بإعلان كائن Web Driver "wd" وقمنا بتهيئته لبرنامج تشغيل chrome.
- نحن نستخدم القائمة إلى إجمالي عدد الأعمدة في "col".
- تقوم أوامر findElements بإرجاع قائمة بجميع العناصر المطابقة لمحدد الموقع المحدد
- باستخدام findElements وX-path //*[@id=\”leftcontainer\”]/table/thead/tr/th نحصل على جميع الأعمدة
- وبالمثل، نكرر العملية للصفوف.
الإخراج:
مثال: جلب قيمة الخلية لصف وعمود معينين في الجدول الديناميكي
لنفترض أننا بحاجة إلى 3rd صف الجدول وبيانات الخلية الثانية. انظر الجدول أدناه-
في الجدول أعلاه، يتم تحديث البيانات بانتظام بعد فترة زمنية معينة. ستكون البيانات التي تحاول استردادها مختلفة عن لقطة الشاشة أعلاه. ومع ذلك، يبقى الرمز كما هو. هنا نموذج لبرنامج للحصول على 3rd صف و 2nd بيانات العمود.
import java.text.ParseException; import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import java.util.concurrent.TimeUnit; public class RowandCell { public static void main(String[] args) throws ParseException { WebDriver wd; System.setProperty("webdriver.chrome.">driver","G://chromedriver.exe"); wd= new ChromeDriver(); wd.get("https://demo.guru99.com/test/web-table-">element.php"); wd.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); WebElement baseTable = wd.findElement(By.tagName("table")); //To find third row of table WebElement tableRow = baseTable.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]")); String rowtext = tableRow.getText(); System.out.println("Third row of table : "+rowtext); //to get 3rd row's 2nd column data WebElement cellIneed = tableRow.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]/td[2]")); String valueIneed = cellIneed.getText(); System.out.println("Cell value is : " + valueIneed); wd.close(); } }
Code التفسير:
- يقع الجدول باستخدام خاصية تحديد الموقع "tagname".
- باستخدام كسباث "//*[@id=\"leftcontainer\"]/table/tbody/tr[3]" ابحث عن الرقم 3rd الصف ويحصل على النص الخاص به باستخدام وظيفة getText ().
- باستخدام Xpath "//*[@id=\"leftcontainer\"]/table/tbody/tr[3]/td[2]" ابحث عن الخلية الثانية في 2rd الصف ويحصل على النص الخاص به باستخدام وظيفة getText ().
الناتج:
مثال: الحصول على الحد الأقصى لجميع القيم في عمود الجدول الديناميكي
في هذا المثال، سنحصل على الحد الأقصى لجميع القيم في عمود معين.
راجع الجدول التالي -
ها هو الكود
import java.text.ParseException; import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import java.text.NumberFormat; public class MaxFromTable { public static void main(String[] args) throws ParseException { WebDriver wd; System.setProperty("webdriver.chrome.">driver","G://chromedriver.exe"); wd= new ChromeDriver(); wd.get("https://demo.guru99.com/test/web-table-">element.php"); String max; double m=0,r=0; //No. of Columns List <webelement> col = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/thead/tr/th")); System.out.println("Total No of columns are : " +col.size()); //No.of rows List <webelement> rows = wd.findElements(By.xpath (".//*[@id='leftcontainer']/table/tbody/tr/td[1]")); System.out.println("Total No of rows are : " + rows.size()); for (int i =1;i<rows.size();i++) { max= wd.findElement(By.xpath("html/body/div[1]/div[5]/table/tbody/tr[" + (i+1)+ "]/td[4]")).getText(); NumberFormat f =NumberFormat.getNumberInstance(); Number num = f.parse(max); max = num.toString(); m = Double.parseDouble(max); if(m>r) { r=m; } } System.out.println("Maximum current price is : "+ r); } } </webelement></webelement>
Code التفسير:
- باستخدام برنامج تشغيل chrome، نقوم بتحديد موقع جدول الويب والحصول على العدد الإجمالي للصف باستخدام XPath “.//*[@id='leftcontainer']/table/tbody/tr/td[1]”
- باستخدام حلقة for، نقوم بالتكرار عبر العدد الإجمالي للصفوف ونجلب القيم واحدًا تلو الآخر. للحصول على الصف التالي نستخدم (i+1) في XPath
- نقارن القيمة القديمة بالقيمة الجديدة ويتم طباعة القيمة القصوى في نهاية الحلقة
انتاج
مثال: الحصول على كافة قيم الجدول الديناميكي
خذ بعين الاعتبار الجدول التالي: https://demo.guru99.com/test/table.html
يختلف عدد الأعمدة لكل صف.
هنا يحتوي الصف رقم 1 و2 و4 على 3 خلايا، والصف رقم 3 يحتوي على خليتين، والصف رقم 2 يحتوي على خلية واحدة.
نحن بحاجة للحصول على قيم جميع الخلايا
هذا هو الرمز:
import java.text.ParseException; import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import java.util.concurrent.TimeUnit; import org.openqa.selenium.chrome.ChromeDriver; public class NofRowsColmns { public static void main(String[] args) throws ParseException { WebDriver wd; System.setProperty("webdriver.chrome.">driver","G://chromedriver.exe"); wd = new ChromeDriver(); wd.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS); wd.get("https://demo.guru99.com/test/table.html"); //To locate table. WebElement mytable = wd.findElement(By.xpath("/html/body/table/tbody")); //To locate rows of table. List < WebElement > rows_table = mytable.findElements(By.tagName("tr")); //To calculate no of rows In table. int rows_count = rows_table.size(); //Loop will execute till the last row of table. for (int row = 0; row < rows_count; row++) { //To locate columns(cells) of that specific row. List < WebElement > Columns_row = rows_table.get(row).findElements(By.tagName("td")); //To calculate no of columns (cells). In that specific row. int columns_count = Columns_row.size(); System.out.println("Number of cells In Row " + row + " are " + columns_count); //Loop will execute till the last cell of that specific row. for (int column = 0; column < columns_count; column++) { // To retrieve text from that specific cell. String celtext = Columns_row.get(column).getText(); System.out.println("Cell Value of row number " + row + " and column number " + column + " Is " + celtext); } System.out.println("-------------------------------------------------- "); } } }
Code التفسير:
- Rows_count يعطي العدد الإجمالي للصفوف
- لكل صف نحصل على العدد الإجمالي للأعمدة المستخدمة
rows_table.get(row).findElements(By.tagName("td")); - نقوم بالتكرار خلال كل عمود وكل صف ونجلب القيم.
الناتج:















