Recommend “Record at cursor” template workflow

[jcandan]

VS Code recorder generates absolute URLs and default imports — it might be good to recommend a "Record at cursor" template workflow.

Summary

When using the Playwright VS Code extension to “Record new” tests, the generated file:

• hard-codes the full site URL in page.goto('http://…'), ignoring use.baseURL (See [Feature]: Codegen should use baseURL microsoft/playwright#29569).
• imports from @playwright/test only (no @packages/playwright-drupal helpers).

This leads to brittle tests (hostname baked in) and skips helpers like execDrushInTestSite.

Steps to reproduce

1. Configure and install @lullabot/playwright-drupal.
2. In VS Code, Playwright sidebar → Record new.
3. Navigate to your site and save and run the generated test file.

Actual

Generated spec looks like:

import { test, expect } from '@playwright/test'; // wrong import

test('test', async ({ page }) => {
  await page.goto('https://myproject.ddev.site/'); // absolute URL
});

Expected

The generated/recorded test needs to be manually updated to rely on baseURL and import the Drupal helpers, e.g.:

import { test, expect, execDrushInTestSite } from '@packages/playwright-drupal';

test('test', async ({ page }) => {
  await page.goto('/');
});

Proposed Resolution

A README docs addition.

While it does note the need to import its @packages/playwright-drupal helper and the example test shows page.goto('/'), the README should explicitly document this behavior and provide a recommended workflow to keep URLs relative and use the package’s helpers.

Recording tests in VS Code (recommended workflow)

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 template file.

1. Create a test from the following template:

// test/playwright/e2e/template.drupal.spec.ts
import { test, expect, execDrushInTestSite } from '@packages/playwright-drupal';

test('new test', async ({ page }) => {
  await page.goto('/'); // keep relative; recorder will append steps below
  // Place cursor here, then use "Record at cursor"
});

2. In the Playwright 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://…'), delete it and keep the relative /.)

This keeps tests portable across DDEV/CI, leverages use.baseURL, and ensures Lullabot helpers are available.

[deviantintegral]

I don't use VS Code (using the jetbrains suite), so I'm normally using playwright codegen instead. And then once you get a larger testsuite with functions for common scenarios (waiting for ajax, dealing with iframes, etc) the recorder becomes less useful, and IDE autocomplete becomes more helpful.

But! This would be a good addition. Let's do it!