Selenium Pagination Tutorial: How to Handle Page Navigation

As websites are becoming an integral part of the business, they must have a good UI that provides the best user experience and loads the content quickly.

Websites can be categorized into two types based on the categorisation of their content: paginated and infinite-scrolling websites. The paginated website divides the content of the website into different pages, allowing the user to access all the available content on the different pages of the website one by one seamlessly.

In this Selenium pagination tutorial, we will learn about paginated websites, their importance, and how to automate pagination using Selenium Java.

What Is Pagination?

Pagination is the method of segregating the content of a website across multiple pages. The users can access the different pages on the website by using the navigation panel provided at the bottom of the page. The navigation panel has buttons with page numbers and also dedicated buttons to navigate to the first, next, previous, and last pages, respectively.

The following screenshot from the LambdaTest eCommerce Playground shows pagination for the different products available on the website.

As we can see, the content is paginated on the website to make it easier for the end users to seamlessly navigate through the different products available and accordingly search and select the required one.

Shopping websites like Amazon and eBay use pagination to display lists of multiple products online on different pages. Pagination helps users smoothly transition to different pages and search for the required product easily.

Single-page applications, such as Gmail and Facebook, dynamically rewrite the current web page with the latest data from the web server, rather than loading a new web page in the web browser. Gmail uses pagination to load the email, whereas Facebook uses infinite scrolling to load its news feed.

Why Is Pagination Important?

The basic idea behind adding pagination to a website is that users can be presented with the content of the website page by page. This helps the users easily check the specific content they are looking for. However, in technical terms, it has more to do with that than just presentation.

Consider a scenario in which a website displays content using pagination, and the end user has a slow network connection. In such a case, it can be ensured that the website will at least load the pagination data that the user has asked for. However, in a similar situation with infinite scrolling websites, chances are no content would be loaded due to low internet speed, and the data loading icon might be displayed continuously.

The following points will help in better understanding the requirement for pagination in a website.

Speed Up the Page-Loading Process

Performance plays a vital part in websites. As per the statistics collected by WebFX, around 40% of web users will abandon a website if it takes more than 3 seconds to load.

This issue can be addressed by delivering content in smaller chunks and loading pages incrementally. This approach speeds up the page load time and enhances the user’s navigation experience.

Improved User Experience

Pagination helps in faster and more responsive web pages, thus providing a better user experience to the end users. With the help of pagination, users can quickly navigate to the different pages to check out the desired content on the website.

As we learned that pagination solves multiple problems for a website, it is important to perform thorough testing of pagination on the website to give end users a bug-free experience.

So, let’s now delve into the other part of this Selenium pagination tutorial, where we discuss how to automate pagination using Selenium Java.

Selenium Pagination Demo: How to Automate Page Navigation?

In this section, we will learn how to automate pagination using Selenium WebDriver with Java.

The following test scenarios from the product page of the LambdaTest eCommerce Playground website will be taken into account in order to demo the Selenium pagination tests.

Test Scenario 1

1. Navigate to the product page on the LambdaTest eCommerce Playground website.
2. Verify that the pagination details at the end of the page contain the text “5 pages”.
3. Print the product details of all five pages one by one by clicking the “Next” button.

Test Scenario 2

1. Navigate to the product page on the LambdaTest eCommerce Playground website.
2. Search for a product with the name “HP LP3065 “on the page.
3. If the product is not found on the current page, perform a search operation by navigating to the next page till the last page on the website.
4. If the product is found, print the message “Product found” in the console and exit the code.
5. In case the product is not found by searching till the last page, print the message “Product not found” and exit the code.

Setting Up the Project

To start with, in the demonstration, Maven is used as a build tool, and TestNG is used as the test runner. Selenium Java will be used for writing the web automation tests.

So, let’s first create a new Maven project and update the dependencies for Selenium WebDriver and TestNG in the pom.xml file.

<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.31.0</version>
</dependency>

<dependency>
<groupId>org.testng</groupId>
<artifactId>testng</artifactId>
<version>7.11.0</version>
<scope>test</scope>
</dependency>

The project configuration is complete with updating the dependencies for Selenium WebDriver and TestNG in the pom.xml file. Next, we will be configuring the tests.

Configuring the Tests

The WebDriver class from Selenium will be used to implement the Selenium WebDriver. Additionally, we need to pass on the required configuration to maximise the browser window and add an implicit wait so the website loads correctly before we run the automated tests on it.

Let’s create a new class named SeleniumPaginationTests.java for implementing the test scenarios that we discussed previously.

public class SeleniumPaginationTests {

    private WebDriver driver;

//...
}

The setup() method created inside the SeleniumPaginationTests class starts the Chrome browser, maximizes it, and adds an implicit wait of 10 seconds.

@BeforeTest
    public void setup () {

        this.driver = new ChromeDriver ();
        this.driver.manage ()
            .window ()
            .maximize ();
        this.driver.manage ()
            .timeouts ()
            .implicitlyWait (Duration.ofSeconds (10));
    }

Notice the @BeforeTest annotation mentioned above in the setup() method. This annotation by TestNG is used so that this method gets executed first before the test gets executed, setting all the prerequisites required for running the tests.

Similarly, the teardown() will gracefully quit the WebDriver session.

@AfterTest
    public void tearDown () {
        this.driver.quit ();
    }

This method will be executed after the test is run using the @AfterTest annotation from TestNG.

Writing the Tests

In this section, we will be writing the tests for both of the test scenarios to demo the Selenium pagination tests.

Implementation: Test Scenario 1

In the first test scenario, we will be navigating to the product page of the LambdaTest eCommerce playground website. Next, the page number displayed in the pagination details at the bottom of the page will be verified.

Finally, the names of all the products displayed on all pages till the last page will be printed on the console.

@Test
    public void testProductDetailsOnAllPage () {
        this.driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=25_28");

        final ProductPage productPage = new ProductPage (this.driver);
        assertTrue (productPage.paginationDetails ()
            .contains ("5 Pages"));
        productPage.printProductDetailsOnPages ();
    }

The testProductDetailsOnAllPage() method created in the SeleniumPaginationTests class will perform all the action steps as discussed for the test scenario.

A separate class, ProductPage, has been created, which has all the implementation steps of test scenario 1.

public class ProductPage {

    private final WebDriver driver;

    public ProductPage (final WebDriver driver) {
        this.driver = driver;
    }

//...

}

The paginationDetails() method returns the pagination details in string format.

public String paginationDetails () {
        return this.driver.findElement (By.cssSelector (".content-pagination .text-right"))
            .getText ();
    }

The printProductDetailsOnPages() method is created in the ProductPage class to print the product name displayed on every page by using the Next navigation button and repeat the same action till the last page.

public void printProductDetailsOnPages () {
        while (isNavigationPanelDisplayed ()) {
            final List<WebElement> products = this.driver.findElements (By.cssSelector (".product-layout"));
            for (final WebElement product : products) {
                final WebElement productName = product.findElement (By.cssSelector (".caption h4 a"));
                System.out.println (productName.getText ());
            }
            if (isNextButtonIsDisplayed ()) {
                this.driver.findElement (By.linkText (">"))
                    .click ();
            } else {
                break;
            }
        }
    }

A While loop is used to check that the navigation panel is displayed at the bottom of the page. Next, it will find all the elements with the CSS selector “.product-layout”; it is actually a block of the product with its details on the page.

Once the product block is found, the product name will be extracted using the CSS Selector “.caption h4 a” and its text will be fetched using the getText() method of Selenium WebDriver. The names of all the available products on the page will then be printed on the console.

Next, the code will check if the Next button is displayed on the page. If the Next button is displayed, it will be located using the link text “>”, and a click action will be performed on it.

As the next page button uses the icon “>” in the navigation panel, it is used in the linkText locator strategy.

private boolean isNavigationPanelDisplayed () {
        try {
            return this.driver.findElement (By.cssSelector ("ul.pagination"))
                .isDisplayed ();
        } catch (final NoSuchElementException | StaleElementReferenceException e) {
            return false;
        }
    }

    private boolean isNextButtonIsDisplayed () {
        try {
            return this.driver.findElement (By.linkText (">"))
                .isDisplayed ();
        } catch (final NoSuchElementException | StaleElementReferenceException e) {
            return false;
        }
    }

The isDisplayed() method of Selenium WebDriver returns a boolean value. It will return true if the WebElement is displayed, else it will return false. This method is used to check if the Next button is displayed in the navigation panel.

On reaching the last page, where the Next button will not be displayed, NoSuchElementException will be thrown, which will be caught in the catch() block, and it will return false. Eventually, the break statement will be called, which will end the test.

Implementation: Test Scenario 2

In the second scenario, we will be searching for a product name, “HP LP3065”, on the product page of the LambdaTest eCommerce Playground website.

The condition for the search is that if the product is found, the text “Product found” should be printed on the console. After searching all the available pages, if the product is not found, it should print the text “Product not found”.

@Test
    public void testSearchForProduct () {
        this.driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=25_28");

        final ProductPage productPage = new ProductPage (this.driver);
        productPage.searchForProduct ("HP LP3065");
    }

The testSearchForProduct() test method created in the SeleniumPaginationTests class will perform all the test steps for test scenario 2.

In the ProductPage class, the searchForProduct() method is created, which takes the product name as a parameter. This product name will be searched on the page.

public void searchForProduct (final String nameOfProduct) {
        boolean found = false;
        while (!found) {
            final List<WebElement> products = this.driver.findElements (By.cssSelector (".product-layout"));
            for (final WebElement product : products) {
                final String productName = product.findElement (By.cssSelector (".caption h4 a"))
                    .getText ();
                if (nameOfProduct.equals (productName)) {
                    System.out.println ("Product found!");
                    found = true;
                    break;
                }
            }
            if (isNextButtonIsDisplayed ()) {
                this.driver.findElement (By.linkText (">"))
                    .click ();
            } else {
                System.out.println ("Product Not Found!");
                break;
            }
        }
    }

In the searchForProduct() method, a while loop is used to keep checking if the product is found on the page or not. This loop starts with searching for the product on the page by locating all the product blocks and going through the product names one by one. If the product name is found, the text “Product found” is printed on the console, and the loop ends.

In case the product name is not found on the current page, the code checks if the Next navigation button is displayed on the page. If the Next navigation button is displayed, it will click on it, and the same search will be performed on the next page. This process goes on till the last page.

In case the product name is not found after going through each page till the last page, the text “Product Not found” is printed on the console, and the test ends.

Executing the Tests

The following testng.xml file is created, which will help in executing the tests one by one.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="Automating Pagination with Selenium">
    <test name="Pagination tests - LambdaTest e-commerce website">
        <classes>
            <class name="io.github.mfaisalkhatri.paginationdemo.tests.SeleniumPaginationTests">
                <methods>
                    <include name="testProductDetailsOnAllPage"/>
                    <include name="testSearchForProduct"/>
                </methods>
            </class>
        </classes>
    </test>
</suite>

To start running the tests, right-click on the testng-pagination-tests.xml file and select the option “Run ../testng-pagination-tests.xml” to execute the test.

The following screenshot from IntelliJ IDE shows the successful execution of tests.

Final Thoughts

Pagination plays a vital role in displaying the content of the website. It can be helpful in showing the category’s product list, displaying the records of financial data, or a summarized list of any information meant for the end users. It helps in delivering a better user experience to the customers.

Testing pagination and checking the data manually could prove to be a very tedious task. Hence, test automation should be used as it can help in running multiple tests easily and provide accurate test results.

In this Selenium pagination tutorial, we learned about the importance of pagination and how to automate pagination using Selenium Java with some real-world examples. Remember, it's always better to do testing with the latest version of Selenium.

I hope this blog helped you learn new techniques of test automation.

Happy testing!!