diff --git a/webapp/components/CommentForm/CommentForm.spec.js b/webapp/components/CommentForm/CommentForm.spec.js
index 47bc01982..5dde84008 100644
--- a/webapp/components/CommentForm/CommentForm.spec.js
+++ b/webapp/components/CommentForm/CommentForm.spec.js
@@ -74,7 +74,7 @@ describe('CommentForm.vue', () => {
 
       it('calls `clear` method when the cancel button is clicked', async () => {
         wrapper.vm.updateEditorContent('ok')
-        await wrapper.find('.cancelBtn').trigger('submit')
+        await wrapper.find('[data-test="cancel-button"]').trigger('submit')
         expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
       })
 
@@ -162,13 +162,13 @@ describe('CommentForm.vue', () => {
       describe('cancel button is clicked', () => {
         it('calls `closeEditWindow` method', async () => {
           wrapper.vm.updateEditorContent('ok')
-          await wrapper.find('.cancelBtn').trigger('submit')
+          await wrapper.find('[data-test="cancel-button"]').trigger('submit')
           expect(closeMethodSpy).toHaveBeenCalledTimes(1)
         })
 
         it('emits `showEditCommentMenu` event', async () => {
           wrapper.vm.updateEditorContent('ok')
-          await wrapper.find('.cancelBtn').trigger('submit')
+          await wrapper.find('[data-test="cancel-button"]').trigger('submit')
           expect(wrapper.emitted('showEditCommentMenu')).toEqual([[false]])
         })
       })
diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 88253065f..d536a0ed2 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -5,7 +5,7 @@
         <!-- with client-only the content is not shown -->
         <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
         <div class="buttons">
-          <base-button :disabled="disabled && !update" @click="handleCancel">
+          <base-button :disabled="disabled && !update" @click="handleCancel" data-test="cancel-button">
             {{ $t('actions.cancel') }}
           </base-button>
           <base-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
diff --git a/webapp/components/CommentList/CommentList.spec.js b/webapp/components/CommentList/CommentList.spec.js
index 0c037d2ff..064b8f136 100644
--- a/webapp/components/CommentList/CommentList.spec.js
+++ b/webapp/components/CommentList/CommentList.spec.js
@@ -63,12 +63,7 @@ describe('CommentList.vue', () => {
 
     it('displays a comments counter', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('span.ds-tag').text()).toEqual('1')
-    })
-
-    it('displays a comments counter', () => {
-      wrapper = Wrapper()
-      expect(wrapper.find('span.ds-tag').text()).toEqual('1')
+      expect(wrapper.find('.count').text()).toEqual('1')
     })
 
     describe('scrollToAnchor mixin', () => {
diff --git a/webapp/components/FilterMenu/FilterMenu.spec.js b/webapp/components/FilterMenu/FilterMenu.spec.js
index 079ef5487..d70af323f 100644
--- a/webapp/components/FilterMenu/FilterMenu.spec.js
+++ b/webapp/components/FilterMenu/FilterMenu.spec.js
@@ -39,7 +39,7 @@ describe('FilterMenu.vue', () => {
 
       describe('click "clear-search-button" button', () => {
         it('emits clearSearch', () => {
-          wrapper.find({ name: 'clear-search-button' }).trigger('click')
+          wrapper.find('[name="clear-search-button"]').trigger('click')
           expect(wrapper.emitted().clearSearch).toHaveLength(1)
         })
       })
diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js
index b0d4d8f16..b864a8a46 100644
--- a/webapp/components/FilterPosts/FilterPosts.spec.js
+++ b/webapp/components/FilterPosts/FilterPosts.spec.js
@@ -92,7 +92,7 @@ describe('FilterPosts.vue', () => {
     it('starts with all categories button active', () => {
       const wrapper = openFilterPosts()
       allCategoriesButton = wrapper.findAll('button').at(1)
-      expect(allCategoriesButton.attributes().class).toContain('.base-button.--primary')
+      expect(allCategoriesButton.attributes().class).toContain('--primary')
     })
 
     it('calls TOGGLE_CATEGORY when clicked', () => {
@@ -115,7 +115,7 @@ describe('FilterPosts.vue', () => {
       getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
       const wrapper = openFilterPosts()
       democracyAndPoliticsButton = wrapper.findAll('button').at(4)
-      expect(democracyAndPoliticsButton.attributes().class).toContain('base-button.--primary')
+      expect(democracyAndPoliticsButton.attributes().class).toContain('--primary')
     })
 
     it('sets language button attribute `primary` when corresponding language is filtered', () => {
@@ -124,14 +124,14 @@ describe('FilterPosts.vue', () => {
       spanishButton = wrapper
         .findAll('button.language-buttons')
         .at(languages.findIndex(l => l.code === 'es'))
-      expect(spanishButton.attributes().class).toContain('base-button.--primary')
+      expect(spanishButton.attributes().class).toContain('--primary')
     })
 
     it('sets "filter-by-followed-authors-only" button attribute `primary`', () => {
       getters['posts/filteredByUsersFollowed'] = jest.fn(() => true)
       const wrapper = openFilterPosts()
       expect(
-        wrapper.find({ name: 'filter-by-followed-authors-only' }).classes('base-button.--primary'),
+        wrapper.find('.base-button[name="filter-by-followed-authors-only"]').classes('--primary'),
       ).toBe(true)
     })
 
@@ -139,7 +139,7 @@ describe('FilterPosts.vue', () => {
       let wrapper
       beforeEach(() => {
         wrapper = openFilterPosts()
-        wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
+        wrapper.find('.base-button[name="filter-by-followed-authors-only"]').trigger('click')
       })
 
       it('calls TOGGLE_FILTER_BY_FOLLOWED', () => {
diff --git a/webapp/components/NotificationMenu/NotificationMenu.spec.js b/webapp/components/NotificationMenu/NotificationMenu.spec.js
index 530d202e2..45d109a7e 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.spec.js
+++ b/webapp/components/NotificationMenu/NotificationMenu.spec.js
@@ -1,4 +1,4 @@
-import { config, shallowMount } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import NotificationMenu from './NotificationMenu'
 
 const localVue = global.localVue
@@ -22,9 +22,9 @@ describe('NotificationMenu.vue', () => {
     }
   })
 
-  describe('shallowMount', () => {
+  describe('mount', () => {
     const Wrapper = () => {
-      return shallowMount(NotificationMenu, {
+      return mount(NotificationMenu, {
         data,
         mocks,
         localVue,
@@ -33,7 +33,7 @@ describe('NotificationMenu.vue', () => {
 
     it('counter displays 0', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('base-button-stub').text()).toEqual('0')
+      expect(wrapper.find('.count').text()).toEqual('0')
     })
 
     it('no dropdown is rendered', () => {
@@ -67,12 +67,12 @@ describe('NotificationMenu.vue', () => {
 
       it('counter displays 0', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('base-button-stub').text()).toEqual('0')
+        expect(wrapper.find('.count').text()).toEqual('0')
       })
 
-      it('button is not primary', () => {
+      it('counter is not colored', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('base-button-stub').props('primary')).toBe(false)
+        expect(wrapper.find('.count').classes()).toContain('--inactive')
       })
     })
 
@@ -130,12 +130,12 @@ describe('NotificationMenu.vue', () => {
 
       it('displays the number of unread notifications', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('base-button-stub').text()).toEqual('2')
+        expect(wrapper.find('.count').text()).toEqual('2')
       })
 
-      it('renders primary button', () => {
+      it('renders the counter in red', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('base-button-stub').props('primary')).toBe(true)
+        expect(wrapper.find('.count').classes()).toContain('--danger')
       })
     })
   })
diff --git a/webapp/pages/settings/my-social-media.spec.js b/webapp/pages/settings/my-social-media.spec.js
index b1c9e0649..cf994e397 100644
--- a/webapp/pages/settings/my-social-media.spec.js
+++ b/webapp/pages/settings/my-social-media.spec.js
@@ -119,11 +119,11 @@ describe('my-social-media.vue', () => {
         })
 
         it('displays the edit button', () => {
-          expect(wrapper.find('a[name="edit"]').exists()).toBe(true)
+          expect(wrapper.find('.base-button[data-test="edit-button"]').exists()).toBe(true)
         })
 
         it('displays the delete button', () => {
-          expect(wrapper.find('a[name="delete"]').exists()).toBe(true)
+          expect(wrapper.find('.base-button[data-test="delete-button"]').exists()).toBe(true)
         })
       })
 
@@ -138,7 +138,7 @@ describe('my-social-media.vue', () => {
 
       describe('editing social media link', () => {
         beforeEach(() => {
-          const editButton = wrapper.find('a[name="edit"]')
+          const editButton = wrapper.find('.base-button[data-test="edit-button"]')
           editButton.trigger('click')
           input = wrapper.find('input#editSocialMedia')
         })
@@ -169,7 +169,7 @@ describe('my-social-media.vue', () => {
 
       describe('deleting social media link', () => {
         beforeEach(() => {
-          const deleteButton = wrapper.find('a[name="delete"]')
+          const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
           deleteButton.trigger('click')
         })
 
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index e19c4fb9a..d89896cb8 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -30,6 +30,7 @@
                 ghost
                 @click="handleEditSocialMedia(link)"
                 :title="$t('actions.edit')"
+                data-test="edit-button"
               />
               <base-button
                 icon="trash"
@@ -37,6 +38,7 @@
                 ghost
                 @click="handleDeleteSocialMedia(link)"
                 :title="$t('actions.delete')"
+                data-test="delete-button"
               />
             </template>
           </ds-list-item>