diff --git a/.gitignore b/.gitignore index 159bfd263..ca71b1884 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ out/ node_modules .vscode-test/ +.vscode-server-data/ *.vsix .DS_Store test-results/ diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 000000000..0c1af7cb0 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,15 @@ +# Playwright VS Code Extension + +## Running the Extension in Browser + +Always verify your code changes by running the extension in a browser using VS Code's `serve-web` command. + +Run `npm run serve-web` to start VS Code with the locally built extension installed. +It prints a URL you can open in a browser. By default, it'll have the examples/todomvc folder pre-opened. +After making changes to the extension, kill the serve-web process and run it again to reload. +If it behaves weirdly, check if ../playwright is on a stable branch. + +Tips for navigating VS Code UI: +- `Ctrl+P` to open files by name +- `Ctrl+Shift+P` to open command palette +- The text editor does not represent well in snapshots, so don't be surprised if you can't see the opened editor's code or see the green triangle in the editor gutter. diff --git a/package.json b/package.json index d6b5a84f1..066b85777 100644 --- a/package.json +++ b/package.json @@ -194,7 +194,8 @@ "code": "code --uninstall-extension ms-playwright.playwright && code --install-extension playwright-*.vsix", "uncode": "code --uninstall-extension ms-playwright.playwright", "code-insiders": "code-insiders --uninstall-extension ms-playwright.playwright && code-insiders --install-extension playwright-*.vsix", - "uncode-insiders": "code-insiders --uninstall-extension ms-playwright.playwright" + "uncode-insiders": "code-insiders --uninstall-extension ms-playwright.playwright", + "serve-web": "./scripts/serve-web.sh" }, "devDependencies": { "@babel/preset-typescript": "^7.23.2", diff --git a/scripts/serve-web.sh b/scripts/serve-web.sh new file mode 100755 index 000000000..c032efa2b --- /dev/null +++ b/scripts/serve-web.sh @@ -0,0 +1,41 @@ +#!/bin/bash +set -e + +SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)" +PROJECT_DIR="$(cd "$SCRIPT_DIR/../" && pwd)" +SERVER_DATA_DIR="$PROJECT_DIR/.vscode-server-data" + +cd "$PROJECT_DIR" + +echo "Building extension..." +rm -f playwright-*.vsix +npm run package + +VSIX_FILE=$(ls -t playwright-*.vsix 2>/dev/null | head -n1) +if [ -z "$VSIX_FILE" ]; then + echo "Error: No .vsix file found" + exit 1 +fi +echo "Found: $VSIX_FILE" + +# Create server data directory +mkdir -p "$SERVER_DATA_DIR" + +# Install extension to custom extensions directory +echo "Installing extension to server data directory..." +code-insiders --extensions-dir "$SERVER_DATA_DIR/extensions" --install-extension "$VSIX_FILE" + +# Start serve-web with the custom data directory +echo "Starting VS Code in browser..." +TODOMVC_DIR="$(cd "$PROJECT_DIR/../playwright/examples/todomvc" 2>/dev/null && pwd)" +if [ -n "$TODOMVC_DIR" ]; then + echo "Open http://localhost:8000?folder=$TODOMVC_DIR in your browser, e.g. using playwright-cli" +else + echo "Open http://localhost:8000 in your browser, e.g. using playwright-cli" +fi +echo "After making changes to the extension, kill this process and run it again to reload." +code-insiders serve-web \ + --port=8000 \ + --server-data-dir "$SERVER_DATA_DIR" \ + --accept-server-license-terms \ + --without-connection-token