feat: init support for e2e libs with Playwright (#131)

Abstract Middleware logic from dependency on Cypress
Add support for Playwright
---------
Signed-off-by: Khaled Emara <[email protected]>

Author: KhaledEmaraDev

.github/workflows/ruby.yml

@@ -16,7 +16,7 @@ jobs:
       uses: ruby/setup-ruby@v1
       with:
         ruby-version: 2.3
-        bundler-cache: true 
+        bundler-cache: true
     - name: Run tests
       run: bundle exec rake
     - run: gem uninstall -v '>= 2' -ax bundler || true
@@ -54,10 +54,10 @@ jobs:
       uses: ruby/setup-ruby@v1
       with:
         ruby-version: 2.6
-        bundler-cache: true 
+        bundler-cache: true
     - name: Run tests
       run: bundle exec rake
     - name: Run interaction tests
       run: ./specs_e2e/rails_5_2/test.sh
       env:
-        CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+        CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

CHANGELOG.md

@@ -1,3 +1,6 @@
+### Changed
+* Add support for any e2e testing framewrok starting with Playwright [PR 131](https://github.com/shakacode/cypress-on-rails/pull/131) by [KhaledEmaraDev]
+
 ## [1.14.0]
 [Compare]: https://github.com/shakacode/cypress-on-rails/compare/v1.13.1...v1.14.0
 

README.md

@@ -14,20 +14,21 @@ Need help with cypress-on-rails? Contact [ShakaCode](mailto:[email protected]
 
 ----
 
-# Playwright.dev support
-We're working on full support for [Playwright.dev](https://playwright.dev/). See [issue #116](https://github.com/shakacode/cypress-on-rails/issues/116#issuecomment-1523946478) for details.
-
 # Totally new to Cypress?
 Suggest you first learn the basics of Cypress before attempting to integrate with Ruby on Rails
 
 * [Good start Here](https://docs.cypress.io/examples/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
+
+* [Good start Here](https://playwright.dev/docs/writing-tests)
+
 ## Overview
 
-Gem for using [cypress.io](http://github.com/cypress-io/) 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 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)
 
-It allows you to run code in the application context when executing cypress tests.
+It allows you to run code in the application context when executing cypress or playwright tests.
 Do things like:
 * use database_cleaner before each test
 * seed the database with default data for each test
@@ -57,11 +58,18 @@ end
 Generate the boilerplate code using:
 
 ```shell
+# 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
+
+# to change where the Ruby files reside (default is e2e)
+bin/rails g cypress_on_rails:install --install_folder=test/e2e
+
 # if you target the Rails server with a path prefix to your URL
 bin/rails g cypress_on_rails:install --api_prefix=/api
 
@@ -76,21 +84,22 @@ bin/rails g cypress_on_rails:update
 ```
 
 The generator modifies/adds the following files/directory in your application:
-* `config/environments/test.rb`
 * `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/cypress/app_commands/scenarios/` contains your Cypress on Rails scenario definitions
-* `spec/cypress/cypress_helper.rb` contains helper code for Cypress on Rails app commands
+* `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
 
-If you are not using `database_cleaner` look at `spec/cypress/app_commands/clean.rb`.
-If you are not using `factory_bot` look at `spec/cypress/app_commands/factory_bot.rb`.
+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`.
 
 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` on your local computer it's recommended to start your server in development mode so that changes you
+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.
 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.
@@ -123,6 +132,10 @@ yarn cypress open
 node_modules/.bin/cypress open
 # or if you changed the cypress folder to spec/cypress
 yarn cypress open --project ./spec
+# or for playwright
+yarn playwright test --ui
+# or using npm
+npx playwright test --ui
 ```
 
 How to run cypress on CI
@@ -133,7 +146,7 @@ How to run cypress on CI
 
 yarn run cypress run
 # or for npm
-node_modules/.bin/cypress run
+npx cypress run
 ```
 
 ### Example of using factory bot
@@ -203,7 +216,7 @@ describe('My First Test', () => {
 
 ### Example of loading Rails test fixtures
 ```ruby
-# spec/cypress/app_commands/activerecord_fixtures.rb
+# spec/e2e/app_commands/activerecord_fixtures.rb
 require "active_record/fixtures"
 
 fixtures_dir = ActiveRecord::Tasks::DatabaseTasks.fixtures_path
@@ -233,7 +246,7 @@ describe('My First Test', () => {
 
 Scenarios are named `before` blocks that you can reference in your test.
 
-You define a scenario in the `spec/cypress/app_commands/scenarios` directory:
+You define a scenario in the `spec/e2e/app_commands/scenarios` directory:
 ```ruby
 # spec/cypress/app_commands/scenarios/basic.rb
 Profile.create name: "Cypress Hill"
@@ -259,9 +272,9 @@ describe('My First Test', () => {
 
 ### Example of using app commands
 
-Create a Ruby file in the `spec/cypress/app_commands` directory:
+Create a Ruby file in the `spec/e2e/app_commands` directory:
 ```ruby
-# spec/cypress/app_commands/load_seed.rb
+# spec/e2e/app_commands/load_seed.rb
 load "#{Rails.root}/db/seeds.rb"
 ```
 
@@ -279,6 +292,37 @@ describe('My First Test', () => {
 })
 ```
 
+### Example of using scenario with Playwright
+
+Scenarios are named `before` blocks that you can reference in your test.
+
+You define a scenario in the `spec/e2e/app_commands/scenarios` directory:
+```ruby
+# spec/e2e/app_commands/scenarios/basic.rb
+Profile.create name: "Cypress Hill"
+
+# or if you have factory_bot enabled in your cypress_helper
+CypressOnRails::SmartFactoryWrapper.create(:profile, name: "Cypress Hill")
+```
+
+Then reference the scenario in your test:
+```js
+// spec/playwright/e2e/scenario_example.spec.js
+import { test, expect } from "@playwright/test";
+import { app, appScenario } from '../../support/on-rails';
+
+test.describe("Rails using scenarios examples", () => {
+  test.beforeEach(async ({ page }) => {
+    await app('clean');
+  });
+
+  test("setup basic scenario", async ({ page }) => {
+    await appScenario('basic');
+    await page.goto("/");
+  });
+});
+```
+
 ## Experimental Features (matching npm package)
 
 Please test and give feedback.
@@ -334,7 +378,7 @@ describe('My First Test', () => {
   beforeEach(() => { cy.app('load_seed') })
 
   it('visit root', () => {
-    cy.app('clean') // have a look at cypress/app_commands/clean.rb
+    cy.app('clean') // have a look at e2e/app_commands/clean.rb
 
     cy.vcr_insert_cassette('cats', { record: "new_episodes" })
     cy.visit('/using_vcr/index')

lib/cypress_on_rails/command_executor.rb

@@ -4,7 +4,7 @@ module CypressOnRails
   # loads and evals the command files
   class CommandExecutor
     def self.perform(file,command_options = nil)
-      load_cypress_helper
+      load_e2e_helper
       file_data = File.read(file)
       eval file_data, binding, file
     rescue => e
@@ -13,12 +13,16 @@ def self.perform(file,command_options = nil)
       raise e
     end
 
-    def self.load_cypress_helper
-      cypress_helper_file = "#{configuration.cypress_folder}/cypress_helper"
-      if File.exist?("#{cypress_helper_file}.rb")
+    def self.load_e2e_helper
+      e2e_helper_file = "#{configuration.install_folder}/e2e_helper.rb"
+      cypress_helper_file = "#{configuration.cypress_folder}/cypress_helper.rb"
+      if File.exist?(e2e_helper_file)
+        Kernel.require e2e_helper_file
+      elsif File.exist?(cypress_helper_file)
         Kernel.require cypress_helper_file
+        warn "cypress_helper.rb and cypress_folder are deprecated, please use the install generator to create e2e_helper.rb using install_folder"
       else
-        logger.warn "could not find #{cypress_helper_file}.rb"
+        logger.warn "could not find #{e2e_helper_file} nor #{cypress_helper_file}"
       end
     end
 

lib/cypress_on_rails/configuration.rb

@@ -2,12 +2,22 @@
 
 module CypressOnRails
   class Configuration
-    attr_accessor :cypress_folder
     attr_accessor :api_prefix
+    attr_accessor :install_folder
     attr_accessor :use_middleware
     attr_accessor :use_vcr_middleware
     attr_accessor :logger
 
+    # Attributes for backwards compatibility
+    def cypress_folder
+      warn "cypress_folder is deprecated, please use install_folder"
+      install_folder
+    end
+    def cypress_folder=(v)
+      warn "cypress_folder= is deprecated, please use install_folder"
+      self.install_folder = v
+    end
+
     def initialize
       reset
     end
@@ -16,8 +26,8 @@ def initialize
     alias :use_vcr_middleware? :use_vcr_middleware
 
     def reset
-      self.cypress_folder = 'spec/cypress'
       self.api_prefix = ''
+      self.install_folder = 'spec/e2e'
       self.use_middleware = true
       self.use_vcr_middleware = false
       self.logger = Logger.new(STDOUT)

lib/cypress_on_rails/middleware.rb

@@ -4,7 +4,7 @@
 require 'cypress_on_rails/command_executor'
 
 module CypressOnRails
-  # Middleware to handle cypress commands and eval
+  # Middleware to handle testing framework commands and eval
   class Middleware
     include MiddlewareConfig
 
@@ -16,16 +16,19 @@ def initialize(app, command_executor = CommandExecutor, file = ::File)
 
     def call(env)
       request = Rack::Request.new(env)
-      if request.path.start_with?("#{configuration.api_prefix}/__cypress__/command")
+      if request.path.start_with?("#{configuration.api_prefix}/__e2e__/command")
         configuration.tagged_logged { handle_command(request) }
+      elsif request.path.start_with?("#{configuration.api_prefix}/__cypress__/command")
+        configuration.tagged_logged { handle_command(request) }
+        warn "/__cypress__/command is deprecated. Please use the install generator to use /__e2e__/command instead."
       else
         @app.call(env)
       end
     end
 
     private
 
-    Command = Struct.new(:name, :options, :cypress_folder) do
+    Command = Struct.new(:name, :options, :install_folder) do
       # @return [Array<Cypress::Middleware::Command>]
       def self.from_body(body, configuration)
         if body.is_a?(Array)
@@ -34,12 +37,12 @@ def self.from_body(body, configuration)
           command_params = [body]
         end
         command_params.map do |params|
-          new(params.fetch('name'), params['options'], configuration.cypress_folder)
+          new(params.fetch('name'), params['options'], configuration.install_folder)
         end
       end
 
       def file_path
-        "#{cypress_folder}/app_commands/#{name}.rb"
+        "#{install_folder}/app_commands/#{name}.rb"
       end
     end
 

lib/cypress_on_rails/vcr_middleware.rb

@@ -15,9 +15,9 @@ def initialize(app, vcr = nil)
 
     def call(env)
       request = Rack::Request.new(env)
-      if request.path.start_with?('/__cypress__/vcr/insert')
+      if request.path.start_with?('/__e2e__/vcr/insert')
         configuration.tagged_logged { handle_insert(request) }
-      elsif request.path.start_with?('/__cypress__/vcr/eject')
+      elsif request.path.start_with?('/__e2e__/vcr/eject')
         configuration.tagged_logged { handle_eject }
       else
         do_first_call unless @first_call
@@ -57,7 +57,7 @@ def vcr
       return @vcr if @vcr
       require 'vcr'
       VCR.configure do |config|
-        config.cassette_library_dir = "#{configuration.cypress_folder}/fixtures/vcr_cassettes"
+        config.cassette_library_dir = "#{configuration.install_folder}/fixtures/vcr_cassettes"
       end
       @vcr = VCR
     end