Selenium Pagination Tutorial: How to Handle Page Navigation

Faisal Khatri

Posted On: September 13, 2024

view count128139 Views

Read time16 Min Read

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 categorization 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 on the LambdaTest cloud grid.

What Is Pagination?

Pagination is the method of segregating the content of the 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 LambaTest eCommerce Playground shows pagination for the different products available on the website.

pagination for the different products available

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 such as Amazon and eBay use pagination to display the list of multiple products online on different pages. Pagination helps the users smoothly transition to the different pages and search for the required product easily.

Single-page applications such as Gmail, Facebook, etc. dynamically rewrite the current web page with the latest data from the web server instead of the web browser loading the entire new web page. Gmail uses pagination to load the email, whereas Facebook uses infinite scrolling to load its new feed.

Info Note

Automate pagination testing on the cloud. Try LambdaTest Today!

Why Is Pagination Important?

The basic idea behind adding pagination to a website is that the 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 rather 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 for the websites. As per the statistics collected by WebFX, around 40% of web users will abandon the 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 of a website, it is important to perform thorough testing of pagination on the website to give the 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 on cloud testing platforms like LambdaTest.

Selenium Pagination Demo: How to Automate Page Navigation?

In this section of the Selenium pagination tutorial, we will learn how to automate pagination using Selenium Java on the LambdaTest cloud.

LambdaTest is an AI-powered test execution platform that helps you automate pagination tests with Selenium online. You can run these tests on over 3000+ real desktop browsers and operating system combinations.

The following test scenarios 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. Change the filter records value to “50”.
  3. Check that the pagination details at the end of the page show the page number correctly.

Test Scenario 3:

  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.

Test Scenario 4:

  1. Navigate to the product page on the LambdaTest eCommerce Playground website.
  2. Click the “Last” navigation button to move to the last page and confirm that the user is on the last page.
  3. Click the “First” navigation button to move to the first page and confirm that the user is on the first page.

Setting up the Project

To start with, 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.

The project configuration is complete with updating the dependencies for Selenium WebDriver and TestNG in the pom.xml file. Next, we need to configure the Selenium WebDriver to run the tests on the LambdaTest cloud platform.

In the next section of this blog on Selenium pagination, we will learn how to configure the tests.

Configuring the Tests

The RemoteWebDriver class will be used to implement the Selenium WebDriver. Additionally, we need to pass on the required capabilities for configuring the browser, browser version, platform, and its version for running the tests.

These capabilities can be easily set up using the LambdaTest Capabilities Generator website. This website allows us to set the capabilities using the UI and generates the code on run time that can be directly used in the automation tests.

LambdaTest Username and Access Key are the two important values that need to be passed in the tests without which the tests can not be run on the LambdaTest cloud grid. These values will be supplied using the environment variable on run time.

Let’s create a new class named SeleniumPaginationTests.java that will have all the test scenarios covered.

The setup() method created inside the SeleniumPaginationTests class has the configuration code for running the tests on the LambdaTest cloud grid. This configuration has the LambdaTest userName, accessKey, and the capabilities that were discussed in the earlier section.

github

The RemoteWebDriver class is used to implement Selenium WebDriver in order to execute the tests on the LambdaTest cloud grid. The tests will be executed on the latest version of Chrome browser on the Windows 10 platform.

These capabilities, such as platform name, browser name, its respective versions, etc., required for the cloud platform are supplied using the getChromeOptions() method.

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

Similarly, the teardown() method is created that will update the status for the test on the LambdaTest cloud grid. The status variable will be updated in the individual tests based on the test assertions getting passed/fail.

Finally, it will gracefully quit the RemoteWebDriver session.

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

Writing the Tests

In this section of this blog on Selenium pagination, we will write tests for all 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.

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 the test scenario 1.

The paginationdetails() method returns the pagination details in String format.

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

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”; this is actually a block of the product with its details on the page.

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. All the product names available on the page will be printed on the console.

 product names available on the page will 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 hence it is used in the linkText locator strategy.

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 for checking if the Next button is displayed in the navigation panel or not.

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 navigate to the product page of the LambdaTest eCommerce Playground website, change the filter record value to “50” and verify that the pagination details at the bottom of the page display the page number correctly.

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

The changeFilterRecord() method created in the ProductPage class takes the record number as a parameter. It will locate the filter dropdown box and select the record number as provided as input by the user using the selectByVisibleText() method of the Select class from Selenium WebDriver.

After the filter is applied, the assertion will be performed by using the assertTrue() method from TestNG. The paginationDetails() method used in assertion returns the pagination details in the String format.

The assertion checks if the pagination details contain the expected number of pages.

Implementation: Test Scenario 3

In the third 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”.

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

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.

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 in 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.

Implementation: Test Scenario 4

In the fourth scenario, after launching the product page on the LambdaTest eCommerce Playground website. The “First” and “Last” navigation buttons on the navigation panel will be clicked, and assertions will be performed to check that the navigation was successful.

The testPageNavigation() test method is created within the SeleniumPaginationTests class that will perform the navigation to the first and the last page and accordingly assert that the correct pages are displayed.

The navigateToLastPage() method that is created in the ProductPage class locates the Last navigation button and performs a click on it.

Likewise, the navigateToFirstPage() method locates the First navigation button and performs a click on it.

The paginationDetails() method returns the pagination details text displayed at the bottom of the page. This text is used to perform the assertions.

When the last page is navigated, the assertion is performed to check that the pagination details display the text “Showing 61 to 75 of 75”. Similarly, when the First navigation button is clicked, it is checked that the text “Showing 1 to 15 of 75” is displayed in the pagination details.

Executing the Tests

The following testng.xml file is created which will help in executing all the tests one by one. These tests will be executed on the LambdaTest cloud grid.

Before executing the tests, make sure to add the LambdaTest Username and Access Key in the environment variables, as these are mandatory values that are needed to run the tests on the LambdaTest cloud grid.

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 shows the successful execution of tests using IntelliJ IDE.

 screenshot from IntelliJ shows the successful execution of tests

The test execution details can be found on the LambdaTest dashboard.

 test execution details can be found on the LambdaTest dashboard

The LambdaTest build details window shows a detailed insight into the test execution. It provides details such as platform name, browser name, and its version, video of the test execution, and step-by-step test execution details.

The screenshot of the test execution, as well as the logs could also be found on the LambdaTest build details window.

 logs could also be found on the LambdaTest build details window

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.

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

Happy Testing!!

Frequently Asked Questions (FAQs)

What is pagination in automation?

Pagination in automation refers to the process of handling web pages or data that are divided into multiple sections or pages. This is commonly seen in websites displaying large amounts of content, like search results or product listings, where only a subset of the data is shown at a time, with navigation options (e.g., “Next,” “Previous,” or page numbers) to view more.

How to implement pagination in Java?

In Java, pagination refers to the process of dividing a large set of data into smaller, manageable chunks (pages), allowing users to navigate through them one page at a time. It’s commonly used when displaying large lists of items, like search results, products in an online store, or database records, where displaying all data at once would be inefficient.

  1. Determine Page Number and Size.
  2. Calculate Indexes.
  3. Extract Data for the Page.
  4. Handle Edge Cases.
Author Profile Author Profile Author Profile

Author’s Profile

Faisal Khatri

Faisal is a Software Testing Professional having 14+ years of experience in automation as well as manual testing. He is a QA, freelancer, blogger and open source contributor. He loves learning new tools and technologies and sharing his experience by writing blogs.

Blogs: 38



linkedintwitter

Test Your Web Or Mobile Apps On 3000+ Browsers

Signup for free