Все ссылки на странице

Страница home-page

<div id="root">
<div class="app" id="app">
<div class="min-h-screen bg-gray-100">
<header class="bg-blue-600 text-white p-4" id="main-header">
<nav class="container mx-auto flex justify-between items-center">
<div class="logo" data-test-id="logo">
<h1 class="text-2xl font-bold">QA Test Site</h1>
</div>
<div class="nav-links flex items-center space-x-4">
<a class="hover:underline active-link" id="home-link" data-discover="true">Home</a>
<a class="hover:underline nav-link" id="items-link" data-discover="true">Track your Travel</a>
<button class="bg-blue-500 hover:bg-blue-400 px-4 py-2 rounded transition-colors duration-200 login-button" id="login-btn" data-test-id="login-button">Login</button>
</div>
</nav>
</header>
<main class="container mx-auto p-6">
<div class="wrapper" id="content-wrapper">
<div class="section primary-section" data-test-id="hero-section">
<div class="container">
<div class="row">
<div class="col-12" id="hero-col">
<h2 class="text-3xl font-bold mb-4 title">Welcome to QA Test Automation Laboratory</h2>
<p class="text-lg mb-6 description" data-test-id="description">This comprehensive website is designed for practicing advanced UI automation testing techniques</p>
</div>
</div>
</div>
</div>
<div class="section secondary-section">
<div class="container">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="card feature-card" id="feature-1">
<div class="card-header">
<h3 class="text-xl font-semibold mb-2">Interactive Modal Windows</h3>
</div>
<div class="card-body">
<p class="text-gray-600">Master testing complex modal dialogs with various form elements</p>
</div>
</div>
<div class="card feature-card" id="feature-2" data-test-id="feature-tables">
<div class="card-header">
<h3 class="text-xl font-semibold mb-2">Dynamic Data Tables</h3>
</div>
<div class="card-body">
<p class="text-gray-600">Practice advanced table interactions and sorting</p>
</div>
</div>
<div class="card feature-card" id="feature-3">
<div class="card-header">
<h3 class="text-xl font-semibold mb-2">Advanced Form Controls</h3>
</div>
<div class="card-body">
<p class="text-gray-600">Test sophisticated forms with dropdowns and file uploads</p>
</div>
</div>
</div>
</div>
</div>
<div class="section tertiary-section">
<div class="container">
<div class="resources-block" id="external-links">
<h3 class="text-xl font-semibold mb-4 resources-title">Professional Resources</h3>
<p class="text-gray-600 mb-4 resources-description">Essential tools and communities for QA professionals and developers</p>
<div class="resources-links">
<a class="resource-link" id="google-link" target="_blank" rel="noopener noreferrer">
<div class="resource-icon">🔍</div>
<div class="resource-content">
<h4 class="resource-name">Google Search</h4>
<span class="resource-desc">Universal search engine</span>
</div>
</a>
<a class="resource-link" id="stackoverflow-link" target="_blank" rel="noopener noreferrer">
<div class="resource-icon">💬</div>
<div class="resource-content">
<h4 class="resource-name">Stack Overflow</h4>
<span class="resource-desc">Developer community &amp; Q&amp;A</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="playground-section section" id="practice-playground" data-test-id="practice-playground" style="margin-top: 32px;">
<div class="container mx-auto">
<h3 class="text-2xl font-bold mb-4" id="playground-title" data-test-id="playground-title">Practice Playground</h3>
<p class="text-gray-600 mb-6">Extra widgets to practise dialogs, Shadow DOM, and hover tooltips.</p>
<div class="dialogs-block bg-white rounded-lg shadow p-6 mb-6 border-l-4 border-yellow-500" id="dialogs-block" data-test-id="dialogs-block">
<h4 class="text-xl font-semibold mb-3">Browser Dialogs</h4>
<div class="flex flex-wrap gap-2 mb-3">
<button id="alert-btn" data-test-id="alert-button" class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600">Show Alert</button>
<button id="confirm-btn" data-test-id="confirm-button" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Show Confirm</button>
<button id="prompt-btn" data-test-id="prompt-button" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">Show Prompt</button>
</div>
<div class="dialog-results text-sm" id="dialog-results" data-test-id="dialog-results">
<div id="confirm-result" data-test-id="confirm-result">Confirm result: <span class="font-mono">-</span></div>
<div id="prompt-result" data-test-id="prompt-result">Prompt result: <span class="font-mono">-</span></div>
</div>
</div>
<div class="shadow-dom-block bg-white rounded-lg shadow p-6 mb-6 border-l-4 border-indigo-500" id="shadow-dom-block" data-test-id="shadow-dom-block">
<h4 class="text-xl font-semibold mb-3">Shadow DOM Widget</h4>
<p class="text-sm text-gray-600 mb-3">The block below has an open Shadow Root. Playwright pierces it automatically - selectors look like regular ones.</p>
<div id="shadow-host" data-test-id="shadow-host"></div>
<div id="shadow-host-output" data-test-id="shadow-host-output" class="mt-3 text-sm text-gray-700">Last submitted from shadow: <span class="font-mono">-</span></div>
</div>
<div class="tooltip-block bg-white rounded-lg shadow p-6 mb-6 border-l-4 border-pink-500" id="tooltip-block" data-test-id="tooltip-block">
<h4 class="text-xl font-semibold mb-3">Hover Tooltip</h4>
<div class="relative inline-block group">
<button id="tooltip-trigger" data-test-id="tooltip-trigger" class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600">Hover me</button>
<div id="tooltip-content" data-test-id="tooltip-content" class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute left-0 top-full mt-2 px-3 py-2 bg-gray-900 text-white text-sm rounded shadow whitespace-nowrap pointer-events-none">Tooltip revealed on hover</div>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-gray-800 text-white p-6 mt-12" id="main-footer">
<div class="container mx-auto">
<div class="footer-content">
<div class="footer-section" id="footer-info">
<p class="text-center">© 2025 QA Test Automation Laboratory. Engineered for comprehensive testing practice.</p>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>