Fixes failing snippet and epic tests

See https://gitlab.com/gitlab-org/gitlab/-/issues/323267

app/assets/javascripts/snippets/components/snippet_visibility_edit.vue

@@ -55,7 +55,12 @@ export default {
         >
           <div class="d-flex align-items-center">
             <gl-icon :size="16" :name="option.icon" />
-            <span class="font-weight-bold ml-1 js-visibility-option">{{ option.label }}</span>
+            <span
+              class="font-weight-bold ml-1 js-visibility-option"
+              data-qa-selector="visibility_content"
+              :data-qa-visibility="option.label"
+              >{{ option.label }}</span
+            >
           </div>
           <template #help>{{
             isProjectSnippet && option.description_project

ee/app/assets/javascripts/epic/components/epic_form.vue

@@ -158,12 +158,15 @@ export default {
           </template>
         </markdown-field>
       </gl-form-group>
-      <gl-form-group :label="__('Confidentiality')" label-for="epic-confidentiality">
+      <gl-form-group
+        :label="__('Confidentiality')"
+        label-for="epic-confidentiality"
+        data-qa-selector="confidential_epic_checkbox"
+      >
         <gl-form-checkbox
           id="epic-confidentiality"
           v-model="confidential"
           data-testid="epic-confidentiality"
-          data-qa-selector="confidential_epic_checkbox"
         >
           {{ $options.i18n.confidentialityLabel }}
         </gl-form-checkbox>

qa/qa/ee/page/group/epic/new.rb

@@ -17,7 +17,7 @@ module QA
             end
 
             def enable_confidential_epic
-              click_element :confidential_epic_checkbox
+              find_element(:confidential_epic_checkbox, visible: false).click
             end
 
             def set_title(title)

qa/qa/page/component/new_snippet.rb

@@ -32,6 +32,10 @@ module QA
             # This 'element' is here only to ensure the changes in the view source aren't mistakenly changed
             element :_, "qa_selector = local_assigns.fetch(:qa_selector, '')" # rubocop:disable QA/ElementWithPattern
           end
+
+          base.view 'app/assets/javascripts/snippets/components/snippet_visibility_edit.vue' do
+            element :visibility_content
+          end
         end
 
         def fill_title(title)
@@ -44,7 +48,7 @@ module QA
         end
 
         def set_visibility(visibility)
-          choose visibility
+          click_element(:visibility_content, visibility: visibility)
         end
 
         def fill_file_name(name, file_number = nil)

spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap

@@ -46,6 +46,8 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
            
           <span
             class="font-weight-bold ml-1 js-visibility-option"
+            data-qa-selector="visibility_content"
+            data-qa-visibility="Private"
           >
             Private
           </span>
@@ -65,6 +67,8 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
            
           <span
             class="font-weight-bold ml-1 js-visibility-option"
+            data-qa-selector="visibility_content"
+            data-qa-visibility="Internal"
           >
             Internal
           </span>
@@ -84,6 +88,8 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
            
           <span
             class="font-weight-bold ml-1 js-visibility-option"
+            data-qa-selector="visibility_content"
+            data-qa-visibility="Public"
           >
             Public
           </span>