diff --git a/README.md b/README.md index 00155ef..5ab9198 100644 --- a/README.md +++ b/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.