Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Playwright Python showcase</title> | |
| <!-- Import Phosphor Icons for modern iconography --> | |
| <script src="https://unpkg.com/@phosphor-icons/web"></script> | |
| <style> | |
| /* --- CSS Variables & Reset --- */ | |
| :root { | |
| --bg-body: #0f172a; | |
| --bg-card: #1e293b; | |
| --bg-code: #0d1117; | |
| --primary: #22d3ee; | |
| --secondary: #818cf8; | |
| --accent: #2ea043; | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --border: #334155; | |
| --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| --font-code: 'Fira Code', 'Courier New', monospace; | |
| --radius: 12px; | |
| --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| background-color: var(--bg-body); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| transition: color 0.2s; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| /* --- Header --- */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background: rgba(15, 23, 42, 0.85); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--border); | |
| z-index: 1000; | |
| padding: 1rem 0; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1.5rem; | |
| } | |
| .nav-wrapper { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--text-main); | |
| } | |
| .logo i { | |
| color: var(--primary); | |
| font-size: 1.8rem; | |
| } | |
| .brand-link { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--border); | |
| transition: all 0.3s ease; | |
| } | |
| .brand-link:hover { | |
| background: rgba(34, 211, 238, 0.1); | |
| color: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| /* --- Hero Section --- */ | |
| .hero { | |
| padding: 8rem 0 4rem; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -100px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 600px; | |
| height: 400px; | |
| background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, rgba(15, 23, 42, 0) 70%); | |
| z-index: -1; | |
| pointer-events: none; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| font-weight: 800; | |
| margin-bottom: 1.5rem; | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: -0.02em; | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| color: var(--text-muted); | |
| max-width: 700px; | |
| margin: 0 auto 2.5rem; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 2rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| cursor: pointer; | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: var(--bg-body); | |
| box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 30px rgba(34, 211, 238, 0.5); | |
| } | |
| /* --- Features Grid --- */ | |
| .features { | |
| padding: 4rem 0; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| padding: 2rem; | |
| border-radius: var(--radius); | |
| transition: transform 0.3s ease, border-color 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary); | |
| } | |
| .card-icon { | |
| font-size: 2rem; | |
| color: var(--secondary); | |
| margin-bottom: 1rem; | |
| } | |
| .card h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .card p { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| } | |
| /* --- Code Showcase Section --- */ | |
| .showcase { | |
| padding: 4rem 0; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-header h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| /* Tab System */ | |
| .tabs-wrapper { | |
| background: var(--bg-card); | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| .tabs-header { | |
| display: flex; | |
| background: rgba(0,0,0,0.2); | |
| border-bottom: 1px solid var(--border); | |
| overflow-x: auto; | |
| } | |
| .tab-btn { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| padding: 1rem 1.5rem; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| transition: all 0.3s; | |
| white-space: nowrap; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .tab-btn:hover { | |
| color: var(--text-main); | |
| background: rgba(255,255,255,0.03); | |
| } | |
| .tab-btn.active { | |
| color: var(--primary); | |
| border-bottom-color: var(--primary); | |
| background: rgba(34, 211, 238, 0.05); | |
| } | |
| .tab-content { | |
| display: none; | |
| padding: 1.5rem; | |
| position: relative; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(5px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Code Window Styling */ | |
| .code-window { | |
| background: var(--bg-code); | |
| border-radius: 8px; | |
| border: 1px solid var(--border); | |
| font-family: var(--font-code); | |
| font-size: 0.9rem; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .window-header { | |
| background: rgba(255,255,255,0.05); | |
| padding: 0.5rem 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .window-controls { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .control { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| } | |
| .red { background: #ff5f56; } | |
| .yellow { background: #ffbd2e; } | |
| .green { background: #27c93f; } | |
| .filename { | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| } | |
| .copy-btn { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--text-muted); | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 0.75rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .copy-btn:hover { | |
| color: var(--text-main); | |
| border-color: var(--text-main); | |
| } | |
| .code-body { | |
| padding: 1.5rem; | |
| overflow-x: auto; | |
| color: #e6edf3; | |
| } | |
| /* Syntax Highlighting Colors */ | |
| .k { color: #ff7b72; } /* Keyword */ | |
| .f { color: #d2a8ff; } /* Function */ | |
| .s { color: #a5d6ff; } /* String */ | |
| .c { color: #8b949e; font-style: italic; } /* Comment */ | |
| .n { color: #79c0ff; } /* Number/Class */ | |
| .o { color: #ff7b72; } /* Operator */ | |
| /* --- Installation Section --- */ | |
| .install { | |
| padding: 4rem 0; | |
| background: linear-gradient(to bottom, var(--bg-body), #0b1120); | |
| } | |
| .install-box { | |
| background: var(--bg-card); | |
| border: 1px solid var(--accent); | |
| padding: 2rem; | |
| border-radius: var(--radius); | |
| text-align: center; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .install-cmd { | |
| display: inline-block; | |
| background: rgba(0,0,0,0.3); | |
| padding: 0.5rem 1rem; | |
| border-radius: 6px; | |
| font-family: var(--font-code); | |
| color: var(--primary); | |
| margin: 1rem 0; | |
| border: 1px dashed var(--border); | |
| } | |
| /* --- Footer --- */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 2rem 0; | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| /* --- Responsive Tweaks --- */ | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .nav-wrapper { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .tabs-header { | |
| padding-bottom: 0.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container nav-wrapper"> | |
| <div class="logo"> | |
| <i class="ph ph-play-circle"></i> | |
| <span>Playwright<span style="color:var(--text-muted)">.Py</span></span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand-link"> | |
| Built with anycoder <i class="ph ph-arrow-square-out"></i> | |
| </a> | |
| </div> | |
| </header> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="hero container"> | |
| <h1>Fast, Reliable & Modern<br>Web Automation</h1> | |
| <p>Playwright enables reliable end-to-end testing for modern web apps. This page demonstrates core capabilities using Python.</p> | |
| <a href="#samples" class="btn btn-primary"> | |
| View Code Samples <i class="ph ph-code"></i> | |
| </a> | |
| </section> | |
| <!-- Features Grid --> | |
| <section class="features container"> | |
| <div class="grid"> | |
| <div class="card"> | |
| <div class="card-icon"><i class="ph ph-lightning"></i></div> | |
| <h3>Fast Execution</h3> | |
| <p>Parallelize tests with zero configuration. Playwright runs tests in parallel across all browsers.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon"><i class="ph ph-crosshair"></i></div> | |
| <h3>Auto-Waiting</h3> | |
| <p>No more flaky tests. Playwright waits for elements to be actionable before executing actions.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon"><i class="ph ph-browsers"></i></div> | |
| <h3>Cross-Browser</h3> | |
| <p>Test on Chromium, Firefox, and WebKit (Safari) with a single API on Windows, Linux, and macOS.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Code Samples Section --> | |
| <section id="samples" class="showcase container"> | |
| <div class="section-header"> | |
| <h2>Python Code Samples</h2> | |
| <p style="color: var(--text-muted)">Click on the tabs to explore different Playwright capabilities.</p> | |
| </div> | |
| <div class="tabs-wrapper"> | |
| <!-- Tabs Header --> | |
| <div class="tabs-header"> | |
| <button class="tab-btn active" onclick="openTab(event, 'basic')"> | |
| <i class="ph ph-file-code"></i> Basic Script | |
| </button> | |
| <button class="tab-btn" onclick="openTab(event, 'locators')"> | |
| <i class="ph ph-crosshair-simple"></i> Locators | |
| </button> | |
| <button class="tab-btn" onclick="openTab(event, 'assertions')"> | |
| <i class="ph ph-check-circle"></i> Assertions | |
| </button> | |
| <button class="tab-btn" onclick="openTab(event, 'trace-viewer')"> | |
| <i class="ph ph-film-strip"></i> Trace Viewer | |
| </button> | |
| </div> | |
| <!-- Tab Content: Basic Script --> | |
| <div id="basic" class="tab-content active"> | |
| <p style="margin-bottom: 1rem; color: var(--text-muted);">A simple synchronous script to launch a browser and take a screenshot.</p> | |
| <div class="code-window"> | |
| <div class="window-header"> | |
| <div class="window-controls"> | |
| <div class="control red"></div> | |
| <div class="control yellow"></div> | |
| <div class="control green"></div> | |
| </div> | |
| <div class="filename">example_basic.py</div> | |
| <button class="copy-btn" onclick="copyCode(this)">Copy</button> | |
| </div> | |
| <div class="code-body"> | |
| <pre><code><span class="k">from</span> playwright.sync_api <span class="k">import</span> sync_playwright | |
| <span class="k">with</span> sync_playwright() <span class="k">as</span> p: | |
| <span class="c"># Launch browser (headless=False to see UI)</span> | |
| browser <span class="o">=</span> p.chromium.launch(headless<span class="o">=</span><span class="n">False</span>) | |
| page <span class="o">=</span> browser.new_page() | |
| <span class="c"># Navigate to URL</span> | |
| page.<span class="f">goto</span>(<span class="s">"https://playwright.dev/python"</span>) | |
| <span class="c"># Interact with page</span> | |
| print(page.<span class="f">title</span>()) | |
| <span class="c"># Screenshot</span> | |
| page.<span class="f">screenshot</span>(path<span class="o">=</span><span class="s">"example.png"</span>) | |
| browser.<span class="f">close</span>()</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab Content: Locators --> | |
| <div id="locators" class="tab-content"> | |
| <p style="margin-bottom: 1rem; color: var(--text-muted);">Using robust Locators to find elements on the page.</p> | |
| <div class="code-window"> | |
| <div class="window-header"> | |
| <div class="window-controls"> | |
| <div class="control red"></div> | |
| <div class="control yellow"></div> | |
| <div class="control green"></div> | |
| </div> | |
| <div class="filename">locators.py</div> | |
| <button class="copy-btn" onclick="copyCode(this)">Copy</button> | |
| </div> | |
| <div class="code-body"> | |
| <pre><code><span class="k">from</span> playwright.sync_api <span class="k">import</span> sync_playwright | |
| <span class="k">with</span> sync_playwright() <span class="k">as</span> p: | |
| browser <span class="o">=</span> p.chromium.launch() | |
| page <span class="o">=</span> browser.new_page() | |
| page.<span class="f">goto</span>(<span class="s">"https://example.com"</span>) | |
| <span class="c"># Get by role (most accessible)</span> | |
| get_started <span class="o">=</span> page.<span class="f">get_by_role</span>(<span class="s">"link"</span>, name<span class="o">=</span><span class="s">"Get Started"</span>) | |
| <span class="c"># Get by text content</span> | |
| submit <span class="o">=</span> page.<span class="f">get_by_text</span>(<span class="s">"Submit"</span>) | |
| <span class="c"># Get by test ID (recommended for CSS changes)</span> | |
| submit <span class="o">=</span> page.<span class="f">get_by_test_id</span>(<span class="s">"auth-button"</span>) | |
| <span class="c"># Chain locators</span> | |
| product <span class="o">=</span> page.locator(<span class="s">".list"</span>).<span class="f">get_by_text</span>(<span class="s">"Playwright"</span>) | |
| browser.<span class="f">close</span>()</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab Content: Assertions --> | |
| <div id="assertions" class="tab-content"> | |
| <p style="margin-bottom: 1rem; color: var(--text-muted);">Built-in assertions to wait for conditions automatically.</p> | |
| <div class="code-window"> | |
| <div class="window-header"> | |
| <div class="window-controls"> | |
| <div class="control red"></div> | |
| <div class="control yellow"></div> | |
| <div class="control green"></div> | |
| </div> | |
| <div class="filename">assertions.py</div> | |
| <button class="copy-btn" onclick="copyCode(this)">Copy</button> | |
| </div> | |
| <div class="code-body"> | |
| <pre><code><span class="k">from</span> playwright.sync_api <span class="k">import</span> expect | |
| <span class="c"># Navigating and waiting for URL</span> | |
| page.<span class="f">goto</span>(<span class="s">"https://example.com"</span>) | |
| <span class="f">expect</span>(page).<span class="f">to_have_url</span>(<span class="s">"https://example.com/"</span>) | |
| <span class="c"># Checking element visibility</span> | |
| locator <span class="o">=</span> page.locator(<span class="s">".status-message"</span>) | |
| <span class="f">expect</span>(locator).<span class="f">to_be_visible</span>() | |
| <span class="c"># Checking text content</span> | |
| <span class="f">expect</span>(locator).<span class="f">to_contain_text</span>(<span class="s">"Welcome"</span>) | |
| <span class="c"># Checking attribute values</span> | |
| button <span class="o">=</span> page.locator(<span class="s">"#submit"</span>) | |
| <span class="f">expect</span>(button).<span class="f">to_have_attribute</span>(<span class="s">"type"</span>, <span class="s">"submit"</span>)</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab Content: Trace Viewer --> | |
| <div id="trace-viewer" class="tab-content"> | |
| <p style="margin-bottom: 1rem; color: var(--text-muted);">Capturing a trace to debug test failures visually.</p> | |
| <div class="code-window"> | |
| <div class="window-header"> | |
| <div class="window-controls"> | |
| <div class="control red"></div> | |
| <div class="control yellow"></div> | |
| <div class="control green"></div> | |
| </div> | |
| <div class="filename">trace.py</div> | |
| <button class="copy-btn" onclick="copyCode(this)">Copy</button> | |
| </div> | |
| <div class="code-body"> | |
| <pre><code><span class="c"># Start tracing before creating/running the browser</span> | |
| context <span class="o">=</span> browser.new_context() | |
| context.<span class="f">tracing</span>.<span class="f">start</span>(screenshots<span class="o">=</span><span class="n">True</span>, snapshots<span class="o">=</span><span class="n">True</span>) | |
| page <span class="o">=</span> context.new_page() | |
| page.<span class="f">goto</span>(<span class="s">"https://playwright.dev"</span>) | |
| <span class="c"># ... perform actions ...</span> | |
| page.<span class="f">click</span>(<span class="s">"text=Get Started"</span>) | |
| <span class="c"># Stop tracing and save the file</span> | |
| context.<span class="f">tracing</span>.<span class="f">stop</span>(path <span class="o">=</span> <span class="s">"trace.zip"</span>) | |
| <span class="c"># View trace using CLI:</span> | |
| <span class="c"># playwright show-trace trace.zip</span></code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Installation Section --> | |
| <section id="install" class="install"> | |
| <div class="container"> | |
| <div class="install-box"> | |
| <h2 style="margin-bottom: 1rem;">Get Started Now</h2> | |
| <p style="color: var(--text-muted);">Install Playwright via pip and install the required browsers.</p> | |
| <div class="install-cmd">pip install playwright</div> | |
| <div class="install-cmd">playwright install</div> | |
| <a href="https://playwright.dev/python/docs/intro" target="_blank" class="btn btn-primary" style="background: var(--accent); margin-top: 1rem;"> | |
| Read Official Docs <i class="ph ph-book-open"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <p>© 2023 Playwright Python Showcase. Built for demonstration.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tab Functionality | |
| function openTab(evt, tabName) { | |
| // Hide all tab content | |
| const tabContent = document.getElementsByClassName("tab-content"); | |
| for (let i = 0; i < tabContent.length; i++) { | |
| tabContent[i].classList.remove("active"); | |
| } | |
| // Remove active class from all buttons | |
| const tabBtns = document.getElementsByClassName("tab-btn"); | |
| for (let i = 0; i < tabBtns.length; i++) { | |
| tabBtns[i].classList.remove("active"); | |
| } | |
| // Show current tab and add active class | |
| document.getElementById(tabName).classList.add("active"); | |
| evt.currentTarget.classList.add("active"); | |
| } | |
| // Copy Code Functionality | |
| function copyCode(btnElement) { | |
| // Find the code block within the same window | |
| const codeWindow = btnElement.closest('.code-window'); | |
| const codeBlock = codeWindow.querySelector('code'); | |
| const textToCopy = codeBlock.innerText; | |
| // Use Clipboard API | |
| navigator.clipboard.writeText(textToCopy).then(() => { | |
| // Visual feedback | |
| const originalText = btnElement.innerText; | |
| btnElement.innerText = "Copied!"; | |
| btnElement.style.color = "var(--accent)"; | |
| btnElement.style.borderColor = "var(--accent)"; | |
| setTimeout(() => { | |
| btnElement.innerText = originalText; | |
| btnElement.style.color = ""; | |
| btnElement.style.borderColor = ""; | |
| }, 2000); | |
| }).catch(err => { | |
| console.error('Failed to copy text: ', err); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |