docs: recommend record-at-cursor workflow

README.md

@@ -252,6 +252,32 @@ This will trigger the setup and teardown of the separate Drupal site.
 
 If you have a test that you don't want to run this way, import test and expect from `@playwright/test` as normal.
 
+### Recording tests in VS Code
+
+The VS Code “Record new” command generates absolute URLs and default imports. To keep URLs relative and use `@lullabot/playwright-drupal` helpers, record **at cursor** into a test file.
+
+1. Create a test from the following template:
+
+   ```ts
+   // test/playwright/e2e/test1.spec.ts
+   import { test, expect, execDrushInTestSite } from '@packages/playwright-drupal';
+
+   // 1. Update the test name.
+   test('new test', async ({ page }) => {
+     // 2. Keep paths relative; "Record new" would supply the absolute URL.
+     await page.goto('/');
+     // 3. Place cursor here, then use "Record at cursor"
+   });
+   ```
+
+2. In the VS Code Testing sidebar, under Playwright:
+
+   * Scroll to and toggle the correct configs (gear icon) pointing to your project's `test/playwright/playwright.config.ts`.
+   * Use **Record at cursor** to append steps into the template.
+     (If the recorder adds an extra absolute `page.goto('http://…')`, change it to keep them relative `/`.)
+
+This keeps tests portable across DDEV/CI, leverages `use.baseURL`, and ensures Lullabot helpers are available.
+
 ## Visual Comparisons (Diffs)
 
 Playwright Visual Comparisons are a great way to add additional assertions to your tests. Since visual comparisons are integrated into the testing system, developers can compare all aspects of a site - including content forms or other authenticated content.