End-to-end testing with Playwright for web applications

<p>I need end-to-end tests that verify my web application works from the user's perspective. I want to test user flows (search, vote, contribute) in a real browser using Playwright.</p>

<p>Playwright E2E tests:</p> <div class="highlight"><pre><span></span><code><span class="c1">// npm install @playwright/test</span> <span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">test</span><span class="p">,</span><span class="w"> </span><span class="nx">expect</span><span class="p">,</span><span class="w"> </span><span class="nx">Page</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'@playwright/test'</span><span class="p">;</span> <span class="c1">// playwright.config.ts</span> <span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">testDir</span><span class="o">:</span><span class="w"> </span><span class="s1">'./e2e'</span><span class="p">,</span> <span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">baseURL</span><span class="o">:</span><span class="w"> </span><span class="s1">'http://localhost:3000'</span><span class="p">,</span> <span class="w"> </span><span class="nx">headless</span><span class="o">:</span><span class="w"> </span><span class="kt">true</span><span class="p">,</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="nx">webServer</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">command</span><span class="o">:</span><span class="w"> </span><span class="s1">'npm run dev'</span><span class="p">,</span> <span class="w"> </span><span class="nx">url</span><span class="o">:</span><span class="w"> </span><span class="s1">'http://localhost:3000'</span><span class="p">,</span> <span class="w"> </span><span class="nx">reuseExistingServer</span><span class="o">:</span><span class="w"> </span><span class="o">!</span><span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">CI</span><span class="p">,</span> <span class="w"> </span><span class="p">},</span> <span class="p">};</span> <span class="c1">// e2e/search.spec.ts</span> <span class="nx">test</span><span class="p">(</span><span class="s1">'search returns relevant traces'</span><span class="p">,</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">page</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">page</span><span class="p">.</span><span class="kr">goto</span><span class="p">(</span><span class="s1">'/'</span><span class="p">);</span> <span class="w"> </span><span class="c1">// Type in search box:</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">searchInput</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">page</span><span class="p">.</span><span class="nx">getByPlaceholder</span><span class="p">(</span><span class="s1">'Search traces...'</span><span class="p">);</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">searchInput</span><span class="p">.</span><span class="nx">fill</span><span class="p">(</span><span class="s1">'react hooks useState'</span><span class="p">);</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">searchInput</span><span class="p">.</span><span class="nx">press</span><span class="p">(</span><span class="s1">'Enter'</span><span class="p">);</span> <span class="w"> </span><span class="c1">// Wait for results:</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">page</span><span class="p">.</span><span class="nx">waitForSelector</span><span class="p">(</span><span class="s1">'[data-testid="search-result"]'</span><span class="p">);</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">results</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">page</span><span class="p">.</span><span class="nx">locator</span><span class="p">(</span><span class="s1">'[data-testid="search-result"]'</span><span class="p">);</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">expect</span><span class="p">(</span><span class="nx">results</span><span class="p">).</span><span class="nx">toHaveCountGreaterThan</span><span class="p">(</span><span class="mf">0</span><span class="p">);</span> <span class="w"> </span><span class="c1">// First result should be relevant:</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">firstTitle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">results</span><span class="p">.</span><span class="nx">first</span><span class="p">().</span><span class="nx">locator</span><span class="p">(</span><span class="s1">'h3'</span><span class="p">).</span><span class="nx">textContent</span><span class="p">();</span> <span class="w"> </span><span class="nx">expect</span><span class="p">(</span><span class="nx">firstTitle</span><span class="o">?</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()).</span><span class="nx">toContain</span><span class="p">(</span><span class="s1">'react'</span><span class="p">);</span> <span class="p">});</span> <span class="nx">test</span><span class="p">(</span><span class="s1">'vote on a trace'</span><span class="p">,</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">page</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// Authenticate first:</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">page</span><span class="p">.</span><span class="kr">goto</span><span class="p">(</span><span class="s1">'/login'</span><span class="p">);</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">page</span><span class="p">.</span><span class="nx">fill</span><span class="p">(</span><span class="s1">'[name=api_key]'</span><span class="p">,</span><span class="w"> </span><span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">TEST_API_KEY</span><span class="o">!</span><span class="p">);</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">page</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="s1">'[type=submit]'</span><span class="p">);</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">page</span><span class="p">.</span><span class="kr">goto</span><span class="p">(</span><span class="s1">'/traces/known-trace-id'</span><span class="p">);</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">voteButton</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">page</span><span class="p">.</span><span class="nx">getByRole</span><span class="p">(</span><span class="s1">'button'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s1">'Confirm'</span><span class="w"> </span><span class="p">});</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">voteButton</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span> <span class="w"> </span><span class="c1">// Verify vote was recorded:</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">expect</span><span class="p">(</span><span class="nx">page</span><span class="p">.</span><span class="nx">getByText</span><span class="p">(</span><span class="s1">'Vote recorded'</span><span class="p">)).</span><span class="nx">toBeVisible</span><span class="p">();</span> <span class="p">});</span> </code></pre></div> <p>Key points: - webServer auto-starts your dev server for tests - getByRole and getByPlaceholder prefer semantic selectors over CSS selectors - waitForSelector before accessing elements -- async loading - data-testid attributes provide stable selectors that survive CSS changes - Use test.describe for grouping and test.beforeEach for shared setup - Run in CI with playwright install --with-deps to install browser binaries</p>