Tabbed Interface

Monitor tab navigation and content panel visibility

Overview

Tabbed interfaces are common UI patterns where users switch between different content panels. This example demonstrates how Fault Sense validates that tab clicks properly activate the correct tab button and display the corresponding content panel.

Implementation

<!-- Tabs Container with Initial State -->
<div fs-feature="TabbedInterface"
     fs-assert="TabsInitialState"
     fs-trigger="mount"
     fs-assert-visible=".tab-content[data-tab='profile']">
  
  <!-- Tab Buttons -->
  <button class="tab-button" 
          data-tab="profile"
          fs-feature="TabbedInterface"
          fs-assert="SwitchTab"
          fs-trigger="click"
          fs-assert-visible=".tab-content[data-tab='profile']"
          fs-assert-updated=".tab-button[data-tab='profile'].active">
    Profile
  </button>
  
  <button class="tab-button" 
          data-tab="settings"
          fs-feature="TabbedInterface"
          fs-assert="SwitchTab"
          fs-trigger="click"
          fs-assert-visible=".tab-content[data-tab='settings']"
          fs-assert-updated=".tab-button[data-tab='settings'].active">
    Settings
  </button>
  
  <button class="tab-button" 
          data-tab="notifications"
          fs-feature="TabbedInterface"
          fs-assert="SwitchTab"
          fs-trigger="click"
          fs-assert-visible=".tab-content[data-tab='notifications']"
          fs-assert-updated=".tab-button[data-tab='notifications'].active">
    Notifications
  </button>
  
  <!-- Tab Content Panels -->
  <div class="tab-content" data-tab="profile">Profile content...</div>
  <div class="tab-content" data-tab="settings">Settings content...</div>
  <div class="tab-content" data-tab="notifications">Notifications content...</div>
</div>

Try it

Profile

Manage your profile information and preferences.

Key Attributes

fs-feature

Groups tab-related assertions under 'TabbedInterface' feature

fs-assert

Single assertion identifier 'SwitchTab' used for all tab buttons

fs-trigger

Events that trigger validation (mount for initial state, click for tab switches)

fs-assert-visible

Validates that the correct content panel becomes visible when tab is clicked

fs-assert-updated