fix: specs failures

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

@@ -15,13 +15,14 @@ def self.perform(file,command_options = nil)
 
     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?("#{configuration.cypress_folder}/cypress_helper.rb")
-        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 #{e2e_helper_file}"
+      logger.warn "could not find #{e2e_helper_file} nor #{cypress_helper_file}"
       end
     end
 

lib/cypress_on_rails/configuration.rb

@@ -18,9 +18,8 @@ def initialize
 
     def reset
       self.api_prefix = ''
-      self.install_folder = nil
-      self.cypress_folder = 'spec/cypress'
-      warn "cypress_folder is deprecated, please use the install generator to use the new folder structure"
+      self.install_folder = 'spec/e2e'
+      self.cypress_folder = nil
       self.use_middleware = true
       self.use_vcr_middleware = false
       self.logger = Logger.new(STDOUT)

lib/cypress_on_rails/middleware.rb

@@ -37,7 +37,7 @@ def self.from_body(body, configuration)
           command_params = [body]
         end
         command_params.map do |params|
-          if defined?(configuration.install_folder)
+          if configuration.cypress_folder.nil?
             new(params.fetch('name'), params['options'], configuration.install_folder)
           else
             new(params.fetch('name'), params['options'], configuration.cypress_folder)

lib/cypress_on_rails/vcr_middleware.rb

@@ -57,7 +57,7 @@ def vcr
       return @vcr if @vcr
       require 'vcr'
       VCR.configure do |config|
-        config.cassette_library_dir = "#{configuration.install_folder}/fixtures/vcr_cassettes"
+        config.cassette_library_dir = "#{configuration.cypress_folder.nil? ? configuration.install_folder : configuration.cypress_folder}/fixtures/vcr_cassettes"
       end
       @vcr = VCR
     end

lib/generators/cypress_on_rails/install_generator.rb

@@ -19,7 +19,7 @@ def install_framework
       packages = []
 
       packages << 'cypress' if options.install_cypress
-      packages << 'playwright' if options.install_playwright
+      packages.push('playwright', '@playwright/test') if options.install_playwright
 
       if options.install_with == 'yarn'
         command = "yarn --cwd=#{install_dir} add #{packages.join(' ')} --dev"
@@ -28,7 +28,7 @@ def install_framework
       end
       if command
         say command
-        fail 'failed to install cypress' unless system(command)
+        fail "failed to install #{packages.join(' ')" unless system(command)
       end
 
       if options.install_cypress

lib/generators/cypress_on_rails/templates/spec/cypress/e2e/rails_examples/advance_factory_bot.cy.js

@@ -1,6 +1,6 @@
 describe('More Rails using factory bot examples', function() {
   beforeEach(() => {
-    cy.app('clean') // have a look at cypress/app_commands/clean.rb
+    cy.app('clean') // have a look at e2e/app_commands/clean.rb
   })
 
   it('using response from factory bot', function() {

lib/generators/cypress_on_rails/templates/spec/cypress/e2e/rails_examples/other.cy.js

@@ -1,6 +1,6 @@
 describe('Rails Other examples', function() {
   it('cypress eval', function() {
-    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.appEval("Post.create(title: 'Hello Eval')")
 
     cy.visit('/')

lib/generators/cypress_on_rails/templates/spec/cypress/e2e/rails_examples/using_factory_bot.cy.js

@@ -1,6 +1,6 @@
 describe('Rails using factory bot examples', function() {
   beforeEach(() => {
-    cy.app('clean') // have a look at cypress/app_commands/clean.rb
+    cy.app('clean') // have a look at e2e/app_commands/clean.rb
   })
 
   it('using single factory bot', function() {

lib/generators/cypress_on_rails/templates/spec/cypress/e2e/rails_examples/using_fixtures.cy.js

@@ -1,6 +1,6 @@
 describe('Rails using rails fixtures examples', function() {
   beforeEach(() => {
-    cy.app('clean') // have a look at cypress/app_commands/clean.rb
+    cy.app('clean') // have a look at e2e/app_commands/clean.rb
   })
 
   it('loading all fixtures', function() {

lib/generators/cypress_on_rails/templates/spec/cypress/e2e/rails_examples/using_scenarios.cy.js

@@ -1,6 +1,6 @@
 describe('Rails using scenarios examples', function() {
   beforeEach(() => {
-    cy.app('clean') // have a look at cypress/app_commands/clean.rb
+    cy.app('clean') // have a look at e2e/app_commands/clean.rb
   })
 
   it('setup basic scenario', function() {

lib/generators/cypress_on_rails/templates/spec/cypress/e2e/rails_examples/using_vcr.cy.js

@@ -1,6 +1,6 @@
 describe('Rails Other examples', function() {
   it('Inserting a cassette', function() {
-    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')

spec/cypress_on_rails/configuration_spec.rb

@@ -6,7 +6,7 @@
 
     expect(CypressOnRails.configuration.api_prefix).to eq('')
     expect(CypressOnRails.configuration.install_folder).to eq('spec/e2e')
-    expect(CypressOnRails.configuration.cypress_folder).to eq('spec/cypress')
+    expect(CypressOnRails.configuration.cypress_folder).to eq(nil)
     expect(CypressOnRails.configuration.use_middleware?).to eq(true)
     expect(CypressOnRails.configuration.logger).to_not be_nil
   end