cypress-on-rails 1.17.0 → 1.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9c9e7d196e802c6bc10ed4a31fdfc868d92a4f059452e3315fa6c2b525f0ff17
-  data.tar.gz: 7378fe702963ed71a808dcdcf518c60519ef5c0149211b1e7e8692823dbb3796
+  metadata.gz: 7fc65785a8f2d8eb2d7197abd2beac221b90c045f05ec126ee1ab96b2ee80f6c
+  data.tar.gz: dff5e1727f058aa6afc16ee9ca2c61c2f72039a9a0e2e00da4c95be38d6fd4a4
 SHA512:
-  metadata.gz: 49c39f927764cab07fd2e1e7dd5c73773a60ce3c515666267fc8602e00b233c0d18f905653df742acb56c16ab594c7c463b13d66e71cde04be5ba785555c3150
-  data.tar.gz: 39701b20ce5fa8024fc9672dd49bbe6f66445d50f45764a22ad18068684595ebb5bd87f6b9a7d031b84df36cb5c705d1f808e056482f11c79247c4b9cd8ccbb4
+  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/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:
@@ -96,10 +119,11 @@ Now you can create scenarios and commands that are plain Ruby files that get loa
 
 ### Update your database.yml
 
-When writing and running tests on your local computer it's recommended to start your server in development mode so that changes you
+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
@@ -148,6 +172,7 @@ npx cypress run --project ./e2e
 
 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', () => {
@@ -171,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:
@@ -331,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`:
@@ -357,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
 
@@ -390,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.
@@ -485,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.
@@ -506,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>
@@ -516,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/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/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/vcr/insert_eject_middleware.rb

@@ -0,0 +1,75 @@
+require_relative 'middleware_helpers'
+
+module CypressOnRails
+  module Vcr
+    # Middleware to handle vcr with insert/eject endpoints
+    class InsertEjectMiddleware
+      include MiddlewareHelpers
+
+      def initialize(app, vcr = nil)
+        @app = app
+        @vcr = vcr
+        @first_call = false
+      end
+
+      def call(env)
+        request = Rack::Request.new(env)
+        if request.path.start_with?('/__e2e__/vcr/insert')
+          configuration.tagged_logged { handle_insert(request) }
+        elsif request.path.start_with?('/__e2e__/vcr/eject')
+          configuration.tagged_logged { handle_eject }
+        else
+          do_first_call unless @first_call
+          @app.call(env)
+        end
+      end
+
+      private
+
+      def handle_insert(req)
+        WebMock.enable! if defined?(WebMock)
+        vcr.turn_on!
+        body = parse_request_body(req)
+        logger.info "vcr insert cassette: #{body}"
+        cassette_name, options = extract_cassette_info(body)
+        vcr.insert_cassette(cassette_name, options)
+        [201, { 'Content-Type' => 'application/json' }, [{ 'message': 'OK' }.to_json]]
+      rescue JSON::ParserError => e
+        [400, { 'Content-Type' => 'application/json' }, [{ 'message': e.message }.to_json]]
+      rescue LoadError, ArgumentError => e
+        [500, { 'Content-Type' => 'application/json' }, [{ 'message': e.message }.to_json]]
+      end
+
+      def parse_request_body(req)
+        JSON.parse(req.body.read)
+      end
+
+      def extract_cassette_info(body)
+        cassette_name = body[0]
+        options = (body[1] || {}).symbolize_keys
+        options[:record] = options[:record].to_sym if options[:record]
+        options[:match_requests_on] = options[:match_requests_on].map(&:to_sym) if options[:match_requests_on]
+        options[:serialize_with] = options[:serialize_with].to_sym if options[:serialize_with]
+        options[:persist_with] = options[:persist_with].to_sym if options[:persist_with]
+        [cassette_name, options]
+      end
+
+      def handle_eject
+        logger.info 'vcr eject cassette'
+        vcr.eject_cassette
+        do_first_call
+        [201, { 'Content-Type' => 'application/json' }, [{ 'message': 'OK' }.to_json]]
+      rescue LoadError, ArgumentError => e
+        [500, { 'Content-Type' => 'application/json' }, [{ 'message': e.message }.to_json]]
+      end
+
+      def do_first_call
+        @first_call = true
+        vcr.turn_off!
+        WebMock.disable! if defined?(WebMock)
+      rescue LoadError
+        # nop
+      end
+    end
+  end
+end

data/lib/cypress_on_rails/vcr/middleware_helpers.rb

@@ -0,0 +1,51 @@
+require 'cypress_on_rails/middleware_config'
+
+module CypressOnRails
+  module Vcr
+    # Provides helper methods for VCR middlewares
+    module MiddlewareHelpers
+      include MiddlewareConfig
+
+      def vcr
+        @vcr ||= configure_vcr
+      end
+
+      def cassette_library_dir
+        configuration.vcr_options&.fetch(:cassette_library_dir) do
+          "#{configuration.install_folder}/fixtures/vcr_cassettes"
+        end
+      end
+
+      private
+
+      def configure_vcr
+        require 'vcr'
+        VCR.configure do |config|
+          config.cassette_library_dir = cassette_library_dir
+          apply_vcr_options(config) if configuration.vcr_options.present?
+        end
+        VCR
+      end
+
+      def apply_vcr_options(config)
+        configuration.vcr_options.each do |option, value|
+          next if option.to_sym == :cassette_library_dir
+
+          apply_vcr_option(config, option, value)
+        end
+      end
+
+      def apply_vcr_option(config, option, value)
+        return unless config.respond_to?(option) || config.respond_to?("#{option}=")
+
+        if config.respond_to?("#{option}=")
+          config.send("#{option}=", value)
+        elsif value.is_a?(Array)
+          config.send(option, *value)
+        else
+          config.send(option, value)
+        end
+      end
+    end
+  end
+end

data/lib/cypress_on_rails/vcr/use_cassette_middleware.rb

@@ -0,0 +1,56 @@
+require_relative 'middleware_helpers'
+
+module CypressOnRails
+  module Vcr
+    # Middleware to handle vcr with use_cassette
+    class UseCassetteMiddleware
+      include MiddlewareHelpers
+
+      def initialize(app, vcr = nil)
+        @app = app
+        @vcr = vcr
+      end
+
+      def call(env)
+        return @app.call(env) if should_not_use_vcr?
+
+        initialize_vcr
+        handle_request_with_vcr(env)
+      end
+
+      private
+
+      def vcr_defined?
+        defined?(VCR) != nil
+      end
+
+      def should_not_use_vcr?
+        vcr_defined? &&
+          VCR.configuration.cassette_library_dir.present? &&
+          VCR.configuration.cassette_library_dir != cassette_library_dir
+      end
+
+      def initialize_vcr
+        WebMock.enable! if defined?(WebMock)
+        vcr.turn_on!
+      end
+
+      def handle_request_with_vcr(env)
+        request = Rack::Request.new(env)
+        cassette_name = fetch_request_cassette(request)
+        vcr.use_cassette(cassette_name) do
+          logger.info "Handle request with cassette name: #{cassette_name}"
+          @app.call(env)
+        end
+      end
+
+      def fetch_request_cassette(request)
+        if request.path.start_with?('/graphql') && request.params.key?('operation')
+          "#{request.path}/#{request.params['operation']}"
+        else
+          request.path
+        end
+      end
+    end
+  end
+end