From 0ca3f2407457a56da01ce090b4784bb1f1ccc9b7 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Tue, 31 Mar 2026 20:42:16 -0700 Subject: [PATCH 1/3] feat(homepage): redesign landing page for testing, CLI, and AI agents --- package-lock.json | 69 +++++-- package.json | 2 +- src/pages/index.tsx | 384 +++++++++++++++++------------------- src/pages/styles.module.css | 88 +++++++-- 4 files changed, 307 insertions(+), 236 deletions(-) diff --git a/package-lock.json b/package-lock.json index 11214ad831e..0dd1c7b0c99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@docusaurus/faster": "^3.8.1", "@docusaurus/module-type-aliases": "3.8.1", "@docusaurus/tsconfig": "3.8.1", - "@playwright/test": "^1.50.1", + "@playwright/test": "^1.59.0", "@types/node": "^22.13.4", "@types/react": "^18.3.5", "@types/react-router-dom": "^5.3.3", @@ -4054,6 +4054,7 @@ "version": "1.9.1", "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz", "integrity": "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==", + "dev": true, "license": "MIT", "optional": true, "peer": true, @@ -4066,6 +4067,7 @@ "version": "1.9.1", "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz", "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==", + "dev": true, "license": "MIT", "optional": true, "peer": true, @@ -4077,6 +4079,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.0.tgz", "integrity": "sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==", + "dev": true, "license": "MIT", "optional": true, "peer": true, @@ -4335,6 +4338,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.2.tgz", "integrity": "sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==", + "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -4395,13 +4399,13 @@ } }, "node_modules/@playwright/test": { - "version": "1.50.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.50.1.tgz", - "integrity": "sha512-Jii3aBg+CEDpgnuDxEp/h7BimHcUTDlpEtce89xEumlJ5ef2hqepZ+PWp1DDpYC/VO9fmWVI1IlEaoI5fK9FXQ==", + "version": "1.59.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.0.tgz", + "integrity": "sha512-TOA5sTLd49rTDaZpYpvCQ9hGefHQq/OYOyCVnGqS2mjMfX+lGZv2iddIJd0I48cfxqSPttS9S3OuLKyylHcO1w==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright": "1.50.1" + "playwright": "1.59.0" }, "bin": { "playwright": "cli.js" @@ -4500,6 +4504,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4513,6 +4518,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4526,6 +4532,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4539,6 +4546,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4552,6 +4560,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4565,6 +4574,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4578,6 +4588,7 @@ "cpu": [ "wasm32" ], + "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -4591,6 +4602,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4604,6 +4616,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4617,6 +4630,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -5009,6 +5023,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5025,6 +5040,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5041,6 +5057,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -5057,6 +5074,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5073,6 +5091,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5089,6 +5108,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5105,6 +5125,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5121,6 +5142,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5137,6 +5159,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5153,6 +5176,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5201,6 +5225,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5217,6 +5242,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5233,6 +5259,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -5249,6 +5276,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5265,6 +5293,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5281,6 +5310,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5297,6 +5327,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5313,6 +5344,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5329,6 +5361,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5345,6 +5378,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "Apache-2.0 AND MIT", "optional": true, "os": [ @@ -5386,6 +5420,7 @@ "version": "0.10.1", "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz", "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==", + "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -11161,6 +11196,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MPL-2.0", "optional": true, "os": [ @@ -11181,6 +11217,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MPL-2.0", "optional": true, "os": [ @@ -11201,6 +11238,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MPL-2.0", "optional": true, "os": [ @@ -11221,6 +11259,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MPL-2.0", "optional": true, "os": [ @@ -11241,6 +11280,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MPL-2.0", "optional": true, "os": [ @@ -11261,6 +11301,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MPL-2.0", "optional": true, "os": [ @@ -11281,6 +11322,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MPL-2.0", "optional": true, "os": [ @@ -11301,6 +11343,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MPL-2.0", "optional": true, "os": [ @@ -11321,6 +11364,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MPL-2.0", "optional": true, "os": [ @@ -11341,6 +11385,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MPL-2.0", "optional": true, "os": [ @@ -14672,13 +14717,13 @@ } }, "node_modules/playwright": { - "version": "1.50.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.50.1.tgz", - "integrity": "sha512-G8rwsOQJ63XG6BbKj2w5rHeavFjy5zynBA9zsJMMtBoe/Uf757oG12NXz6e6OirF7RCrTVAKFXbLmn1RbL7Qaw==", + "version": "1.59.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.0.tgz", + "integrity": "sha512-wihGScriusvATUxmhfENxg0tj1vHEFeIwxlnPFKQTOQVd7aG08mUfvvniRP/PtQOC+2Bs52kBOC/Up1jTXeIbw==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.50.1" + "playwright-core": "1.59.0" }, "bin": { "playwright": "cli.js" @@ -14691,9 +14736,9 @@ } }, "node_modules/playwright-core": { - "version": "1.50.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.50.1.tgz", - "integrity": "sha512-ra9fsNWayuYumt+NiM069M6OkcRb1FZSK8bgi66AtpFoWkg2+y0bJSNmkFrWhMbEBbVKC/EruAHH3g0zmtwGmQ==", + "version": "1.59.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.0.tgz", + "integrity": "sha512-PW/X/IoZ6BMUUy8rpwHEZ8Kc0IiLIkgKYGNFaMs5KmQhcfLILNx9yCQD0rnWeWfz1PNeqcFP1BsihQhDOBCwZw==", "dev": true, "license": "Apache-2.0", "bin": { diff --git a/package.json b/package.json index 224ca8dc28b..ebcb7a9894f 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "@docusaurus/faster": "^3.8.1", "@docusaurus/module-type-aliases": "3.8.1", "@docusaurus/tsconfig": "3.8.1", - "@playwright/test": "^1.50.1", + "@playwright/test": "^1.59.0", "@types/node": "^22.13.4", "@types/react": "^18.3.5", "@types/react-router-dom": "^5.3.3", diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3d714ba4930..e57544f121b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,209 +3,79 @@ import clsx from "clsx"; import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; -import useBaseUrl from "@docusaurus/useBaseUrl"; import GitHubStarButton from '../components/GitHubStarButton'; import styles from "./styles.module.css"; -const features = [ - { - title: "Any browser \u2022 Any platform \u2022 One API", - description: <> -

- Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. -

-

- Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed. -

-

- Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java. -

-

- Test Mobile Web. Native mobile emulation of Google Chrome for Android and Mobile Safari. The same rendering engine works on your Desktop and in the Cloud. -

- , - }, - { - }, - { - }, - { - title: "Resilient \u2022 No flaky tests", - description: ( - <> -

- Auto-wait. Playwright waits for elements to be actionable prior to performing - actions. It also has a rich set of introspection events. The combination of the two - eliminates the need for artificial timeouts - the primary cause of flaky tests. -

-

- Web-first assertions. Playwright assertions are created specifically for the - dynamic web. Checks are automatically retried until the necessary conditions are met. -

-

- Tracing. Configure test retry strategy, capture execution trace, videos, screenshots - to eliminate flakes. -

- - ), - }, - { - title: "No trade-offs \u2022 No limits", - description: ( - <> -

- Browsers run web content belonging to different origins in different processes. - Playwright is aligned with the modern browsers architecture and runs tests out-of-process. - This makes Playwright free of the typical in-process test runner limitations. -

-

- Multiple everything. Test scenarios that span multiple tabs, multiple origins and multiple users. - Create scenarios with different contexts for different users and run them against your server, all in one test. -

-

- Trusted events. Hover elements, interact with dynamic controls, produce trusted events. - Playwright uses real browser input pipeline indistinguishable from the real user. -

-

- Test frames, pierce Shadow DOM. Playwright selectors pierce shadow DOM and - allow entering frames seamlessly. -

- - ), - }, - { - }, +type PathCardProps = { + title: string; + description: string; + install: string; + href: string; + linkText: string; +}; + +const PathCard: React.FC = ({ title, description, install, href, linkText }) => ( +
+

{title}

+

{description}

+ {install} +
+ {linkText} +
+
+); + +type FeatureSectionProps = { + title: string; + children: React.ReactNode; + reversed?: boolean; +}; + +const FeatureSection: React.FC = ({ title, children, reversed }) => ( +
+
+

{title}

+
+ {children} +
+
+
+); + +const paths: PathCardProps[] = [ { + title: "Playwright Test", + description: "Full-featured test runner with auto-waiting, assertions, tracing, and parallelism across Chromium, Firefox, and WebKit.", + install: "npm init playwright@latest", + href: "docs/intro", + linkText: "Testing documentation", }, { - title: "Full isolation \u2022 Fast execution", - description: ( - <> -

- Browser contexts. Playwright creates a browser context for each test. Browser - context is equivalent to a brand new browser profile. This delivers full test isolation - with zero overhead. Creating a new browser context only takes a handful of milliseconds. -

-

- Log in once. Save the authentication state of the context and reuse it in all the tests. - This bypasses repetitive log-in operations in each test, yet delivers full isolation of independent tests. -

- - ), + title: "Playwright CLI", + description: "Token-efficient browser automation for coding agents like Claude Code and GitHub Copilot. Skill-based workflows without large context overhead.", + install: "npm i -g @playwright/cli@latest", + href: "https://github.com/microsoft/playwright-cli", + linkText: "CLI documentation", }, { - title: "Powerful Tooling", - description: ( - <> -

- Codegen. Generate tests by recording your actions. Save them into any language. -

-

- Playwright inspector. Inspect page, generate selectors, step through the test execution, see click points, explore execution logs. -

-

- Trace Viewer. Capture all the information to investigate the test failure. Playwright trace - contains test execution screencast, live DOM snapshots, action explorer, test source, and many more. -

- - ), + title: "Playwright MCP", + description: "Model Context Protocol server that gives AI agents full browser control through structured accessibility snapshots.", + install: "npx @playwright/mcp@latest", + href: "https://github.com/microsoft/playwright-mcp", + linkText: "MCP documentation", }, ]; -type FeatureProps = { - imageUrl?: string - title?: string - description?: React.ReactElement -} - -const Feature: React.FC = ({ imageUrl, title, description }) => { - const imgUrl = useBaseUrl(imageUrl); - return ( -
- {imgUrl && ( -
- {title} -
- )} -

{title}

-
{description}
-
- ); -} - -type FeatureRowProps = { - title: string - description: string - videoUrl: string - isImageLeft: boolean -} - -const FeatureRow: React.FC = ({ title, description, videoUrl, isImageLeft }) => { - const textColumn = ( -
-

{title}

-

{description}

-
- ); - const imageColumn = ( -
- -
- ); - return ( -
-
-
- {imageColumn} - {textColumn} -
-
-
- ); -} - const logos = [ { imageUrl: "img/logos/VSCode.png", href: "https://code.visualstudio.com", alt: "VS Code" }, { imageUrl: "img/logos/Bing.png", href: "https://bing.com", alt: "Bing" }, { imageUrl: "img/logos/Outlook.png", href: "https://outlook.com", alt: "Outlook" }, { imageUrl: "img/logos/DHotstar.jpg", href: "https://www.hotstar.com/", alt: "Disney+ Hotstar" }, - { - imageUrl: "img/logos/MUI.png", - href: "https://github.com/mui-org/material-ui", - alt: "Material UI", - }, + { imageUrl: "img/logos/MUI.png", href: "https://github.com/mui-org/material-ui", alt: "Material UI" }, { imageUrl: "img/logos/ING.png", href: "https://github.com/ing-bank/lion", alt: "ING" }, - { - imageUrl: "img/logos/Adobe2.png", - href: "https://github.com/adobe/spectrum-web-components", - alt: "Adobe", - }, - { - imageUrl: "img/logos/ReactNavigation.png", - href: "https://github.com/react-navigation/react-navigation", - alt: "React Navigation", - }, - { - imageUrl: "img/logos/accessibilityinsights.png", - href: "https://accessibilityinsights.io/", - alt: "Accessibility Insights", - }, + { imageUrl: "img/logos/Adobe2.png", href: "https://github.com/adobe/spectrum-web-components", alt: "Adobe" }, + { imageUrl: "img/logos/ReactNavigation.png", href: "https://github.com/react-navigation/react-navigation", alt: "React Navigation" }, + { imageUrl: "img/logos/accessibilityinsights.png", href: "https://accessibilityinsights.io/", alt: "Accessibility Insights" }, ]; const Home: React.FC = () => { @@ -214,42 +84,150 @@ const Home: React.FC = () => { return ( + {/* Hero */}

- Playwright enables - reliable end-to-end testing for modern web apps. + Playwright enables reliable + web automation for testing, scripting, and AI agents.

+

+ One API to drive Chromium, Firefox, and WebKit — in your tests, your scripts, and your agent workflows. +

- + Get started - +
-

+
-

-

-
- Browsers (Chromium, Firefox, WebKit) -
-
+ {/* Path cards */} +
- {features.map((props, idx) => ( - + {paths.map((props, idx) => ( + ))}
+ {/* Testing features */} + +
+
+

Auto-wait and web-first assertions

+

+ Playwright waits for elements to be actionable before performing actions. + Assertions automatically retry until conditions are met. No artificial timeouts, + no flaky tests. +

+

Test isolation

+

+ Each test gets a fresh browser context — equivalent to a brand new browser profile. + Full isolation with near-zero overhead. Save authentication state once and reuse it + across tests. +

+
+
+

Resilient locators

+

+ Find elements with selectors that mirror how users see the page:{' '} + getByRole, getByLabel, getByPlaceholder,{' '} + getByTestId. No brittle CSS paths. +

+

Parallelism and sharding

+

+ Tests run in parallel by default across all configured browsers. + Shard across multiple machines for faster CI. Full cross-browser coverage + on every commit. +

+
+
+ + + {/* Agent features */} + +
+
+

Accessibility snapshots, not screenshots

+

+ Agents interact with pages through structured accessibility trees — element roles, + names, and refs. Deterministic and unambiguous, no vision models required. +

+

MCP server

+

+ Drop-in Model Context Protocol server + for VS Code, Cursor, Claude Desktop, Windsurf, and any MCP client. Full browser + control through standard tool calls. +

+
+
+

CLI for coding agents

+

+ Token-efficient command-line interface with installable skills. Purpose-built + for Claude Code, GitHub Copilot, and similar coding agents that need to balance + browser automation with large codebases. +

+

Session monitoring

+

+ Visual dashboard with live screencast previews of all running browser sessions. + Click any session to zoom in and take remote control. +

+
+
+ + + {/* Tooling */} + +
+
+

Test generator

+

+ Record your actions in the browser and Playwright writes the test code. + Generate assertions from the recording toolbar. Pick locators by clicking + on elements. +

+
+
+

Trace Viewer

+

+ Full timeline of test execution with DOM snapshots, network requests, + console logs, and screenshots at every step. Investigate failures + without re-running. +

+
+
+

VS Code extension

+

+ Run, debug, and generate tests directly in the editor. + Set breakpoints, live-inspect locators in the browser, and view + full execution traces in the sidebar. +

+
+
+ + + {/* Cross-browser */} +
+
+ Chromium, Firefox, WebKit +

+ Any browser. Any platform. Chromium, Firefox, and WebKit on Linux, macOS, and Windows. + Headless and headed. Also available for{' '} + Python,{' '} + .NET, and{' '} + Java. +

+
+
+ + {/* Logos */}
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css index 06d1c432e87..40a3029a8c7 100644 --- a/src/pages/styles.module.css +++ b/src/pages/styles.module.css @@ -16,6 +16,12 @@ .heroTitle { font-size: 60px; } +.heroSubtitle { + font-size: 20px; + opacity: 0.85; + max-width: 700px; + margin: 0.5rem 0 1.5rem; +} .highlight { color: #45ba4b; } @@ -27,6 +33,9 @@ .heroTitle { font-size: 36px; } + .heroSubtitle { + font-size: 16px; + } } .buttons { @@ -55,35 +64,74 @@ color: #2b3137; } -.features { - display: flex; - align-items: center; - padding: 4rem 0; - width: 100%; +/* Path cards */ +.pathCards { + padding: 3rem 0; } -.featureImage { - height: 200px; - width: 200px; +.pathCard { + margin-bottom: 2rem; } - -.featureRow { - align-items: center; - padding: 5rem 0; +.pathCard h3 { + margin-bottom: 0.5rem; +} +.pathCard p { + color: var(--ifm-color-emphasis-700); + min-height: 4.5em; +} +.installCode { + display: block; + padding: 8px 12px; + border-radius: 6px; + font-size: 14px; + margin-bottom: 1rem; +} +.pathCardLink { + margin-top: 0.5rem; } -.featureRow video { - filter: grayscale(20%); - max-width: 100%; +.pathCardLink a { + font-weight: 600; } -.featureRowAlt { - flex-direction: row-reverse; + +/* Feature sections */ +.featureSection { + padding: 3rem 0; } -.featureContainerAlt { - background: #ecf3fa; +.featureSectionAlt { + background: #f8fbfe; } -html[data-theme='dark'] .featureContainerAlt { +html[data-theme='dark'] .featureSectionAlt { background: #1e2124; } +.featureSectionTitle { + text-align: center; + margin-bottom: 2rem; + font-size: 28px; +} +.featureSectionContent h4 { + margin-bottom: 0.25rem; +} +.featureSectionContent p { + color: var(--ifm-color-emphasis-700); +} +.featureSectionContent p a { + text-decoration: underline; +} + +/* Cross-browser */ +.crossBrowser { + padding: 3rem 0; +} +.crossBrowserText { + max-width: 600px; + margin: 1rem auto 0; + font-size: 16px; + color: var(--ifm-color-emphasis-700); +} +.crossBrowserText a { + text-decoration: underline; +} +/* Logos */ .logosSection { background: #f8fbfe; } From c89a9c31c3868e44b7cf7b6415f8bb843a585b95 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Wed, 1 Apr 2026 10:57:24 -0700 Subject: [PATCH 2/3] fix(homepage): address PR review feedback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Use non-breaking space in "AI agents" to prevent awkward line wrap - Alternate feature section backgrounds for visual separation - "take remote control" → "take control" - Add language links (TypeScript, Python, .NET, Java) to hero subtitle - Add flexbox to path cards for consistent alignment --- src/pages/index.tsx | 13 +++++++++---- src/pages/styles.module.css | 7 +++++++ 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e57544f121b..d655ee912f6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -91,10 +91,15 @@ const Home: React.FC = () => {

Playwright enables reliable - web automation for testing, scripting, and AI agents. + web automation for testing, scripting, and AI agents.

One API to drive Chromium, Firefox, and WebKit — in your tests, your scripts, and your agent workflows. + Available for{' '} + TypeScript,{' '} + Python,{' '} + .NET, and{' '} + Java.

@@ -118,7 +123,7 @@ const Home: React.FC = () => {
{/* Testing features */} - +

Auto-wait and web-first assertions

@@ -152,7 +157,7 @@ const Home: React.FC = () => { {/* Agent features */} - +

Accessibility snapshots, not screenshots

@@ -177,7 +182,7 @@ const Home: React.FC = () => {

Session monitoring

Visual dashboard with live screencast previews of all running browser sessions. - Click any session to zoom in and take remote control. + Click any session to zoom in and take control.

diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css index 40a3029a8c7..61f9fd1f75a 100644 --- a/src/pages/styles.module.css +++ b/src/pages/styles.module.css @@ -22,6 +22,10 @@ max-width: 700px; margin: 0.5rem 0 1.5rem; } +.heroSubtitle a { + color: #fff; + text-decoration: underline; +} .highlight { color: #45ba4b; } @@ -70,6 +74,8 @@ } .pathCard { margin-bottom: 2rem; + display: flex; + flex-direction: column; } .pathCard h3 { margin-bottom: 0.5rem; @@ -77,6 +83,7 @@ .pathCard p { color: var(--ifm-color-emphasis-700); min-height: 4.5em; + flex-grow: 1; } .installCode { display: block; From 8283ec595d8e4b85096c266033fac114d3a389a2 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Wed, 1 Apr 2026 11:24:37 -0700 Subject: [PATCH 3/3] chore: bump Docker container to match Playwright 1.59.0 --- .github/workflows/tests.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index a3184703e19..ade4df17c3e 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -17,7 +17,7 @@ jobs: name: Playwright runs-on: ubuntu-latest container: - image: mcr.microsoft.com/playwright:v1.50.1-noble + image: mcr.microsoft.com/playwright:v1.59.0-noble options: --user 1001 steps: - uses: actions/checkout@v4