microsoft · mxschmitt · Aug 4, 2025 · Aug 4, 2025
diff --git a/nodejs/docs/api/class-testproject.mdx b/nodejs/docs/api/class-testproject.mdx
@@ -216,7 +216,7 @@ testProject.grep
 
 <font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.10</font><x-search>testProject.grepInvert</x-search>
 
-Filter to only run tests with a title **not** matching one of the patterns. This is the opposite of [testProject.grep](/api/class-testproject.mdx#test-project-grep). Also available globally and in the [command line](../test-cli.mdx) with the `--grep-invert` option.
+Filter to only run tests with a title **not** matching any of the patterns. This is the opposite of [testProject.grep](/api/class-testproject.mdx#test-project-grep). Also available globally and in the [command line](../test-cli.mdx) with the `--grep-invert` option.
 
 `grepInvert` option is also useful for [tagging tests](../test-annotations.mdx#tag-tests).
 

diff --git a/nodejs/docs/getting-started-vscode.mdx b/nodejs/docs/getting-started-vscode.mdx
@@ -26,20 +26,20 @@ Before you begin, make sure you have the following installed:
 ### Installation & Setup
 1.  **Install the Extension**: Open the Extensions view in VS Code (`Ctrl+Shift+X` or `Cmd+Shift+X`) and search for "Playwright". [Install the official extension from Microsoft](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright).
 
-![install playwright extension](../images/getting-started/vscode-extension.png)
+<ProgressiveImage image={require("../images/getting-started/vscode-extension.png")} alt="install playwright extension" />
 1.  **Install Playwright**: Once the extension is installed, open the Command Palette (`Ctrl+Shift+P` or `Cmd+Shift+P`) and run the **Test: Install Playwright** command.
 
-![install playwright](../images/getting-started/install-playwright.png)
+<ProgressiveImage image={require("../images/getting-started/install-playwright.png")} alt="install playwright" />
 
 3.  **Select Browsers**: Choose the browsers you want for your tests (e.g., Chromium, Firefox, WebKit). You can also add a GitHub Actions workflow to run tests in CI. These settings can be changed later in your `playwright.config.ts` file.
 
-![install browsers](../images/getting-started/install-browsers.png)
+<ProgressiveImage image={require("../images/getting-started/install-browsers.png")} alt="install browsers" />
 
 ### Opening the Testing Sidebar
 
 Click the **Testing icon** in the VS Code Activity Bar to open the Test Explorer. Here, you'll find your tests, as well as the Playwright sidebar for managing projects, tools, and settings.
 
-![Testing Sidebar](../images/getting-started/testing-sidebar.png)
+<ProgressiveImage image={require("../images/getting-started/testing-sidebar.png")} alt="Testing Sidebar" />
 
 ## Core Features
 
@@ -48,16 +48,16 @@ Click the **Testing icon** in the VS Code Activity Bar to open the Test Explorer
 <LiteYouTube id="mQmcIBMsc38" title="Running Playwright Tests in VS Code" />
 -   **Run a Single Test**: Click the green "play" icon next to any test to run it. The play button will change to a green checkmark if the test passes or a red X if the test fails. You'll be able to see how long the test took to run displayed next to the test name. Additionally, the Test Results panel will automatically open at the bottom of VS Code, showing a summary of the test execution including how many tests ran, how many passed, failed, or were skipped, along with the total execution time.
 
-![run a single test](../images/getting-started/run-single-test.png)
+<ProgressiveImage image={require("../images/getting-started/run-single-test.png")} alt="run a single test" />
 -   **Run All Tests**: You can run all tests at different levels. Click the play icon next to a specific test file to run all tests within that file, or click the play icon at the very top of the Test Explorer to run all tests across your entire project.
 
-![run all tests](../images/getting-started/run-all-tests.png)
+<ProgressiveImage image={require("../images/getting-started/run-all-tests.png")} alt="run all tests" />
 -   **Run on Multiple Browsers**: In the Playwright sidebar, check the boxes for the projects (browsers) you want to test against. Projects in Playwright represent different browser configurations - each project typically corresponds to a specific browser (like Chromium, Firefox, or WebKit) with its own settings such as viewport size, device emulation, or other browser-specific options. When you run a test, it will execute across all selected projects, allowing you to verify your application works consistently across different browsers and configurations.
 
-![Selecting projects to run tests on](../images/getting-started/select-projects.png)
+<ProgressiveImage image={require("../images/getting-started/select-projects.png")} alt="Selecting projects to run tests on" />
 -   **Show Browser**: To watch your tests execute in a live browser window, enable the **Show Browser** option in the sidebar. Disable it to run in headless mode (where tests run in the background without opening a visible browser window).
 
-![show browsers while running tests](../images/getting-started/show-browser.png)
+<ProgressiveImage image={require("../images/getting-started/show-browser.png")} alt="show browsers while running tests" />
 
 ### Debugging Your Tests
 
@@ -66,16 +66,16 @@ Click the **Testing icon** in the VS Code Activity Bar to open the Test Explorer
 The VS Code extension provides powerful debugging tools to help you identify and fix issues in your tests. You can set breakpoints, inspect variables, view detailed error messages, get AI-powered suggestions to resolve test failures, and use the comprehensive trace viewer to analyze test execution step-by-step.
 -   **Using Breakpoints**: Set a breakpoint by clicking in the gutter next to a line number. Right-click the test and select **Debug Test**. The test will pause at your breakpoint, allowing you to inspect variables and step through the code.
 
-  ![setting debug mode](../images/getting-started/debug-mode.png)
+  <ProgressiveImage image={require("../images/getting-started/debug-mode.png")} alt="setting debug mode" />
 -   **Live Debugging**: With **Show Browsers** enabled, click on a locator in your code. Playwright will highlight the corresponding element in the browser, making it easy to verify locators.
 
-  ![live debugging in vs code](../images/getting-started/live-debugging.png)
+  <ProgressiveImage image={require("../images/getting-started/live-debugging.png")} alt="live debugging in vs code" />
 -   **Viewing Error Messages**: If a test fails, the extension displays detailed error messages, including the expected vs. received values and a full call log, directly in the editor.
 
-![error messaging in vs code](../images/getting-started/error-messaging.png)
+<ProgressiveImage image={require("../images/getting-started/error-messaging.png")} alt="error messaging in vs code" />
 -   **Fix with AI**: When a test fails, click the sparkle icon next to the error to get an AI-powered fix suggestion from Copilot. Copilot analyzes the error and suggests a code change to resolve the issue.
 
-![fix with ai in vs code](../images/getting-started/fix-with-ai.png)
+<ProgressiveImage image={require("../images/getting-started/fix-with-ai.png")} alt="fix with ai in vs code" />
 -   **Debugging with Trace Viewer**: For comprehensive debugging, enable the **Show Trace Viewer** option in the Playwright sidebar. When your test finishes, a detailed trace will automatically open, providing you with a complete timeline of your test execution. The trace viewer is particularly useful for:
   - **Step-by-step analysis**: Navigate through each action your test performed with precise timestamps
   - **DOM inspection**: View DOM snapshots at any point during test execution to see exactly what the page looked like
@@ -86,7 +86,7 @@ The VS Code extension provides powerful debugging tools to help you identify and
 
   The trace viewer is especially valuable when debugging flaky tests or understanding complex user interactions.
 
-![trace viewer debugging](../images/getting-started/trace-viewer-debug.png)
+<ProgressiveImage image={require("../images/getting-started/trace-viewer-debug.png")} alt="trace viewer debugging" />
 
 To learn more, see our [Trace Viewer guide](./trace-viewer.mdx).
 
@@ -97,11 +97,13 @@ CodeGen is Playwright's powerful test generation tool that automatically creates
 <LiteYouTube id="5XIZPqKkdBA" title="Generating Playwright tests in VS Code" />
 -   **Record a New Test**: Click **Record new** in the sidebar. A browser window will open. As you interact with the page, Playwright will automatically generate the test code. You can also generate assertions from the recording toolbar.
 
-![record a new test](../images/getting-started/record-new-test.png)
--   **Record at Cursor**: Place your cursor inside an existing test and click **Record at cursor** to add new actions at that specific point. ![record at cursor](../images/getting-started/record-at-cursor.png)
+<ProgressiveImage image={require("../images/getting-started/record-new-test.png")} alt="record a new test" />
+-   **Record at Cursor**: Place your cursor inside an existing test and click **Record at cursor** to add new actions at that specific point.
+
+<ProgressiveImage image={require("../images/getting-started/record-at-cursor.png")} alt="record at cursor" />
 -   **Pick a Locator**: Use the **Pick locator** tool to click on any element in the opened browser. Playwright will determine the best locator and copy it to your clipboard, ready to be pasted into your code.
 
-![pick locators](../images/getting-started/pick-locator.png)
+<ProgressiveImage image={require("../images/getting-started/pick-locator.png")} alt="pick locators" />
 
 To learn more, see our [CodeGen guide](./codegen.mdx).
 
@@ -111,21 +113,21 @@ To learn more, see our [CodeGen guide](./codegen.mdx).
 
 Use [project dependencies](./test-projects.mdx) to define setup tests that run before other tests. For example, you can create a login test that runs first, then reuse that authenticated state across multiple tests without having to log in again for each test. In VS Code, you can see these setup tests in the Test Explorer and run them independently when needed.
 
-![setup tests in vscode](../images/getting-started/setup-tests.png)
+<ProgressiveImage image={require("../images/getting-started/setup-tests.png")} alt="setup tests in vscode" />
 
 To learn more, see our [Project Dependencies guide](./test-projects.mdx).
 
 ### Global Setup
 
 For tasks that need to run only once before all tests (like seeding a database), use **Global Setup**. You can trigger the global setup and teardown manually from the Playwright sidebar.
 
-![running global setup](../images/getting-started/global-setup.png)
+<ProgressiveImage image={require("../images/getting-started/global-setup.png")} alt="running global setup" />
 
 ### Multiple Configurations
 
 If you have multiple `playwright.config.ts` files, you can switch between them using the gear icon in the Playwright sidebar. This allows you to easily work with different test suites or environments.
 
-![Selecting a configuration file](../images/getting-started/selecting-configuration.png)
+<ProgressiveImage image={require("../images/getting-started/selecting-configuration.png")} alt="Selecting a configuration file" />
 
 ## Quick Reference
 

diff --git a/nodejs/docs/running-tests.mdx b/nodejs/docs/running-tests.mdx
@@ -100,7 +100,7 @@ npx playwright test --last-failed
 
 Tests can be run right from VS Code using the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). Once installed you can simply click the green triangle next to the test you want to run or run all tests from the testing sidebar. Check out our [Getting Started with VS Code](./getting-started-vscode.mdx) guide for more details.
 
-![install playwright extension](../images/getting-started/vscode-extension.png)
+<ProgressiveImage image={require("../images/getting-started/vscode-extension.png")} alt="install playwright extension" />
 
 ## Debugging tests