テストが通らない原因が特定できない

Question

前提・実現したいこと

作成したsystemのrspecテストが通らないことについて。
先日systemのrspecテストに関して作成しました。
しかし実際にテストを実行してみるとエラーが発生してしまいます。
エラー内容を確認してみましたが書いてあることに理解ができておらずエラーの解決策が全く思い浮かびません。
内容的にテストが通るべきではないかと思っています。
どなたかrspecテストに関して詳しい方や開発で使用している方いましたらぜひアドバイス等よろしくお願い致します。

発生している問題・エラーメッセージ

Failures:

  1) Potepan::Products 製品詳細ページ 製品詳細ページ大枠について 表示タイトルが正しいことを確認
     Failure/Error: expect(page).to have_title 'Product - BIGBAG Store'
       expected "Product #1 - 3832 - BIGBAG Store" to include "Product - BIGBAG Store"
     
     [Screenshot Image]: /Users/ryo0413/ryo_sugano/tmp/screenshots/failures_r_spec_example_groups_potepan_products_nested_nested_表示タイトルが正しいことを確認_806.png

     
     # ./spec/system/products_spec.rb:17:in `block (4 levels) in <top (required)>'

  2) Potepan::Products 製品詳細ページ 製品詳細ページ大枠について 製品名がページ上部に表示されることを確認
     Failure/Error: expect(page).to have_css('h2', text: "#{product.name}")
       expected to find visible css "h2" with text "Product #5 - 2033" but there were no matches. Also found "PRODUCT #5 - 2033", "PRODUCT #5 - 2033", which matched the selector but not all filters. 
     
     [Screenshot Image]: /Users/ryo0413/ryo_sugano/tmp/screenshots/failures_r_spec_example_groups_potepan_products_nested_nested_製品名がページ上部に表示されることを確認_938.png

     
     # ./spec/system/products_spec.rb:21:in `block (4 levels) in <top (required)>'

  3) Potepan::Products 製品詳細ページ 製品詳細の表示部分について 製品名、価格が表示されていることを確認
     Failure/Error: expect(page).to have_content product.name
       expected to find text "Product #9 - 7764" in "一覧ページへ戻る\nPRODUCT #9 - 7764\n$19.99\nAs seen on TV!\nS\n1\nカートへ入れる". (However, it was found 1 time using a case insensitive search and it was found 1 time including non-visible text.)
     
     [Screenshot Image]: /Users/ryo0413/ryo_sugano/tmp/screenshots/failures_r_spec_example_groups_potepan_products_nested_nested_2_製品名、価格が表示されていることを確認_289.png

     
     # ./spec/system/products_spec.rb:28:in `block (5 levels) in <top (required)>'
     # ./spec/system/products_spec.rb:27:in `block (4 levels) in <top (required)>'

Finished in 35.81 seconds (files took 14.31 seconds to load)
3 examples, 3 failures

実装したテストソースコード

require 'rails_helper'

RSpec.describe "Potepan::Products", type: :system do
  describe "製品詳細ページ" do
    let!(:taxonomy)         { create(:taxonomy, name: 'Categories') }
    let!(:taxon)            { create(:taxon, taxonomy: taxonomy) }
    let!(:product)          { create(:product, taxons: [taxon]) }
    let!(:related_products) { create_list(:product, 2, taxons: [taxon]) }
    let!(:other_product)    { create(:product) }

    before do
      visit potepan_product_path(product.id)
    end

    context "製品詳細ページ大枠について" do
      it "表示タイトルが正しいことを確認" do
        expect(page).to have_title 'Product - BIGBAG Store'
      end

      it "製品名がページ上部に表示されることを確認" do
        expect(page).to have_css('h2', text: "#{product.name}")
      end
    end

    context "製品詳細の表示部分について" do
      it "製品名、価格が表示されていることを確認" do
        within find('.singleProduct') do
          expect(page).to have_content product.name
          expect(page).to have_content product.display_price
        end
      end
    end
  end
end

試したこと

発生しているエラー内容を翻訳して理解しよう試みました。
理解として以下のように捉えています。
1.「Product＃1-3832-BIGBAGStore」に「Product-BIGBAGStore」が含まれると予想される。
含まれているのでなぜエラーなのかわからないです。

2.テキスト「Product＃5-2033」で表示されるcss "h2"が見つかると予想されましたが、一致するものはありませんでした。
h2の指定の仕方などに問題があるのかと考えています。

3.「紹介ページへ続き\ n製品＃9-7764 \ n $ 19.99 \ nテレビで見られるように！\ nS \ n1 \ nかへ来る」に「製品＃9-7764」というテキストが見つかると予想されます。
見つかっているはずなのにエラーが発生しているのかわからないです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。