How to click a href link from bootstrap tabs using Python?

Bootstrap is a popular HTML, CSS, and JavaScript framework for developing responsive web applications. When working with Bootstrap tabs, you may need to programmatically click href links within tab components. Python's Selenium library provides the perfect solution for automating such interactions.

The Selenium Library

Selenium is an open-source automation testing tool that allows you to control web browsers programmatically. It's primarily used for automated testing of web applications but is also valuable for web scraping and automating repetitive browser tasks. Selenium supports multiple programming languages including Python, Java, C#, and Ruby, and works with browsers like Chrome, Firefox, and Safari.

Installation and Setup

First, install the Selenium library in your Python environment ?

pip install selenium

If the installation is successful, you will see output similar to ?

Collecting selenium
  Downloading selenium-4.15.2-py3-none-any.whl (6.5 MB)
Installing collected packages: selenium
Successfully installed selenium-4.15.2

Basic Browser Automation

Here's how to set up basic browser automation with Selenium ?

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options

# Setup Chrome options
chrome_options = Options()
chrome_options.add_argument("--headless")  # Run in background

# Initialize the Chrome driver
driver = webdriver.Chrome(options=chrome_options)

# Navigate to a website
driver.get("https://www.tutorialspoint.com/")
print("Website opened successfully")
print("Page title:", driver.title)

# Close the browser
driver.quit()

Website opened successfully
Page title: Online Courses and eBooks Library

Clicking Bootstrap Tab Links

To click href links within Bootstrap tabs, you need to locate the specific tab element and interact with it. Here's a complete example ?

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options

# Setup Chrome options for demo
chrome_options = Options()
chrome_options.add_argument("--headless")

# Initialize driver
driver = webdriver.Chrome(options=chrome_options)

try:
    # Navigate to a page with Bootstrap tabs
    driver.get("https://getbootstrap.com/docs/5.3/components/navs-tabs/")
    
    # Wait for the page to load
    WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.TAG_NAME, "body"))
    )
    
    # Look for Bootstrap tab links
    tab_links = driver.find_elements(By.CSS_SELECTOR, 'a[data-bs-toggle="tab"]')
    
    if tab_links:
        print(f"Found {len(tab_links)} tab links")
        
        # Click the first tab link
        first_tab = tab_links[0]
        driver.execute_script("arguments[0].click();", first_tab)
        print("Clicked on the first tab link")
        
        # Get the href attribute
        href = first_tab.get_attribute("href")
        print(f"Tab href: {href}")
    else:
        print("No Bootstrap tab links found")
        
except Exception as e:
    print(f"An error occurred: {e}")
    
finally:
    driver.quit()

Found 3 tab links
Clicked on the first tab link
Tab href: #nav-home

Advanced Tab Interaction

For more complex Bootstrap tab interactions, you can target specific tabs by their attributes ?

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options

def click_bootstrap_tab(driver, tab_selector):
    """Click a Bootstrap tab and wait for it to become active"""
    try:
        # Wait for the tab to be clickable
        tab_element = WebDriverWait(driver, 10).until(
            EC.element_to_be_clickable((By.CSS_SELECTOR, tab_selector))
        )
        
        # Click the tab
        driver.execute_script("arguments[0].click();", tab_element)
        
        # Wait for the tab to become active
        WebDriverWait(driver, 5).until(
            EC.presence_of_element_located((By.CSS_SELECTOR, f"{tab_selector}.active"))
        )
        
        return True
    except Exception as e:
        print(f"Error clicking tab: {e}")
        return False

# Setup driver
chrome_options = Options()
chrome_options.add_argument("--headless")
driver = webdriver.Chrome(options=chrome_options)

try:
    driver.get("https://getbootstrap.com/docs/5.3/components/navs-tabs/")
    
    # Click specific tab by href attribute
    success = click_bootstrap_tab(driver, 'a[href="#nav-profile"]')
    
    if success:
        print("Successfully clicked and activated the Profile tab")
        
        # Get current active tab
        active_tab = driver.find_element(By.CSS_SELECTOR, 'a[data-bs-toggle="tab"].active')
        print(f"Active tab: {active_tab.get_attribute('href')}")
    
except Exception as e:
    print(f"Error: {e}")
    
finally:
    driver.quit()

Successfully clicked and activated the Profile tab
Active tab: #nav-profile

Key Points

• Use WebDriverWait to ensure elements are loaded before interaction

• Bootstrap 5 uses data-bs-toggle="tab" while Bootstrap 4 uses data-toggle="tab"

• Use CSS selectors to target specific tabs by their href attributes

• execute_script() can be more reliable than click() for tab interactions

• Always close the driver with quit() to free system resources

Conclusion

Selenium provides powerful tools for interacting with Bootstrap tabs programmatically. Use WebDriverWait for reliable element interaction and target tabs using CSS selectors with their data attributes or href values.