برنامه نویسی

اتوماسیون WebTable با استفاده از سلنیوم

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

جداول پویا را با استفاده از سلنیوم خودکار کنید

در این وبلاگ بر روی خودکارسازی جداول پویا تمرکز خواهیم کرد. چالش جداول پویا، برخورد با مکان یاب های پیچیده (بیشتر XPaths)، حلقه ها و مهمتر از همه با داده های پویا است.

جدول نمونه ای که باید برای اتوماسیون در نظر گرفته شود:

منبع: Fluent UI React Components

اتوماسیون WebTable با استفاده از سلنیوم

ساخت مکان یاب های WebElement

منابع خوب زیادی برای یادگیری در مورد XPaths وجود دارد. به عنوان یک مبتدی، این وبلاگ را بسیار مفید یافتم.

برای جداول پویا، مهم است که روی ساخت مکان یاب WebElement (عمدتا XPaths) تمرکز کنید.

مکان یابی ردیف های جدول

var rows = driver.findElements(By.xpath("//div[@id='story--components-table--focusable-elements-in-cells']//tbody//tr[not(th)]"));
  • یک XPath برای مکان یابی تمام ردیف های جدول استفاده می شود.
  • tr[not(th)] – این تضمین می کند که سرصفحه ها در صورت وجود به عنوان بخشی از ردیف های جدول درج نمی شوند زیرا در این مرحله ما فقط به داده های ارائه شده علاقه مند هستیم.
  • با این کار لیستی از مکان یاب ها برای شناسایی تمام ردیف های جدول به جز سرصفحه های جدول باز می گردد.

مکان یابی سلول ها در جدول

var cells = row.findElements(By.cssSelector("td"));

برای هر ردیف، مکان یاب های فوق به یافتن عنصر فرزند – td کمک می کند

داده های مورد انتظار را راه اندازی کنید

توجه داشته باشید: برای این مثال به تنهایی از مقداردهی اولیه استاتیک استفاده خواهیم کرد، اما این توصیه نمی شود.

var expectedData = List.of(
    new String[]{"Meeting notes", "Max Mustermann", "7h ago"},
    new String[]{"Thursday presentation", "Erika Mustermann", "Yesterday at 1:45 PM"},
    new String[]{"Training recording", "John Doe", "Yesterday at 1:45 PM"},
    new String[]{"Purchase order", "Jane Doe", "Tue at 9:30 AM"}
);

اکنون باید تمام ردیف‌ها و سلول‌های جدول را برای اعتبارسنجی داده‌ها حلقه بزنید.

اینم کد تست کامل

@Test
public void validateTableData() {
    // Load the URL
    driver.get("https://react.fluentui.dev/?path=/docs/components-table--default#focusable-elements-in-cells");

    // Initialise the expected data set
    var expectedData = List.of(
        new String[]{"Meeting notes", "Max Mustermann", "7h ago"},
        new String[]{"Thursday presentation", "Erika Mustermann", "Yesterday at 1:45 PM"},
        new String[]{"Training recording", "John Doe", "Yesterday at 1:45 PM"},
        new String[]{"Purchase order", "Jane Doe", "Tue at 9:30 AM"}
    );

    // Locate the table rows
    var rows = driver.findElements(By.xpath("//div[@id='story--components-table--focusable-elements-in-cells']//tbody//tr[not(th)]"));

    // Validate the table data
    for (int rowIndex = 0; rowIndex < rows.size(); rowIndex++) {
        var row = rows.get(rowIndex);
        var cells = row.findElements(By.cssSelector("td"));
        for (int cellIndex = 0; cellIndex < cells.size(); cellIndex++) {
            var cell = cells.get(cellIndex);
            // Get the cell value
            var text = cell.getText().trim();
               // Validate
            Assert.assertEquals(text, expectedData.get(rowIndex)[cellIndex], "Mismatch in column (" + cellIndex + ") at row " + rowIndex);
        }
    }
}

یک مشکل اساسی در نمونه کد بالا وجود دارد –
داده های مورد انتظار کدگذاری شده یا ثابت هستند. در حالت ایده‌آل، این باید از پایگاه داده یا با استفاده از APIها به دست آید، که به نوشتن wrapperها و چند خط کد نیز نیاز دارد. این به عنوان بخشی از یک وبلاگ آینده بررسی می شود.

راه حل دیگری با استفاده از Dynamic XPaths وجود دارد.

XPath های پویا چیست؟

Dynamic XPath یک مفهوم پیشرفته در Selenium WebDriver است که برای کنترل عناصر وب که ویژگی های خود را به صورت پویا تغییر می دهند ساخته شده است.
در اینجا می‌توانید درباره XPaths پویا بیشتر بدانید.

public WebElement getTableRow(String file, String author, String updated) {
    return driver.findElement(By.xpath("//div[@id='story--components-table--focusable-elements-in-cells']//tbody//tr[.//td//*[text()='"+file+"']]//td//*[text()='"+author+"']//ancestor::td//following-sibling::td[text()='"+updated+"']"));
}

در اینجا کد کامل با XPaths پویا آمده است

@Test
public void validateTableDataWithDynamicXpath() {
    // Load the URL
    driver.get("https://react.fluentui.dev/?path=/docs/components-table--default#focusable-elements-in-cells");

    // Initialise the expected data set
    var expectedData = List.of(
        new String[]{"Meeting notes", "Max Mustermann", "7h ago"},
        new String[]{"Thursday presentation", "Erika Mustermann", "Yesterday at 1:45 PM"},
        new String[]{"Training recording", "John Doe", "Yesterday at 1:45 PM"},
        new String[]{"Purchase order", "Jane Doe", "Tue at 9:30 AM"}
    );

    for (String[] data : expectedData) {
        // Get the WebElement based on test data
        WebElement row = getTableRow(data[0], data[1], data[2]);
        // Validate presence
        Assert.assertTrue(row.isDisplayed(), "Row not found");
    }
}

کدام یک از 2 رویکرد بهتر است؟

این بستگی به این دارد که چه چیزی باید تأیید شود. اگر برای یک ردیف یا یک مقدار است، رویکرد شماره 2 کار می کند.
اما با رویکرد شماره 2، XPaths باید تا حد امکان ساده شود تا تعمیر و نگهداری آسان شود و اگر ستون‌های جدول مدام در حال تغییر باشند، کار نخواهد کرد.
برای اعتبارسنجی کل جدول، من رویکرد شماره 1 را ترجیح می دهم، باز هم نکته کلیدی در اینجا ساده کردن XPaths تا حد امکان برای نگهداری است.

خودکارسازی اجزا با مکان یاب پویا با استفاده از DevAssure

با DevAssure می توانید به راحتی اجزای خود را با مکان یاب پویا خودکار کنید. شما یک چارچوب اتوماسیون سفارشی خواهید داشت که با نیازهای محصول شما همراستا می شود، بدون اینکه هزینه ای برای حفظ خود چارچوب داشته باشید.

درباره اپلیکیشن DevAssure Automation بیشتر بدانید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا