Fix Playwright E2E test security issues and code quality

Address critical security vulnerabilities and code quality issues in
Playwright E2E test infrastructure:

Security Improvements:
- Add test environment guard to eval.rb to prevent RCE in non-test envs
- Bind Rails test server to 127.0.0.1 explicitly to prevent network exposure

Code Quality Fixes:
- Fix undefined logger references in clean.rb and activerecord_fixtures.rb
- Improve error handling in on-rails.js with descriptive error messages
- Remove parameter mutation in appVcrInsertCassette to avoid eslint disables
- Remove dead code from activerecord_fixtures.rb fallback branch
- Fix response.body to response.json() for proper API response parsing
- Remove unused expect import after error handling refactor
- Remove unused eslint-disable directives in Pro package

CI/CD:
- Replace npm with yarn for yalc installation per project guidelines

All changes pass rubocop and eslint with zero violations.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: justin808

.github/workflows/playwright.yml

@@ -23,7 +23,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install yalc globally
-        run: npm install -g yalc
+        run: yarn global add yalc
 
       - name: Install root dependencies
         run: yarn install

packages/react-on-rails-pro/src/ClientSideRenderer.ts

@@ -188,7 +188,6 @@ You should return a React.Component always for the client side entry point.`);
       }
 
       try {
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         unmountComponentAtNode(domNode);
       } catch (e: unknown) {
         const error = e instanceof Error ? e : new Error('Unknown error');

packages/react-on-rails-pro/src/createReactOnRailsPro.ts

@@ -145,13 +145,11 @@ export default function createReactOnRailsPro(
 
   if (reactOnRailsPro.streamServerRenderedReactComponent) {
     reactOnRailsProSpecificFunctions.streamServerRenderedReactComponent =
-      // eslint-disable-next-line @typescript-eslint/unbound-method
       reactOnRailsPro.streamServerRenderedReactComponent;
   }
 
   if (reactOnRailsPro.serverRenderRSCReactComponent) {
     reactOnRailsProSpecificFunctions.serverRenderRSCReactComponent =
-      // eslint-disable-next-line @typescript-eslint/unbound-method
       reactOnRailsPro.serverRenderRSCReactComponent;
   }
 

spec/dummy/e2e/playwright.config.js

@@ -71,7 +71,7 @@ module.exports = defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'RAILS_ENV=test bundle exec rails server -p 5017',
+    command: 'RAILS_ENV=test bundle exec rails server -b 127.0.0.1 -p 5017',
     url: 'http://127.0.0.1:5017',
     reuseExistingServer: !process.env.CI,
     timeout: 120 * 1000,

spec/dummy/e2e/playwright/app_commands/activerecord_fixtures.rb

@@ -2,23 +2,17 @@
 
 # you can delete this file if you don't use Rails Test Fixtures
 
+raise "ActiveRecord is not defined. Unable to load fixtures." unless defined?(ActiveRecord)
+
+require "active_record/fixtures"
+
 fixtures_dir = command_options.try(:[], "fixtures_dir")
 fixture_files = command_options.try(:[], "fixtures")
 
-if defined?(ActiveRecord)
-  require "active_record/fixtures"
-
-  fixtures_dir ||= ActiveRecord::Tasks::DatabaseTasks.fixtures_path
-  fixture_files ||= Dir["#{fixtures_dir}/**/*.yml"].map { |f| f[(fixtures_dir.size + 1)..-5] }
+fixtures_dir ||= ActiveRecord::Tasks::DatabaseTasks.fixtures_path
+fixture_files ||= Dir["#{fixtures_dir}/**/*.yml"].map { |f| f[(fixtures_dir.size + 1)..-5] }
 
-  logger.debug "loading fixtures: { dir: #{fixtures_dir}, files: #{fixture_files} }"
-  ActiveRecord::FixtureSet.reset_cache
-  ActiveRecord::FixtureSet.create_fixtures(fixtures_dir, fixture_files)
-  "Fixtures Done" # this gets returned
-else # this else part can be removed
-  logger.error "Looks like activerecord_fixtures has to be modified to suite your need"
-  Post.create(title: "MyCypressFixtures")
-  Post.create(title: "MyCypressFixtures2")
-  Post.create(title: "MyRailsFixtures")
-  Post.create(title: "MyRailsFixtures2")
-end
+Rails.logger.debug "loading fixtures: { dir: #{fixtures_dir}, files: #{fixture_files} }"
+ActiveRecord::FixtureSet.reset_cache
+ActiveRecord::FixtureSet.create_fixtures(fixtures_dir, fixture_files)
+"Fixtures Done" # this gets returned

spec/dummy/e2e/playwright/app_commands/clean.rb

@@ -5,7 +5,7 @@
   DatabaseCleaner.strategy = :truncation
   DatabaseCleaner.clean
 else
-  logger.warn "add database_cleaner or update cypress/app_commands/clean.rb"
+  Rails.logger.warn "add database_cleaner or update cypress/app_commands/clean.rb"
   Post.delete_all if defined?(Post)
 end
 

spec/dummy/e2e/playwright/app_commands/eval.rb

@@ -1,3 +1,5 @@
 # frozen_string_literal: true
 
+raise "eval command is only available in test environment" unless Rails.env.test?
+
 Kernel.eval(command_options) unless command_options.nil?

spec/dummy/e2e/playwright/support/on-rails.js

@@ -1,4 +1,4 @@
-import { request, expect } from '@playwright/test';
+import { request } from '@playwright/test';
 import config from '../../playwright.config';
 
 const contextPromise = request.newContext({
@@ -9,8 +9,12 @@ const appCommands = async (data) => {
   const context = await contextPromise;
   const response = await context.post('/__e2e__/command', { data });
 
-  expect(response.ok()).toBeTruthy();
-  return response.body;
+  if (!response.ok()) {
+    const text = await response.text();
+    throw new Error(`Rails command '${data.name}' failed: ${response.status()} - ${text}`);
+  }
+
+  return response.json();
 };
 
 const app = (name, options = {}) => appCommands({ name, options }).then((body) => body[0]);
@@ -20,22 +24,32 @@ const appFactories = (options) => app('factory_bot', options);
 
 const appVcrInsertCassette = async (cassetteName, options) => {
   const context = await contextPromise;
-  // eslint-disable-next-line no-param-reassign
-  if (!options) options = {};
-
-  // eslint-disable-next-line no-param-reassign
-  Object.keys(options).forEach((key) => (options[key] === undefined ? delete options[key] : {}));
-  const response = await context.post('/__e2e__/vcr/insert', { data: [cassetteName, options] });
-  expect(response.ok()).toBeTruthy();
-  return response.body;
+  const normalizedOptions = options || {};
+  const cleanedOptions = Object.fromEntries(
+    Object.entries(normalizedOptions).filter(([, value]) => value !== undefined),
+  );
+
+  const response = await context.post('/__e2e__/vcr/insert', { data: [cassetteName, cleanedOptions] });
+
+  if (!response.ok()) {
+    const text = await response.text();
+    throw new Error(`VCR insert cassette '${cassetteName}' failed: ${response.status()} - ${text}`);
+  }
+
+  return response.json();
 };
 
 const appVcrEjectCassette = async () => {
   const context = await contextPromise;
 
   const response = await context.post('/__e2e__/vcr/eject');
-  expect(response.ok()).toBeTruthy();
-  return response.body;
+
+  if (!response.ok()) {
+    const text = await response.text();
+    throw new Error(`VCR eject cassette failed: ${response.status()} - ${text}`);
+  }
+
+  return response.json();
 };
 
 export { appCommands, app, appScenario, appEval, appFactories, appVcrInsertCassette, appVcrEjectCassette };