RSpecの要素の取得

Question

実現したいこと
Rspec+copybaraにて
チェックボックスにチェックがされた物を一括で削除できる機能をテストを書きたいです。
しかしチェックボックス要素を取得しようとするとエラーが出てしまいます。
下記の画像の選択欄がチェックボックスです。

チェックボックス自体は非表示になっており、擬似要素::beforeでクリックできる仕様です。

当該部分のHTML
countは繰り返し処理の際、各チェックボックスに繰り返し分、個別のidを与えたかったので付けてあります。できればこれでテストも取得したい

<td>
    <%= f.check_box :content_ids, {type: 'checkbox', class: 'checkbox-select', id: "checkbox#{@count}", multiple: true}, content.id %>
    <%= f.label :'', for: "checkbox#{@count}",class: 'select-label', id: "select_delete_label#{@count}" %>
</td>

CSS

$color: #6C757D; /* Red */

.select-label {
    cursor: pointer;
    &:before{
    display: inline-block;
    content: "+";
    margin: 0 10px 0 0;
        width: 35px;
        height: 35px;
    border: 3px solid $color;
        border-radius: 100%;
    vertical-align: middle;
    color: $color;
    font-size: 30px;
    text-align: center;
    font-weight: 700;
    line-height: 0.8em;
    transition: transform 0.2s ease-in-out;
    }
}

.checkbox-select:checked + .select-label:before{
    background: $color;
    color: #fff;
    transform:rotate(135deg);
    transform-origin: center center;
}

.checkbox-select { visibility: hidden; }

.select_submit{
    overflow: hidden;
    position: relative;
    left: -1000px;
}

要素取得の際のエラー

     Failure/Error: find('.select-label:before').click

     Capybara::ElementNotFound:
       Unable to find　xxxxxxx

とエラーが出てしまいます。

試したのは、非表示要素も取得できる

visible: false

は試しました。

お力添えを頂きたいです。

質問力が足らず、分かりづらい部分があると思うので、そこはガンガン突っ込んで頂けると嬉しいです。
よろしくお願いします。

##解決方法

RSpec.describe "コンテンツ管理機能", type: :system do

    let(:user_a) {FactoryBot.create(:user, name: 'ユーザーA', email: '[e-mail]')}
    let!(:content_a) {FactoryBot.create(:content, name: '最初のコンテンツ', url: '最初のurl', user: user_a)}

    describe "選択削除機能" do
        let( :login_user ) { user_a }

        before do
            visit contents_path
            find('#select_delete_label1').click
            find('.delete').click
            page.driver.browser.switch_to.alert.accept
        end

        context "選択して削除した時" do
            it "正常に削除される" do
                expect(page).to have_selector '.alert-success', text: 'ブックマークを削除しました'
            end
        end
    end

これで解決できました。
ご回答いただいた方に感謝です！

Answer 1

クリックしているのはラベル要素だと思います。

Comments

[GonshibaN]

お答えいただき本当に感謝いたします！
無事にこのテストは完了できました。

一覧ページに飛ぶ
visit contents_path
ラベルにidを付けてクリック
find('#select_delete_label1').click
デリートボタン(SVG)をクリック
find('.delete').click
確認画面(モーダル)で削除を確定
page.driver.browser.switch_to.alert.accept

この流れでit評価まで行けました。