cypress-on-rails 1.16.0 → 1.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2dc7073afd439183f15dbe8e33fd275ec4ec4121c2640e026ed5d7f80bc2736c
-  data.tar.gz: 2361d555bab1bae7072d8909275669a139b9c2ee255f5f8195660189208591fa
+  metadata.gz: 7fc65785a8f2d8eb2d7197abd2beac221b90c045f05ec126ee1ab96b2ee80f6c
+  data.tar.gz: dff5e1727f058aa6afc16ee9ca2c61c2f72039a9a0e2e00da4c95be38d6fd4a4
 SHA512:
-  metadata.gz: 717a48f1352f07b052683ba0699d2806191aed7ebc249e6c0f319af8f2e47d3eb0062787fa6d847ce326afe66325c59859806c9f93f3f95a8276e6aec85d580f
-  data.tar.gz: abee0f60bec8a8eca395b6a621c33c0caa731452f5e253d27b80c967cd7138a992cb29c68fa41bafcddc85a3f02e6767f6a3f5bcf77ffbaad543264c31d5630a
+  metadata.gz: c8cefbd4f704c001587c4a2321d5178a7f49e224039739079406b8666922571204d0bc6cb1f2dba9c7044d8932df5baf7c5c8c128afd349d3614dfa5a959b7ea
+  data.tar.gz: 5410e0101bc5bebf3acf5abecf3ee650a6dcb0fb328e700c87f3bd7f72a01b8f9ac47c67c322cf2f28205840f02ba331c2f6b5f7d03c8611d7a35c009e292826

data/.github/workflows/ruby.yml

@@ -7,57 +7,57 @@ on:
     branches: [ master ]
 
 jobs:
-  rails_3_2:
+  rails_6_1:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Set up Ruby
       uses: ruby/setup-ruby@v1
       with:
-        ruby-version: 2.3
+        ruby-version: 2.7.6
         bundler-cache: true
     - name: Run tests
       run: bundle exec rake
-    - run: gem uninstall -v '>= 2' -ax bundler || true
-    - run: gem install bundler -v '< 2'
     - name: Run interaction tests
-      run: ./specs_e2e/rails_3_2/test.sh
+      run: ./specs_e2e/rails_6_1/test.sh
       env:
         CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
 
-  rails_4_2:
+  rails_7_2:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Set up Ruby
       uses: ruby/setup-ruby@v1
       with:
-        ruby-version: 2.5
+        ruby-version: 3.1.3
         bundler-cache: true
     - name: Run tests
       run: bundle exec rake
     - run: gem uninstall -v '>= 2' -ax bundler || true
     - run: gem install bundler -v '< 2'
     - name: Run interaction tests
-      run: ./specs_e2e/rails_4_2/test.sh
+      run: ./specs_e2e/rails_7_2/test.sh
       env:
         CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
 
-  rails_5_2:
+  rails_8:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Set up Ruby
       uses: ruby/setup-ruby@v1
       with:
-        ruby-version: 2.6
+        ruby-version: 3.2.2
         bundler-cache: true
     - name: Run tests
       run: bundle exec rake
+    - run: gem uninstall -v '>= 2' -ax bundler || true
+    - run: gem install bundler -v '< 2'
     - name: Run interaction tests
-      run: ./specs_e2e/rails_5_2/test.sh
+      run: ./specs_e2e/rails_8/test.sh
       env:
         CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

data/.gitignore

@@ -9,4 +9,5 @@ vendor/bundle
 .vscode
 node_modules
 package-lock.json
-yarn.lock
+yarn.lock
+specs_e2e/server.pid

data/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [1.17.0]
+[Compare]: https://github.com/shakacode/cypress-on-rails/compare/v1.16.0...v1.17.0
+
+### Changed
+* Removed the update generator and reduced options for install generator [PR 149](https://github.com/shakacode/cypress-on-rails/pull/149)
+
+### Fixed
+* fix update index.js in install generator [PR 147](https://github.com/shakacode/cypress-on-rails/pull/147) by [Judahmeek]
+* Support rails 7.1 by adding content-type header to generated on-rails.js file [PR 148](https://github.com/shakacode/cypress-on-rails/pull/148) by [anark]
+* Rewind body before reading it [PR 150](https://github.com/shakacode/cypress-on-rails/pull/150) 
+
 ## [1.16.0]
 [Compare]: https://github.com/shakacode/cypress-on-rails/compare/v1.15.1...v1.16.0
 

data/README.md

@@ -1,4 +1,4 @@
-# CypressOnRails
+# Cypress and Playwright on Rails
 
 ![Build Status](https://github.com/shakacode/cypress-on-rails/actions/workflows/ruby.yml/badge.svg)
 [![cypress-on-rails](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/2b6cjr/master&style=plastic&logo=cypress)](https://dashboard.cypress.io/projects/2b6cjr/runs)
@@ -6,33 +6,56 @@
 
 ----
 
-This project is sponsored by the software consulting firm [ShakaCode](https://www.shakacode.com), creator of the [React on Rails Gem](https://github.com/shakacode/react_on_rails). We focus on React (with TS or ReScript) front-ends, often with Ruby on Rails or Gatsby. See [our recent work](https://www.shakacode.com/recent-work) and [client engagement model](https://www.shakacode.com/blog/client-engagement-model/). Feel free to engage in discussions around this gem at our [Slack Channel](https://join.slack.com/t/reactrails/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE) or our [forum category for Cypress](https://forum.shakacode.com/c/cypress-on-rails/55).
+This project is sponsored by the software consulting firm [ShakaCode](https://www.shakacode.com), creator of the [React on Rails Gem](https://github.com/shakacode/react_on_rails). 
 
-Interested in joining a small team that loves open source? Check our [careers page](https://www.shakacode.com/career/).
+### ShakaCode Support
 
-Need help with cypress-on-rails? Contact [ShakaCode](mailto:justin@shakacode.com).
+[ShakaCode](https://www.shakacode.com) focuses on helping Ruby on Rails teams use React and Webpack better. We can upgrade your project and improve your development and customer experiences, allowing you to focus on building new features or fixing bugs instead. 
+
+For an overview of working with us, see our [Client Engagement Model](https://www.shakacode.com/blog/client-engagement-model/) article and [how we bill for time](https://www.shakacode.com/blog/shortcut-jira-trello-github-toggl-time-and-task-tracking/).
+
+We also specialize in helping development teams lower infrastructure and CI costs. Check out our project [Control Plane Flow](https://github.com/shakacode/control-plane-flow/), which can allow you to get the ease of Heroku with the power of Kubernetes and big cost savings.
+
+If you think ShakaCode can help your project, [click here](https://meetings.hubspot.com/justingordon/30-minute-consultation) to book a call with [Justin Gordon](mailto:justin@shakacode.com), the creator of React on Rails and Shakapacker.
+
+Here's a testimonial of how ShakaCode can help from [Florian Gößler](https://github.com/FGoessler) of [Blinkist](https://www.blinkist.com/), January 2, 2023:
+> Hey Justin 👋
+>
+> I just wanted to let you know that we today shipped the webpacker to shakapacker upgrades and it all seems to be running smoothly! Thanks again for all your support and your teams work! 😍
+>
+> On top of your work, it was now also very easy for me to upgrade Tailwind and include our external node_module based web component library which we were using for our other (more modern) apps already. That work is going to be shipped later this week though as we are polishing the last bits of it. 😉
+>
+> Have a great 2023 and maybe we get to work together again later in the year! 🙌
+
+Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=date_DESC#review-2118154).
+
+---
+
+Feel free to engage in discussions around this gem at our [Slack Channel](https://join.slack.com/t/reactrails/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE) or our [forum category for Cypress](https://forum.shakacode.com/c/cypress-on-rails/55).
+
+Need help with cypress-on-rails? Contact [Justin Gordon](mailto:justin@shakacode.com).
 
 ----
 
-# Totally new to Cypress?
-Suggest you first learn the basics of Cypress before attempting to integrate with Ruby on Rails
+# New to Cypress?
+Consider first learning the basics of Cypress before attempting to integrate with Ruby on Rails.
 
 * [Good start Here](https://docs.cypress.io/examples/tutorials.html#Best-Practices)
 
 # Totally new to Playwright?
-Suggest you first learn the basics of Playwright before attempting to integrate with Ruby on Rails
+Consider first learning the basics of Playwright before attempting to integrate with Ruby on Rails.
 
 * [Good start Here](https://playwright.dev/docs/writing-tests)
 
 ## Overview
 
-Gem for using [cypress.io](http://github.com/cypress-io/) or [playwright.dev](https://playwright.dev/) in Rails and Ruby Rack applications with the goal of controlling state as mentioned in [Cypress Best Practices](https://docs.cypress.io/guides/references/best-practices.html#Organizing-Tests-Logging-In-Controlling-State)
+Gem for using [cypress.io](http://github.com/cypress-io/) or [playwright.dev](https://playwright.dev/) in Rails and Ruby Rack applications to control state as mentioned in [Cypress Best Practices](https://docs.cypress.io/guides/references/best-practices.html#Organizing-Tests-Logging-In-Controlling-State). 
 
-It allows you to run code in the application context when executing cypress or playwright tests.
+It allows you to run code in the context of the application when executing Cypress or Playwright tests.
 Do things like:
 * use database_cleaner before each test
 * seed the database with default data for each test
-* use factory_bot to setup data
+* use factory_bot to set up data
 * create scenario files used for specific tests
 
 Has examples of setting up state with:
@@ -61,48 +84,46 @@ Generate the boilerplate code using:
 # by default installs only cypress
 bin/rails g cypress_on_rails:install
 
-# if you have/want a different cypress folder (default is cypress)
-bin/rails g cypress_on_rails:install --cypress_folder=spec/cypress
-
-# to install both cypress and playwright
-bin/rails g cypress_on_rails:install --install_cypress --install_playwright --playwright_folder=playwright
+# if you have/want a different cypress folder (default is e2e)
+bin/rails g cypress_on_rails:install --install_folder=spec/cypress
 
-# to change where the Ruby files reside (default is e2e)
-bin/rails g cypress_on_rails:install --install_folder=test/e2e
+# to install playwright instead of cypress
+bin/rails g cypress_on_rails:install --framework playwright
 
 # if you target the Rails server with a path prefix to your URL
 bin/rails g cypress_on_rails:install --api_prefix=/api
 
-# if you want to install cypress with npm
-bin/rails g cypress_on_rails:install --install_cypress_with=npm
+# if you want to install with npm instead
+bin/rails g cypress_on_rails:install --install_with=npm
 
 # if you already have cypress installed globally
-bin/rails g cypress_on_rails:install --no-install-cypress
+bin/rails g cypress_on_rails:install --install_with=skip
 
 # to update the generated files run
-bin/rails g cypress_on_rails:update
+bin/rails g cypress_on_rails:install --install_with=skip
 ```
 
 The generator modifies/adds the following files/directory in your application:
 * `config/initializers/cypress_on_rails.rb` used to configure Cypress on Rails
-* `spec/cypress/e2e/` contains your cypress tests
-* `spec/playwright/e2e/` contains your playwright tests
-* `spec/cypress/support/on-rails.js` contains Cypress on Rails support code
-* `spec/playwright/support/on-rails.js` contains Playwright on Rails support code
-* `spec/e2e/app_commands/scenarios/` contains your Cypress on Rails scenario definitions
-* `spec/e2e/cypress_helper.rb` contains helper code for Cypress on Rails app commands
+* `e2e/cypress/integration/` contains your cypress tests
+* `e2e/cypress/support/on-rails.js` contains Cypress on Rails support code
+* `e2e/cypress/e2e_helper.rb` contains helper code to require libraries like factory_bot
+* `e2e/cypress/app_commands/` contains your scenario definitions
+* `e2e/playwright/e2e/` contains your playwright tests
+* `e2e/playwright/support/on-rails.js` contains Playwright on Rails support code
 
-If you are not using `database_cleaner` look at `spec/e2e/app_commands/clean.rb`.
-If you are not using `factory_bot` look at `spec/e2e/app_commands/factory_bot.rb`.
+If you are not using `database_cleaner` look at `e2e/cypress/app_commands/clean.rb`.
+If you are not using `factory_bot` look at `e2e/cypress/app_commands/factory_bot.rb`.
 
 Now you can create scenarios and commands that are plain Ruby files that get loaded through middleware, the ruby sky is your limit.
 
 ### Update your database.yml
 
-When running `cypress test` or `playwright test` on your local computer it's recommended to start your server in development mode so that changes you
-make are picked up without having to restart the server.
+When writing and running tests on your local computer, it's recommended to start your server in development mode so that changes you
+make are picked up without having to restart your local server.
+
 It's recommended you update your `database.yml` to check if the `CYPRESS` environment variable is set and switch it to the test database
-otherwise cypress will keep clearing your development database.
+otherwise, cypress will keep clearing your development database.
 
 For example:
 ```yaml
@@ -127,11 +148,9 @@ Getting started on your local environment
 CYPRESS=1 bin/rails server -p 5017
 
 # in separate window start cypress
-yarn cypress open
+yarn cypress open --project ./e2e
 # or for npm
-node_modules/.bin/cypress open
-# or if you changed the cypress folder to spec/cypress
-yarn cypress open --project ./spec
+npx cypress open --project ./e2e
 # or for playwright
 yarn playwright test --ui
 # or using npm
@@ -144,15 +163,16 @@ How to run cypress on CI
 # setup rails and start server in background
 # ...
 
-yarn run cypress run
+yarn run cypress run --project ./e2e
 # or for npm
-npx cypress run
+npx cypress run --project ./e2e
 ```
 
 ### Example of using factory bot
 
 You can run your [factory_bot](https://github.com/thoughtbot/factory_bot) directly as well
 
+then in Cypress
 ```js
 // spec/cypress/e2e/simple.cy.js
 describe('My First Test', () => {
@@ -176,6 +196,32 @@ describe('My First Test', () => {
   })
 })
 ```
+
+then in Playwright
+```js
+const { test, expect, request } = require('@playwright/test');
+
+test.describe('My First Test', () => {
+    test('visit root', async ({ page }) => {
+        // This calls to the backend to prepare the application state
+        await appFactories([
+            ['create_list', 'post', 10],
+            ['create', 'post', { title: 'Hello World' }],
+            ['create', 'post', 'with_comments', { title: 'Factory_bot Traits here' }]
+        ]);
+
+        // Visit the application under test
+        await page.goto('/');
+        
+        await expect(page).toHaveText('Hello World');
+
+        // Accessing result
+        const records = await appFactories([['create', 'invoice', { paid: false }]]);
+        await page.goto(`/invoices/${records[0].id}`);
+    });
+});
+```
+
 You can check the [association docs](docs/factory_bot_associations.md) on more ways to setup association with the correct data.
 
 In some cases, using static Cypress fixtures may not provide sufficient flexibility when mocking HTTP response bodies. It's possible to use `FactoryBot.build` to generate Ruby hashes that can then be used as mock JSON responses:
@@ -336,16 +382,21 @@ yarn add cypress-on-rails --dev
 ### for VCR
 
 This only works when you start the Rails server with a single worker and single thread
+It can be used in two modes:
+- with separate insert/eject calls (more general, recommended way)
+- with use_cassette wrapper (supports only GraphQL integration)
 
-#### setup
+#### basic setup
 
-Add your VCR configuration to your `cypress_helper.rb`
+Add your VCR configuration to your `config/cypress_on_rails.rb`
 
 ```ruby
-require 'vcr'
-VCR.configure do |config|
-  config.hook_into :webmock
-end
+c.vcr_options = {
+  hook_into: :webmock,
+  default_cassette_options: { record: :once },
+  # It's possible to override cassette_library_dir using install_folder
+  cassette_library_dir: File.expand_path("#{__dir__}/../../spec/cypress/fixtures/vcr_cassettes")
+}
 ```
 
 Add to your `cypress/support/index.js`:
@@ -362,13 +413,16 @@ VCR.turn_off!
 WebMock.disable! if defined?(WebMock)
 ```
 
+#### insert/eject setup
+
 Add to your `config/cypress_on_rails.rb`:
 
 ```ruby
   c.use_vcr_middleware = !Rails.env.production? && ENV['CYPRESS'].present?
+  # c.use_vcr_use_cassette_middleware = !Rails.env.production? && ENV['CYPRESS'].present?
 ```
 
-#### usage
+#### insert/eject usage
 
 You have `vcr_insert_cassette` and `vcr_eject_cassette` available. https://www.rubydoc.info/github/vcr/vcr/VCR:insert_cassette
 
@@ -395,6 +449,63 @@ describe('My First Test', () => {
 })
 ```
 
+#### use_cassette setup
+
+Add to your `config/cypress_on_rails.rb`:
+
+```ruby
+  # c.use_vcr_middleware = !Rails.env.production? && ENV['CYPRESS'].present?
+  c.use_vcr_use_cassette_middleware = !Rails.env.production? && ENV['CYPRESS'].present?
+```
+
+Adjust record mode in `config/cypress_on_rails.rb` if needed:
+
+```ruby
+c.vcr_options = {
+  hook_into: :webmock,
+  default_cassette_options: { record: :once },
+} 
+```
+
+Add to your `cypress/support/command.js`:
+
+```js
+  // Add proxy-like mock to add operation name into query string
+  Cypress.Commands.add('mockGraphQL', () => {
+    cy.on('window:before:load', (win) => {
+      const originalFetch = win.fetch;
+      const fetch = (path, options, ...rest) => {
+        if (options && options.body) {
+          try {
+            const body = JSON.parse(options.body);
+            if (body.operationName) {
+              return originalFetch(`${path}?operation=${body.operationName}`, options, ...rest);
+            }
+          } catch (e) {
+            return originalFetch(path, options, ...rest);
+          }
+        }
+        return originalFetch(path, options, ...rest);
+      };
+      cy.stub(win, 'fetch', fetch);
+    });
+  });
+```
+
+Add to your `cypress/support/on-rails.js`, to `beforeEach`:
+
+```js
+  cy.mockGraphQL() // for GraphQL usage with use_cassette, see cypress/support/commands.rb
+```
+
+#### use_cassette usage
+
+There is nothing special to be called during the Cypress scenario. Each request is wrapped with `VCR.use_cassette`.
+Consider VCR configuration in `cypress_helper.rb` to ignore hosts.
+
+All cassettes will be recorded and saved automatically, using the pattern `<vcs_cassettes_path>/graphql/<operation_name>`
+
+
 ## `before_request` configuration
 
 You may perform any custom action before running a CypressOnRails command, such as authentication, or sending metrics.  Please set `before_request` as part of the CypressOnRails configuration.
@@ -463,6 +574,9 @@ Cypress.Commands.add('appCommands', (body) => {
     method: 'POST',
     url: '/__cypress__/command',
     body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json; charset=utf-8',
+    },
     log: true,
     failOnStatusCode: true
   })
@@ -487,6 +601,46 @@ beforeEach(() => {
 });
 ```
 
+add the following file to Playwright
+```js
+// test/playwright/support/on-rails.js
+async function appCommands(body) {
+    const context = await request.newContext();
+    const response = await context.post('/__e2e__/command', {
+        data: body,
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+
+    if (response.status() !== 201) {
+        const responseBody = await response.text();
+        throw new Error(`Expected status 201 but got ${response.status()} - ${responseBody}`);
+    }
+
+    return response.json();
+}
+
+async function app(name, commandOptions = {}) {
+    const body = await appCommands({ name, options: commandOptions });
+    return body[0];
+}
+
+async function appScenario(name, options = {}) {
+    const body = { name: `scenarios/${name}`, options };
+    const result = await appCommands(body);
+    return result[0];
+}
+
+async function appFactories(options) {
+    return app('factory_bot', options);
+}
+
+async function clean() {
+    await app('clean');
+}
+```
+
 ## API Prefix
 
 If your Rails server is exposed under a proxy, typically https://my-local.dev/api, you can use the `api_prefix` option.
@@ -508,8 +662,8 @@ In `config/initializers/cypress_on_rails.rb`, add this line:
 
 ## Supporters
 
-<a href="https://www.jetbrains.com">
-  <img src="https://user-images.githubusercontent.com/4244251/184881139-42e4076b-024b-4b30-8c60-c3cd0e758c0a.png" alt="JetBrains" height="120px">
+<a href="https://jb.gg/OpenSource" style="margin-right: 20px;">
+  <img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.png" alt="JetBrains" height="120px">
 </a>
 <a href="https://scoutapp.com">
   <picture>
@@ -518,7 +672,7 @@ In `config/initializers/cypress_on_rails.rb`, add this line:
     <img alt="ScoutAPM" src="https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png" height="120px">
   </picture>
 </a>
-<a href="https://controlplane.com">
+<a href="https://shakacode.controlplane.com">
   <picture>
     <img alt="Control Plane" src="https://github.com/shakacode/.github/assets/20628911/90babd87-62c4-4de3-baa4-3d78ef4bec25" height="120px">
   </picture>

data/cypress-on-rails.gemspec

@@ -19,7 +19,7 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'rake'
   s.add_development_dependency 'rspec'
   s.add_development_dependency 'railties', '>= 3.2'
-  s.add_development_dependency 'factory_bot'
+  s.add_development_dependency 'factory_bot', '!= 6.4.5'
   s.add_development_dependency 'vcr'
   s.metadata = {
     "bug_tracker_uri"   => "https://github.com/shakacode/cypress-on-rails/issues",

data/docs/authentication.md

@@ -51,3 +51,33 @@ cy.forceLogin()
 cy.forceLogin({redirect_to: '/profile'})
 cy.forceLogin({email: 'someuser@mail.com'})
 ```
+
+In `playwright/support/on-rails.js`:
+
+```js
+async function forceLogin(page, { email, redirect_to = '/' }) {
+    // Validate inputs
+    if (typeof email !== 'string'  || typeof redirect_to !== 'string') {
+        throw new Error('Invalid input: email and redirect_to must be non-empty strings');
+    }
+
+    const response = await page.request.post('/__e2e__/force_login', {
+        data: { email: email, redirect_to: redirect_to },
+        headers: { 'Content-Type': 'application/json' }
+    });
+
+    // Handle response based on status code
+    if (response.ok()) {
+        await page.goto(redirect_to);
+    } else {
+        // Throw an exception for specific error statuses
+        throw new Error(`Login failed with status: ${response.status()}`);
+    }
+}
+```
+
+Examples of usage in Playwright specs:
+```js
+await forceLogin(page, { email: 'someuser@mail.com', redirect_to: '/profile' });
+
+```

data/docs/factory_bot_associations.md

@@ -54,6 +54,15 @@ cy.appFactories([['create', 'author']]).then((records) => {
 })
 ```
 
+then in Playwright
+There are a few ways you can set up associations with the correct data using Playwright and FactoryBot.
+```js
+const records = await appFactories([['create', 'author', { name: 'James' }]], context);
+await appFactories([['create', 'post', { title: 'Playwright is cool', author_id: records[0].id }]], context);
+// Note: These Playwright examples demonstrate asynchronous interactions with the server for setting up data associations. Ensure that your environment is configured to handle these async operations.
+```
+
+
 ## 2. Using transient attributes
 
 ```rb
@@ -81,6 +90,11 @@ cy.appFactories([['create', 'post', { title: 'Cypress is cool', author_name: 'Ja
 cy.appFactories([['create', 'post']])
 ```
 
+then in Playwright
+```js
+const records = await appFactories([['create', 'post', { title: 'Playwright is cool', author_name: 'James' }]]);
+```
+
 ## 3. Using Nested Attributes
 
 ```rb

data/lib/cypress_on_rails/configuration.rb

@@ -6,8 +6,10 @@ module CypressOnRails
     attr_accessor :install_folder
     attr_accessor :use_middleware
     attr_accessor :use_vcr_middleware
+    attr_accessor :use_vcr_use_cassette_middleware
     attr_accessor :before_request
     attr_accessor :logger
+    attr_accessor :vcr_options
 
     # Attributes for backwards compatibility
     def cypress_folder
@@ -25,14 +27,17 @@ module CypressOnRails
 
     alias :use_middleware? :use_middleware
     alias :use_vcr_middleware? :use_vcr_middleware
+    alias :use_vcr_use_cassette_middleware? :use_vcr_use_cassette_middleware
 
     def reset
       self.api_prefix = ''
       self.install_folder = 'spec/e2e'
       self.use_middleware = true
       self.use_vcr_middleware = false
+      self.use_vcr_use_cassette_middleware = false
       self.before_request = -> (request) {}
       self.logger = Logger.new(STDOUT)
+      self.vcr_options = {}
     end
 
     def tagged_logged

data/lib/cypress_on_rails/middleware.rb

@@ -51,6 +51,7 @@ module CypressOnRails
       # Halt the middleware if an Rack Env was returned by `before_request`
       return maybe_env unless maybe_env.nil?
 
+      req.body.rewind
       body = JSON.parse(req.body.read)
       logger.info "handle_command: #{body}"
       commands = Command.from_body(body, configuration)

data/lib/cypress_on_rails/railtie.rb

@@ -9,8 +9,16 @@ module CypressOnRails
         app.middleware.use Middleware
       end
       if CypressOnRails.configuration.use_vcr_middleware?
-        require 'cypress_on_rails/vcr_middleware'
-        app.middleware.use VCRMiddleware
+        require 'cypress_on_rails/vcr/insert_eject_middleware'
+        app.middleware.use Vcr::InsertEjectMiddleware
+      end
+      if CypressOnRails.configuration.use_vcr_use_cassette_middleware?
+        if CypressOnRails.configuration.use_vcr_middleware?
+          raise 'Configure only one VCR middleware at a time: use_vcr_middleware OR use_vcr_use_cassette_middleware'
+        end
+
+        require 'cypress_on_rails/vcr/use_cassette_middleware'
+        app.middleware.use Vcr::UseCassetteMiddleware
       end
     end
   end

data/lib/cypress_on_rails/simple_rails_factory.rb

@@ -1,5 +1,3 @@
-require 'active_support/core_ext/string'
-
 module CypressOnRails
   module SimpleRailsFactory
     def self.create(type, *params)