Getting Started with E2E Testing Using Selenium Webdriver

As a developer, a critical aspect of delivering a top-quality application is ensuring it is thoroughly tested. One of the many ways one can test a web application is through End-to-end (E2E) testing. It is a software testing method that validates the functionality of an application from start to finish. In the context of web development, E2E testing is often performed on browsers and involves simulating user interactions with the application.

When performing E2E testing, a testing tool or framework, such as Selenium Webdriver, is used to automate user interactions with the application. The tool can open the browser, navigate to the application, enter data into input fields, click buttons, and perform other actions that a user would perform. By doing so, it can simulate a user’s path through the tested interaction flow and verify that all the components of the application are working as expected.

For example, consider an e-commerce website that has a login page, a search bar, a product page, and a checkout page. To perform E2E testing on this application, the testing tool can open the browser, navigate to the login page, enter valid login credentials, navigate to the search bar, enter a search term, select a product from the search results, navigate to the product page, add the product to the cart, navigate to the checkout page, enter shipping and billing information, and finally submit the order. The testing tool can then verify that the order was successfully placed and that the user was redirected to a confirmation page.

Automatically logging into a website using Selenium

To illustrate the power of Selenium Webdriver, let’s look at an example. Suppose we have a login form on our website, located at “www.yoursite.com." We want to test that the login form is functioning correctly by entering dummy data and clicking the submit button. If the login is successful, the client is expected to navigate to “www.yoursite.com/dashboard." If this does not happen, there is an error in our application. Here is a simple way to implement this test using Python:

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome()
driver.get("http://www.yoursite.com")

email_input = driver.find_element_by_name("email")
email_input.send_keys("dummy_email")

password_input = driver.find_element_by_name("password")
password_input.send_keys("dummy_password")

submit_button = driver.find_element_by_name("submit")
submit_button.click()

if driver.current_url != "http://www.yoursite.com/dashboard":
    raise Exception("Login failed")

driver.quit()

Keeping the user signed in while performing other tests

In the previous example, the test ends when the login process is complete, and the browser is closed. In a real scenario, we may want to keep the logged-in driver so that other tasks that need the user to be logged in do not have to go through this process again. One approach to this is to implement Selenium using classes:

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time

class LoginPage:
    def __init__(self, driver):
        self.driver = driver
        self.email_field = driver.find_element_by_name("email")
        self.password_field = driver.find_element_by_name("password")
        self.submit_button = driver.find_element_by_css_selector("button[type='submit']")

    def login(self, email, password):
        self.email_field.send_keys(email)
        self.password_field.send_keys(password)
        self.submit_button.click()

class CartPage:
    def __init__(self, driver):
        self.driver = driver
        self.cart_button = driver.find_element_by_css_selector(".cart-button")
        self.add_to_cart_button = driver.find_element_by_css_selector(".add-to-cart-button")
        self.cart_items = driver.find_elements_by_css_selector(".cart-item")

    def add_item_to_cart(self):
        self.add_to_cart_button.click()

    def open_cart(self):
        self.cart_button.click()

    def get_cart_items_count(self):
        return len(self.cart_items)

# Initialize the driver and navigate to the website
driver = webdriver.Chrome()
driver.get("https://www.yoursite.com")

# Instantiate the LoginPage and login with valid credentials
login_page = LoginPage(driver)
login_page.login("user@example.com", "password123")

# Instantiate the CartPage and add an item to the cart
cart_page = CartPage(driver)
cart_page.add_item_to_cart()

# Verify that the cart contains the item that was added
cart_page.open_cart()
assert cart_page.get_cart_items_count() == 1, "Item was not added to cart"

# Quit the driver
driver.quit()

In this example, we have two classes: LoginPage and CartPage. The LoginPage class represents the login page of the website and has a login method that takes an email and password and logs the user in. The CartPage class represents the cart page of the website and has methods for adding an item to the cart, opening the cart, and getting the count of cart items.

To use these classes in a test, we first initialize the driver and navigate to the website. Then, we instantiate the LoginPage and call the login method with valid credentials to log the user in. Finally, we instantiate the CartPage and call the add_item_to_cart method to add an item to the cart. We then verify that the cart contains the item that was added by calling the open_cart method and checking the count of cart items.

The advantage of this approach is that we only need to log in once, even if we need to perform multiple tasks that require the user to be logged in. This saves time and reduces the complexity of the test.

Conclusion

Overall, E2E testing is an essential part of the testing process for web applications. While it can be time-consuming and expensive, early bug detection, improved test coverage, and increased confidence in the application’s functionality make it a worthwhile investment.