Improve Playwright test reliability with helper functions, robust selectors, and build fix

.github/agents/gutenberg-fixer.agent.md

@@ -6,7 +6,7 @@
 
 name: gutenberg-fixer
 description: "Fixes issues in a WordPress Gutenberg block project, following the project's coding standards."
-tools: ["read", "edit", "search", "shell"]
+tools: ['read', 'edit', 'search', 'shell']
 ---
 
 # My Agent
@@ -25,19 +25,22 @@ Before making any changes, carefully analyze the existing code, project structur
 ## Coding Standards
 
 ### CSS
+
 - Use BEM-inspired naming: `package-directory__element--modifier`.
 - Prefix class names with the package name to avoid collisions.
 - Separate styles: `style.scss` (frontend + editor), `editor.scss` (editor-only).
 - Use `is-` prefix for state modifiers (e.g., `is-active`).
 
 ### JavaScript
+
 - Use functional components with hooks.
 - Organize imports: External dependencies, then WordPress dependencies, then internal dependencies.
 - Prefer stable APIs over experimental ones.
 - Use ES6 template strings for concatenation.
 - Use single quotes for strings.
 
 ### PHP
+
 - Follow WordPress VIP coding standards.
 - Use proper namespacing and PSR-4 autoloading.
 - Include comprehensive docblocks.
@@ -50,7 +53,7 @@ Before making any changes, carefully analyze the existing code, project structur
     - `npm run format`: To format the code.
     - `npm run lint:css`: To lint CSS/SCSS files.
     - `npm run lint:php`: To lint PHP files.
-4. **Run the code on Playground**: After fixing and verifying the code, check if the application is running:
+4.  **Run the code on Playground**: After fixing and verifying the code, check if the application is running:
     - `npm run playground:start`
 
 Please always make sure your changes do not introduce any new issues and fully resolve the original problem.

.github/workflows/build-plugin.yml

@@ -12,16 +12,16 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
-          cache: "npm"
+          node-version: 'lts/*'
+          cache: 'npm'
 
       - name: Install dependencies
         run: npm ci
@@ -59,4 +59,3 @@ jobs:
           files: my-scroll-block*.zip
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-

.github/workflows/gemini-dispatch.yml

@@ -25,7 +25,7 @@ defaults:
 jobs:
   debugger:
     if: |-
-     ${{ fromJSON(vars.DEBUG || vars.ACTIONS_STEP_DEBUG || false) }}
+      ${{ fromJSON(vars.DEBUG || vars.ACTIONS_STEP_DEBUG || false) }}
     runs-on: 'ubuntu-latest'
     permissions:
       contents: 'read'

.github/workflows/playwright.yml

@@ -18,8 +18,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
-          cache: "npm"
+          node-version: 'lts/*'
+          cache: 'npm'
 
       - name: Install dependencies
         run: npm ci

AGENTS.md

@@ -83,10 +83,12 @@ The plugin uses **WordPress block filters** to extend core blocks without creati
 ### CSS Classes & Frontend
 
 **Editor classes:**
+
 - `.scroll-anim-block` - Main animation class
 - `.scroll-anim-{type}` - Specific animation type class
 
 **Frontend rendering:**
+
 - Classes are added by PHP filters in `my-scroll-block.php` (handles dynamic blocks)
 - JavaScript filters in `src/index.js` handle saved block markup in post editor
 - CSS scroll timeline rules in `src/style.css` trigger animations
@@ -103,20 +105,21 @@ Tests use **Playwright + TypeScript + WordPress Playground**:
 - **Blueprint** (`blueprint.json`): Contains the initial data to initiate a WordPress Playground instance for testing
 
 To run tests individually:
+
 ```bash
 npx playwright test scroll-block.spec.ts -g "test-name-pattern"
 ```
 
 ## Key Files & Their Roles
 
-| File | Purpose |
-|------|---------|
-| [my-scroll-block.php](my-scroll-block.php) | Plugin entry point; enqueues assets; applies render_block filter for frontend class/attr injection |
-| [src/index.js](src/index.js) | Block filters for editor integration; attribute registration, UI controls, markup manipulation |
-| [src/style.css](src/style.css) | CSS scroll timeline rules for all animation types |
-| [src/editor.css](src/editor.css) | Editor UI styles (animation indicator, editor preview) |
-| [tests/scroll-block.spec.ts](tests/scroll-block.spec.ts) | End-to-end tests for editor and frontend rendering |
-| [tests/global-setup.ts](tests/global-setup.ts) | WordPress Playground startup with plugin mounting |
+| File                                                     | Purpose                                                                                            |
+| -------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| [my-scroll-block.php](my-scroll-block.php)               | Plugin entry point; enqueues assets; applies render_block filter for frontend class/attr injection |
+| [src/index.js](src/index.js)                             | Block filters for editor integration; attribute registration, UI controls, markup manipulation     |
+| [src/style.css](src/style.css)                           | CSS scroll timeline rules for all animation types                                                  |
+| [src/editor.css](src/editor.css)                         | Editor UI styles (animation indicator, editor preview)                                             |
+| [tests/scroll-block.spec.ts](tests/scroll-block.spec.ts) | End-to-end tests for editor and frontend rendering                                                 |
+| [tests/global-setup.ts](tests/global-setup.ts)           | WordPress Playground startup with plugin mounting                                                  |
 
 ## When Making Changes
 
@@ -130,6 +133,7 @@ npx playwright test scroll-block.spec.ts -g "test-name-pattern"
 ### Modifying Block Support
 
 Supported blocks are defined in:
+
 - `SUPPORTED_BLOCKS` constant in [src/index.js](src/index.js)
 - `$supported_blocks` array in [my-scroll-block.php](my-scroll-block.php) (must match)
 
@@ -142,6 +146,7 @@ The animation selector is rendered via `PanelBody` + `SelectControl` components
 ### Testing New Features
 
 Tests run against a real WordPress instance via WordPress Playground. When adding tests:
+
 1. Use TypeScript for type safety (`npm run typecheck` validates)
 2. Ensure WordPress Playground can reach the feature (auto-login, plugin pre-activated)
 3. Use page selectors that work with WordPress's block editor DOM
@@ -210,4 +215,4 @@ This will install and activate the plugin with the changes from this branch.
 - The `installPlugin` step automatically installs and activates the plugin
 - Users can test the changes without needing to set up a local WordPress environment
 - This mirrors the functionality of the GitHub action in `.github/workflows/pr-playground-comment.yml` but uses branches instead of PR refs
-- Important: Use `"refType":"branch"` when referencing branch names, not `"refType":"refname"` (which is used for full refs like `refs/pull/123/head`)
+- Important: Use `"refType":"branch"` when referencing branch names, not `"refType":"refname"` (which is used for full refs like `refs/pull/123/head`)

README.md

@@ -32,34 +32,40 @@ A WordPress plugin that adds scroll-driven animation capabilities to core blocks
 ### For Development
 
 1. Clone the repository:
+
 ```bash
 git clone <repository-url>
 cd my-scroll-block
 ```
 
 2. Install dependencies:
+
 ```bash
 npm install
 ```
 
 3. Build the plugin:
+
 ```bash
 npm run build
 ```
 
 4. Start development mode (with live reload):
+
 ```bash
 npm start
 ```
 
 ### For Production
 
 1. Build the plugin:
+
 ```bash
 npm run build
 ```
 
 2. Create a zip file:
+
 ```bash
 npm run plugin-zip
 ```
@@ -90,16 +96,19 @@ This project uses Playwright with TypeScript for end-to-end testing with WordPre
 ### Setup Tests
 
 1. Install Playwright browsers:
+
 ```bash
 npx playwright install --with-deps chromium
 ```
 
 2. Run tests:
+
 ```bash
 npm test
 ```
 
 3. Check TypeScript types:
+
 ```bash
 npm run typecheck
 ```
@@ -109,6 +118,7 @@ For more details, see [tests/README.md](tests/README.md)
 ### TypeScript Support
 
 Tests are written in TypeScript for:
+
 - ✅ Type safety and error prevention
 - ✅ Better IDE autocomplete
 - ✅ Self-documenting code
@@ -129,6 +139,7 @@ See [TYPESCRIPT_MIGRATION.md](../TYPESCRIPT_MIGRATION.md) for migration details.
 ### On the Frontend
 
 When a block has a scroll animation:
+
 - The plugin adds CSS classes: `scroll-anim-block` and `scroll-anim-{type}`
 - A data attribute `data-scroll-anim="1"` is added
 - CSS scroll timeline rules trigger the animation as you scroll
@@ -156,6 +167,7 @@ my-scroll-block/
 ## Browser Support
 
 This plugin uses modern CSS features including:
+
 - CSS Scroll Timelines
 - View Timeline
 - Animation Timeline
@@ -176,6 +188,7 @@ Contributions are welcome! Please:
 ## Continuous Integration
 
 The project uses GitHub Actions for CI:
+
 - Runs on every push and pull request
 - Tests with Chromium only
 - Uploads test reports on failure
@@ -187,23 +200,25 @@ GPL-2.0-or-later
 ## Credits
 
 Built with:
+
 - [@wordpress/scripts](https://www.npmjs.com/package/@wordpress/scripts)
 - [Playwright](https://playwright.dev/)
 - [WordPress Playground](https://github.com/WordPress/wordpress-playground)
 
 ## Support
 
 For issues and questions:
+
 - Check the [tests/README.md](tests/README.md) for testing documentation
 - Review existing GitHub issues
 - Create a new issue with detailed information
 
 ## Changelog
 
 ### 0.1.0
+
 - Initial release
 - Support for 8 animation types
 - Block editor integration
 - CSS scroll timeline animations
 - Playwright test coverage
-