Fix possible CI errors regarding browser user data isolation and fixed a system test case

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: CI
 on:
   pull_request:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   scan_ruby:
@@ -64,7 +64,7 @@ jobs:
 
   test:
     runs-on: ubuntu-latest
-  
+
     services:
       postgres:
         image: postgres
@@ -79,23 +79,36 @@ jobs:
           POSTGRES_USER: postgres
           POSTGRES_PASSWORD: postgres
           POSTGRES_DB: chronio_test
-  
+
     steps:
       - name: Install packages
-        run: sudo apt-get update && sudo apt-get install --no-install-recommends -y curl libjemalloc2 libvips sqlite3
-
+        run: sudo apt-get update && sudo apt-get install --no-install-recommends -y curl libjemalloc2 libvips42 postgresql-client
+
+      - name: Install Google Chrome and ChromeDriver
+        uses: browser-actions/setup-chrome@v1
+        with:
+          chrome-version: stable
+          install-chromedriver: true
+          install-dependencies: false
+        id: setup-chrome
+
+      - name: Check for Chrome and ChromeDriver
+        run: |
+          ${{ steps.setup-chrome.outputs.chrome-path }} --version
+          ${{ steps.setup-chrome.outputs.chromedriver-path }} --version
+
       - name: Checkout code
         uses: actions/checkout@v4
-  
+
       - name: Set permissions for bin scripts
         run: chmod +x bin/*
-  
+
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: .ruby-version
           bundler-cache: true
-  
+
       - name: Wait for PostgreSQL to be ready
         run: |
           for i in {1..10}; do
@@ -108,12 +121,15 @@ jobs:
           done;
           echo "PostgreSQL failed to start.";
           exit 1;
-  
+
       - name: Run tests
         env:
           RAILS_ENV: test
           DATABASE_URL: postgres://postgres:postgres@localhost:5432/chronio_test
-        run: bin/rails db:prepare && bin/rails test:system
+        run: |
+          # Create a unique user data directory for each test run
+          export CHROME_USER_DATA_DIR=$(mktemp -d)
+          bin/rails db:prepare && bin/rails test:system
 
       - name: Keep screenshots from failed system tests
         uses: actions/upload-artifact@v4

app/views/posts/_post.html.erb

@@ -1,6 +1,6 @@
     <div class="flex flex-col px-4 items-center justify-center min-h-screen w-full bg-cover bg-top">
       <div class="min-h-96 w-full bg-gray-200 rounded-lg relative p-2">
-        <div id="<%= dom_id post %>">
+        <div id="<%= dom_id post %>" class="post">
           <p class="my-5">
             <strong class="text-2xl font-semibold block mb-1">Title:</strong>
             <%= post.caption %>

test/system/posts_test.rb

@@ -1,7 +1,7 @@
 require "application_system_test_case"
 require "devise/test/integration_helpers"
 
-class PostsTest < ApplicationSystemTestCase
+class PostsTest < ActionDispatch::SystemTestCase
   include Devise::Test::IntegrationHelpers
 
   setup do
@@ -12,18 +12,17 @@ class PostsTest < ApplicationSystemTestCase
 
   test "visiting the index" do
     visit posts_path(locale: I18n.default_locale)
-    assert_selector ".post", text: @post.body.to_plain_text
+    assert_selector ".post", text: @post.body.to_plain_text, wait: 5 # Add a wait time
   end
 
   test "should create post" do
     visit posts_path(locale: I18n.default_locale)
     click_on "New post"
-    
+
     fill_in "Title", with: "My first post"
-    page.execute_script("document.querySelector('trix-editor').editor.insertString('This is the body of the first post.');")
-    page.execute_script("document.querySelector('trix-editor').dispatchEvent(new Event('input', { bubbles: true }));")
+    fill_in_rich_text_area "Content", with: "This is the body of the first post."
     click_on "Submit"
-
+  
     assert_text "Post was successfully created"
   end
 

test/test_helper.rb

@@ -24,3 +24,18 @@ class TestCase
     end
   end
 end
+
+Capybara.register_driver :selenium_chrome do |app|
+  options = Selenium::WebDriver::Chrome::Options.new
+  options.add_argument('--no-sandbox')
+  options.add_argument('--disable-dev-shm-usage')
+  options.add_argument('--headless') # Run in headless mode for CI
+  options.add_argument("--user-data-dir=#{ENV['CHROME_USER_DATA_DIR']}") # Use unique user data directory
+  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
+end
+
+Capybara.javascript_driver = :selenium_chrome
+
+class ActionDispatch::SystemTestCase
+  driven_by :selenium_chrome
+end